Monday, June 18, 2012

Add Social Media Share Widget With Search Box For Blogger

Social bookmaking is the easy way to get traffic to your
blog.Earlier I gave lot of  of social Bookmaking gadget.In this
tutorial Im helping you to add the Search box and link with Rss,
twitter and Facebook.Earlier i gave Add Sleek Search Box With
Social Buttons For Blogger
. I also same widget with different style.
This gadget will helps you to  grow up  your Rss follower,
Twitter follower and Facebook fans.follow these steps.

Add Social Media Share Widget With Search Box For Blogger

1.  Log in to blogger account > Go to Design >> Page Element

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

3. 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/USERNAME'>
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/USERNAME'> Follow us on Facebook! </a></div><a href='http://www.bloggertrix.com/'><img src='http://1.bp.blogspot.com/-MiryOkTk9fs/T9nKXxy3riI/AAAAAAAAA5o/kMhpj-0aCAM/s1600/image.png' target='_blank'/></a></div></div>

Replace UserName with your twitter Username
Replace UserName with your Facebook fan page Id
                                 
4. Save HTML/Javascript. you are done.

0 comments:

Post a Comment