blogging rocks the world

seo tips, blogging tricks, widgets and gadgets for you blog

Showing posts with label blogger tips and tricks. Show all posts
Showing posts with label blogger tips and tricks. Show all posts

Wednesday 14 March 2012

embed-custom-google-search-in-blogger

01:09 By , No comments


Sign in to Google

Before you can create a Google Custom Search you need to have a Google Account. You may already have one for Gmail, Google+ or another one of Google's services.
If you have an AdSense account then it would be best to use that. You can then associate your Google Custom Search with your AdSense account to get paid from the adverts in the search results.
If you don't have an account yet, you can create a new one here:
https://www.google.com/accounts/NewAccount 
It's quite a simple form. All your really need is an email address. Don't forget to note down the email address and password you used!

Create your Custom Search Engine

Once you have signed into your Google Account you can start to create a Custom Search Engine by going to the Google Custom Search  page.
Just click on the New Search Engine... link to get started.
Fill in details requested. In particular the sites you want it to search through. Then click Next.
Here you need to chose a Style. Don't worry to much now, as you can always change it later. If you are CSS savvy you can customise it as well. Click on a Style to see a preview of it, which you can actually test to see if what sort of results Google will display. Once you have chosen your theme then click Next.

The Search Code

By default Google provides code that you can use to add to a dedicated search page. This is the simplest option. With this you create a new page on your website and add the provided code into it. You can then add "search" links to it from the other pages of your website, and your done. Visitors have to go to the search page (via those links) in order to perform a search.
If you wish to have a more integrate search where search boxes are embedded on every page, then click on the Look and feel link near the top...

Embedded Search Boxes (look and feel)

There are several Look and feel Layout options that you can use to change the way the Google Search Engine works. The default is Full-width which lets you display the search results on the same page as the search box.
My favourite is the Two page option, which is what is used on this website (see top right). This option lets you embed a search box on every page. When a visitor searches using it they are sent to a dedicated search page to see the results.
It even suggests refinements to your search as you type.
To use the Two page option, go to the Look and feel section and select Two page as your layout. Then click the Save & Get Code... button. Here you will need to enter the URL of the page you are going to use to display the search results. Create that search result page and embed the provided Search results code into it. Finally add the Search Box Code to all the pages on your website (a good place would be in a common header if your website is template driven).


Read more →

Tuesday 13 March 2012

bottom-follow-bar-like-wordpress-for-blogger

12:40 By , , No comments

Static Follow By Email Pop Out Widget for Blogger / Blogspot

STATIC FOLLOW BY EMAIL POP OUT WIDGET FOR BLOGGER / BLOGSPOT

Static follow by Email Widget is a New Widget for Blogger/Blogspot. This is Actually a WordPress Plugin. Now it is available for Blogger Blogs. This Widget is Jquery Based widget with Nice and smooth Popout effect. You will get more email subscribers with this widget and Very easy to Install in your Blog.
Look at Preview of this Widget. 
Static Follow By Email Pop Out Widget for Blogger Preview

HOW TO INSTALL POP OUT FOLLOW BY EMAIL WIDGET?

As this widget based on jQuery plugin, First you need to have a jQuery Plugin in your Blog template.
This Step is Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.
Add the below line of code before </head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

INSTALLING WIDGET:-

BY ADDING WIDGET CODE TO TEMPLATE
This will converts Follow By Email Official Blogger Widget to a Pop out follow by Email Widget.
  1. First Add Follow By Email Official Blogger Widget to Your Page Elements Layout.
  2. Add the Below Section Of code before closing </head> tag.
    <style type="text/css">
/*<![CDATA[*/
    .FollowByEmail {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
    .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
    .w2bfollowButton {background: #464646;color: #CCC;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
    .w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWyjTaUzSbs7kyz7ZC_Cvt-iMf43qBnxOfSYYafQRdFOYubRITxPm79QJ-apVyZI0lcfI9Y81-YqmBw9BPNN__DteEBZ72kDrblDBuAnT2IzW8aimgGlwObVWOzBMXwhUj9NL41vHCfoh/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
    .w2bfollowButton:hover,.followActive {color: #fff !important;}
    .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
    .followactive {background-color: #333;}
    .follow-by-email-inner {padding: 15px;}
    .FollowByEmail h2 {padding: 15px 15px 0;font-size: 18px;margin: 0 0 10px;font-weight: normal;}
    .follow-by-email-inner p {margin: 0 0 10px;}
    .follow-by-email-inner .follow-by-email-address {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
    .follow-by-email-inner form {text-align: center;}
    .follow-by-email-inner td{display: inline-block;width:100%;text-align:center;}
    .follow-by-email-inner .follow-by-email-address:focus {color: #000;border-color: #000;}
    .follow-by-email-inner .follow-by-email-submit {cursor: pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
    .follow-by-email-submit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
    .follow-by-email-submit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
    .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
    .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
    .w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b(".FollowByEmail");followBox.prepend("<a class=\"w2bfollowButton\" href=\"#\"><span>Follow</span></a>");w2b("<p></p>",{class:"w2bFollowFooter",html:"<a href=\"http://feedburner.google.com\" target=\"_blank\">Delivered by FeedBurner</a>"}).appendTo(followBox.find(".follow-by-email-inner"));followBox.find("td:last").removeAttr("width");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").animate({bottom:followHeight},{duration:200,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").animate({bottom:"0"},{duration:400,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
  3. Save the Template!

Read more →