Social Media Share Widget For Blogger

| |

Presenting a very cool subscription widget! As we know social media is the best one to pull traffic, and this widget is the best to start pulling traffic. This widget is very cool designed as you can see the image at left. This has a search bar, link to your RSS feeds, link to your blog's Twitter Profile, link to your Facebook Fan Page and share buttons that share the page the visitors are in. As per my results this widget is one my favorite widgets ever. 


1. Log-in to your Blogger account and go to your Blog's page.
2. Now navigate to "TEMPLATE" > "EDIT HTML"(Please Back-Up your template)
3. In the "HTML EDITOR" find for ]]></b:skin> 
4. Just below ]]></b:skin> paste the below code-
/*  -------------Blogger Tricks Hut SOCIAL SHARE WIDGET-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:url( 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}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}
  • To Change width of search box edit width:350px
  • To change width of search input area edit width:80% 
4. Now search for:- <div id='sidebar-wrapper'>
5. Just below the above code paste the below code-

<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='' title='Search' type='image'/>
<div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img alt='RSS Feed' src='' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href=''><img alt='Follow Us on Twitter!' src='' title='Follow Us on Twitter!'/></a><a href=''>Follow Us on Twitter!</a>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href=''><img alt='Be Our Fan!' src='' title='Be Our Fan'/></a><a href=''>Follow us on Facebook!</a>
<div style='clear:both;'/>
<div class='addthis_toolbox'>  
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='' width='32'/></a>
<script src='' type='text/javascript'/>
<div style='clear:both;'/>

  • Replace with your twitter profile link  
  • Replace with your Facebook Profile link 
Now check your blog and see your super changed blog. For more great tutorials stay tuned to Blogger Tricks Hut. Happy blogging.



MARK said... March 12, 2012

Do we have to edit the html? Can't we add it directly to HTML gadget?


@mark: We can do that but the purpose of this widget is to be at the top of all widgets, so we need to add the code in html, to make sure that the widget is always on the top!

Post a Comment

Powered by Blogger.