Search Box With Social Media Sharing Widget

0
Search Box With Social Media Sharing Widget
In this tutorial i'm going to explain how to add search box with social media sharing widget for blogger.However Social Bookmarking is always a best way to get traffic to your website or blog.This widget help you to grow your followers in social media networking i.e Facebook,Rss Feed and Twitter.It is very easy to use and a very clean look,to add this widget just follow the steps mentioned below.





DEMO

1. Log in to blogger account.
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code
<style type="text/css">
#search{width:268px; border:1px solid #E0DFD9;margin: 0 0 0 0;background:url(http://1.bp.blogspot.com/-U9b2ClQr0qQ/T98EFU0pURI/AAAAAAAAA6M/dw8Dw4H_fR4/s1600/search-bgg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}
.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
</style>  
<div class='topsearch'>
<div class='clerfix' id='search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/>
<input class='search-image' src='http://3.bp.blogspot.com/-OfKiE_4vvp8/T98EGUhcaDI/AAAAAAAAA6U/evh0_xmNLEs/s1600/searchico.png' title='Search' type='image'/>
</form> </div> </div> <div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<img alt='RSS Feed' src='http://3.bp.blogspot.com/-eoQNuiS_DEE/T98CoPI65yI/AAAAAAAAA58/1C3-O73Gavs/s1600/social-rss-box-orange-icon.png' title='RSS Feed'/><div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl   &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a> </div>
</div> <div class='social-connect-widget' style='margin-bottom:10px;'>
<img alt='Follow Us on Twitter!' src='http://4.bp.blogspot.com/-zcHeTCGPEzQ/T98Co2ASiiI/AAAAAAAAA6E/K9kv5Oag_Jo/s1600/social-twitter-box-blue-icon.png' title='Follow Us on Twitter!'/>
<div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:10px;'>
<a href='http://twitter.com/bloggersstand'>
Follow Us on Twitter!</a>
</div></div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<img alt='Be Our Fan!' src='http://4.bp.blogspot.com/-nQSUVBUO4w4/T98CnO1EjkI/AAAAAAAAA50/a3y-_20yP1s/s1600/social-facebook-box-blue-icon.png' title='Be Our Fan'/>
<div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:-10px;'>
<a href='http://facebook.com/bloggersstand'> Follow us on Facebook! </a></div><a href='http://www.bloggersstand.blogspot.com/'><img src='http://1.bp.blogspot.com/-MiryOkTk9fs/T9nKXxy3riI/AAAAAAAAA5o/kMhpj-0aCAM/s1600/image.png' target='_blank'/></a></div></div>
  • Change bloggersstand with your Facebook username.
  • Change bloggersstand with your Twitter Username.
5. Now save your 'HTML/Javascript'.. Done ! 
How to add Search Box With Social Media Sharing Widget,social media networking search box with social share buttons for blogger blogspot website share on facebook,google,twitter
In this tutorial i'm going to explain how to add search box with social media sharing widget...
SUMMARY

How to add Search Box With Social Media Sharing Widget,social media networking search box with social share buttons for blogger blogspot website share on facebook,google,twitter

You Might Also Like:

We hope this article helped you to learn Search Box With Social Media Sharing 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 "Search Box With Social Media Sharing 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