20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Add Search Box With Social Media Subscription Widget

how Add Search Box With Social Media Subscription Widget,search box with social media network sharing gadget rss feed,facebook,googleplus share content from search box
Add Search Box With Social Media Subscription Widget
In this tutorial i'm going to explain how to add search box with social media sharing include facebook,twitter,rss feed,google plus.it is a very useful and simple gadget for your blogger.it add awesome view to your blog or website because it have both the features search and social sharing,follow,join us widget box for blogspot.


DEMO

1.Log in to blogger account.
2.Now select "Template".
3.Click EDIT HTML Button.
4.Find this code  by using Ctrl+F  ]]></b:skin>
5.Paste below code Before ]]></b:skin>
.Bsbox{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}

6.Go to blogger and select Layout
7.Click Add Gadget and select 'HTML/Javascript"
8.Paste below code.
<div class="bsbox">
<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/bloggersstand" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtRM5fjxa0Xu_u3BGZwrCCZFtiMr-SKlgplatbyI1BF6ojvtDfkfiT4vEl0CXeDR7d1NSch0rLFMmwn9YLAvn4iDK99oJs2E0Vk5KeaT5IZ6xULmi6WMmm5fsyVNN_Gp_-1y82bTZFD3w/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/bloggersstand" target="_blank" rel="nofollow">RSS Feed</a>
</div></td><td><div class="emailsbox">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJH5FDNd11VRHzHXICI7l01XmYl7vtRQmmBbvtiyWFo0K1v3lLAhytpcij5Q5C2QjOsentlJOBaVhsXw6agOke8moe835HpCgGXKeOqKA1FlW6K4EQsHMrwlD3kzrV2nstlSBCASIcdRY/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/115587840274121878323
" target="_blank" rel="nofollow"> Google Plus</a>
</div></td></tr><tr><td><div class="twitterbox"><a href="http://twitter.com/bloggersstand" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKuJAzuxM6Itzy2UEFsXUFSTzXzxecrW6T0jyPcduvimZ0CRE3j3fOEs27xCzkBvzmsnWv3s3GPx6UnjrOsxi3OrZrwB2KuMi_s5FIo0nZU2nmrfh8JM6sHxCa8kAY0d7pMkjgyi0VAx8/s1600/twitter-icon.png"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a>
<a href="http://twitter.com/bloggersstand" target="_blank" rel="nofollow">Twitter</a>
</div></td><td><div class="facebookbox"><a href="http://www.facebook.com/bloggersstand" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV5f4w9rvwpnK8-Lfoz9yDDhv6BQxqf-n1C6y_CzGozSKhpC1cVxKhqIacl40rO2dlANfZxSGklmXTG4CLTLuMdhgLQ3iPDc4g_fPn1ZTmT3eGHVTujzfwCi18OaCJoiI2P5cgaoYi9Lc/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/bloggersstand" 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>

  • Change bloggersstand with your Feedburner ID .
  • Change bloggersstand with your Facebook ID.
  • Change bloggersstand with your Twitter ID.
  • Change 115587840274121878323 with your google plus id.

9. Now save your 'HTML/Javascript'. Done !

Post a Comment