How To Add Search Box With Subscriber Gadget For Blogger

By : Follow Trends

On : 9/02/2015

In : Blogger Tips

0 comments

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% "Tahoma",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/AVvXsEgnabvPjX5uWQtg721GHYkwoPwcxiyMBrlRU_oVhEtgNWbjFCbNZCJ4VOIECfmjh9Tz59il2vgEIUUqKgIssLzij29wqVVZmpAhFaYzJYGV8sQ2wY9BDzezontH9jnItZI1PnOiuJqdQSc/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/AVvXsEhjZ0X81EtffI2uNxDlkkR0CbWYROuc6jXPylFzbO-ofMP-XG89EPKwkNOxWqtYd4UWtlXcc1vXPf91HZo5oefx-DFCUHpOmlI9xuuHipgxwrKCb8aYku_j1Ah3lWKt_6xpp3_PbtW9uJE/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/AVvXsEjVasA-rcZjdJbC4MrrT3dFjwffKo92I1YTgB83NSjzTRTofsxeaS6RkPejSl3MfxZbS9Ibh-i7i6q6xmgTQtm-MpfKuPuGxQ6QH2SJwhRfOnkHI8MK17V6vjjb2dgIZhNbtQbrvdICGTo/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/AVvXsEgrIqauEilp07gDT-Y2LaR4c54-JG5vsecHyIjYpcAHrnYHQOp1OCFkayCfuOrKDpd90ql0qndHEM7Mn0XHG0XWLvlBKwChkdpFHP-lPtdtxJEcbcjANyRU882OSvBf_4BFrs73uGjZZgs/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.