Friday, June 22, 2012

How To Add Search Box With Subscriber Gadget For Blogger

This Is also Another Cool Rss Subscription Gadget.
It include with Twitter, Facebook and Rss, You can
add it to your blog.It will make your blog attractive
and helps to increase Facebook fan , Twitter follower
and Rss Subscribers,.Earlier I made similar post
Add Sleek Search Box With Social Buttons For
Blogger
you can Follow these steps.


Search Box With Subscriber


1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

.Btbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center:margin-bottom:-30px;}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#CED8F6;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 #1014c7}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#1014c7;text-decoration:none}
.emailsbox{background:#CED8F6;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 #1014c7}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#1014c7;text-decoration:none}
.twitterbox{background:#CED8F6;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 #1014c7}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#1014c7;text-decoration:none}
.facebookbox{background:#CED8F6;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 #1014c7}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#1014c7;text-decoration:none}
#search{width:290px;padding:2px 2px;background:#F7F6F6F;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left;margin-bottom: 0px;}
#search:hover{border:1px solid #1014c7}
#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:0 solid #222}

4. Now Go to Design >> Page Element

5. Click Add Gadget and select 'HTML/Javascript'

6. Paste  below code.

<div class="btbox">
<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/bloggertrix" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVm_Dr1ve1Qxx9A3FF_OYcdrSaxF4KIiC8pfFgDfMb3_4j3gT47eDPGI5eecKLrRZ8iYU1bKo-hLasej9crHLUhmTBBNaQBlGNv6WJwr1sH6P1iR2Pi2dvptlucL17kSUQRaLt6Rn-pIY/s1600/rss-icon.png"  alt="RSS Feeds" 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">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLm0q7aM7DF_BsrtpyCVVFlMVjD6UhMpJ1O2Q19Bvs616S10u2VMccv3syFW-LfXbnm7xYJFDekSuA9a3oSsnigytCMP7FHkiBjgKKfmKzrN2YLwPcqakFMrUuXvB3OwBIDlzK3guci0/s1600/Google-plus-grey-icon.png"  alt="Google Plus" title="Google Plus" style="vertical-align:middle; margin-right: 5px;border:none;"  />
<a href="href="https://plus.google.com/Username
" target="_blank" rel="nofollow"> Google Plus</a>
</div></td></tr><tr><td><div class="twitterbox"><a href="http://twitter.com/bloggertrix" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsE4o3CYZceV55cpIrI6zpR-S8tD9BQzI1006B6Rv09QeoCcVdChyphenhyphen1ynJUmJNvQiV9pIGUvLBShdRf4IYA55-ZBXnOX9SNmC5x1SHok2Vp-pSVy-bKb_RrA7rel54PrLnZloaVylXwtSg/s1600/twitter-icon.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/bloggertrix" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheyUVK6zzYRMmjzwT4QLIUG7vXbsvmMNy0VvZJzAsdRzLzWjetGRRsyYc2KyIP-jo7FsSRFN88n5cSNZOpAzfeXqDpa8AIhcNXPKf1RuqF_rwo0U7mMj_sRvhPVh62jy6xDnR5Mzzg7uw/s1600/social-twitter-box-blue-icon.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><p style="display:none;" align="center"><a href="http://bloggertrix.com/" target="_blank"></a></p></div>

*Replace Feedburner-ID With your Feedburner Id
*Replace USERNAME with your Google Plus username
*Replace Twitter-USERNAME with your Google Plus username
*Replace Facebook-USERNAME with your Google Plus username

7. Now save your template
    you are done.

3 comments:

  1. Thanks for the nice post.

    ReplyDelete
  2. Your site is so cool, I will take my time and learn from it...I am a newbie, and I am not a computer whiz, but am willing to learn...

    ReplyDelete
  3. @Cecille Tuazon,
    Thanks, if you have any question , comment below.

    ReplyDelete