-->

Search Box Blogger

The default search box provided by blogger is not so attractive and looks something odd in style. Here are nice Search Engine codes containing Facebook, Twitter, RSS Feed and Email Notification-Feed Burner Email Notification Links. You can search your Blog's content and also link up your Facebook and Twitter account with it. Email Feed icon provides readers your Feed Burner Email Notification. You can easily add this at your Blog. Follow some simple steps to add this nice Search Box at your Blog-
1.  Log in your Blogger Account.
2.  Enter in Design > Edit HTML > section and search </head> code in your template. You can use your browser's search engine by Ctrl + F
3.  Now copy the given codes and paste just before </head>


<style type="text/css">.subbox{width:305px;border: 2px solid #7F7F7F; -moz-border-radius:10px;-webkit-border-radius:10px; border-radius:10px; overflow:hidden; padding:4px;}.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}.rssbox:hover{border:1px solid #92aed1}.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}.rssbox a:hover{color:#7c8a9b;text-decoration:underline}.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}.emailsbox:hover{border:1px solid #92aed1}.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}.twitterbox:hover{border:1px solid #92aed1}.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}.facebookbox:hover{border:1px solid #92aed1}.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7; -moz-border-radius:10px;-webkit-border-radius:10px; border-radius:10px; height:28px;margin-top:0;margin-left:5px;display:inline;float:left}#search:hover{border:1px solid #92aed1}#search form{margin:0;padding:0}#search fieldset{margin:0;padding:0;border:none}#search p{margin:0;font-size:85%}#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:1px solid #222;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}</style>

4.  Now take a preview to avoid errors and save your template.
5.  After saving your template enter in design section and hit Add a Gadget >>  HTML/Java Script and Paste the give codes in it. 

<div class="subbox"><div id='search' style='display:inline;'><form action='/search' id='searchform' method='get'><input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." /><input id="searchsubmit" type="submit" value="Search" /></form></div><table><tr><td><div class="rssbox"><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjduR4-lrOKBNWsMu7JVzxZewvofZ4eOtSdyraJKiR9EsjxZXhWzUniZjSdLAwyw6eLQ0P4YbVUcBFxwSq3ii-FsHNbPc6v-pX5Nwcr03pqbNoyyKQiuWf2HQY6EYfgmLQ9kVa_4E71iV2j/s1600/rss.png" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a></div></td><td><div class="emailsbox"><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1F6Dce2J3A1RnIRARWnOCfBQ_K3COFE0xdMZDdtDe568GJT81cuf17FH79G7ck20j-GM5UilgaQKRkPPQ17pVck-mfXdt2XBtGTOO_HFVpEGGM3Bll3XAes22k5KxXBwacz5keDevmjQp/s1600/email.png" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a></div></td></tr><tr><td><div class="twitterbox"><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2ajA-vDPH8lGU1tGb3FgSGihu6VqK7dsBK5M8C2-SQ-69hT86vS6YgfHLAdrU16Mji0Q8KYBWmpsINxCL1mUo7tMHroYLrham0dTVM9RebP98AX7yCU2CQmXPhei1YjimcWNHLLYtvyY/s1600/twitter.png" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a></div></td><td><div class="facebookbox"><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKTi0gPXmqEScIZQayZ_gRbfqT-LaEJTfI6nF6tdXG0IWrCoqjG7KJfwQLF7CcB1lfAvHErZVruwmNF8S8fprLqvensf77ZvFsfGmeBmyqcc3QySoequEVulAd58zFovo03vl2l02UT1w/s1600/facebook.png" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a></div></td></tr></table></div>


6.  Now Carefully replace-
FEEDBURNER-ID : with your Blog's Feed burner ID (See carefully it will be replaced four times).
TWITTER-USERNAM with your twitter name, linked up with your twitter account.
FACEBOOK-USERNAMEE with your Facebook username.
7.  Now Give HTML/Java Script a title like "Search Here" and save it to complete the entire process.

Visit your Blog and find cute search Box. I hope this information will help you, if so please share !

Baca juga

1 comment

Post a Comment

Your Suggestions are valuable for me.