Add Search Box With Social Media Subscription Widget

0
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="http://1.bp.blogspot.com/-r3icBHfZ9tI/T-H4ytqBw7I/AAAAAAAAA6o/_swM5CqlQVQ/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="http://2.bp.blogspot.com/-lgwSpbmUC0A/T-H4xLZhcsI/AAAAAAAAA6g/15-p04ZT9Es/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="http://4.bp.blogspot.com/-Z_JLk3C2FFc/T-H41vqABCI/AAAAAAAAA64/FuynqiFJeGg/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="http://3.bp.blogspot.com/-JwcjMk_k5LA/T-H4zv7J6II/AAAAAAAAA6w/fxBaVEXekL0/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 !
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
In this tutorial i'm going to explain how to add search box with social media sharing includ...
SUMMARY

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

You Might Also Like:

We hope this article helped you to learn Add Search Box With Social Media Subscription Widget. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add Search Box With Social Media Subscription Widget" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand