Social Media Share Widget For Blogger with Hover Effect

Presenting yet another beautiful social media connect widget that lets your visitors to search your blog, subscribe to your RSS Feeds, follow you on twitter, follow you on Facebook and share your blog with over 351+ Social Media Networks! This widget is an extracted code from a wordpress template provided by Pbloggertemplates. I have further edited the widget to make it a perfect social share tool.

  Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code  

/*  -------------HACK THE SYSTEM SOCIAL SHARE WIDGET-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:url(http://2.bp.blogspot.com/-L-6BIGrXfyA/TeDn95a4GxI/AAAAAAAAHLg/z1th8GgWvko/s1600/search-bg.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}
.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}

  Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code  

• To Change width of search box edit width:350px
• To change width of search input area edit width:80%

 Then Search for,

<div id='sidebar-wrapper'>

      Now Paste the following code just below it,

   Code Code Code Code Code Code Code Code Code Code Code Code Code Code 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='http://4.bp.blogspot.com/-4xLRhLRVVkI/TeDn9fTgT3I/AAAAAAAAHLY/5DuGTiOVtj8/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>
<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='http://3.bp.blogspot.com/-0kKKFqj_U2U/TZ52Sq7wwfI/AAAAAAAAEIQ/mrmCuT1KzjI/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a>
</div>
                       
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src='http://4.bp.blogspot.com/-vhFL0XMMYLg/TZ52S1xMdpI/AAAAAAAAEIY/uzxm685MciA/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src='http://1.bp.blogspot.com/-3tPdbv6JNYA/TZ52SSUbiVI/AAAAAAAAEII/tzPhCV1UIYU/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>
<div style='clear:both;'/>
<div class='addthis_toolbox'>  
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://4.bp.blogspot.com/--haasmhP25E/TX0BIdW3PYI/AAAAAAAABec/ll0OKqU0z4M/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://4.bp.blogspot.com/-yL-sR48gGug/TX0A8-6p88I/AAAAAAAABds/_CXWKvVi8LU/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://4.bp.blogspot.com/-R8SGNJPGg68/TX0A9QHboaI/AAAAAAAABd8/OkHcJttzFr0/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://4.bp.blogspot.com/-X9vrqy4kNI4/TX0A9PtQIcI/AAAAAAAABd0/WahU3JI8r3o/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://2.bp.blogspot.com/-iLJQkdXwnpo/TX0BIZ59J_I/AAAAAAAABeU/t367mp0EWJM/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://1.bp.blogspot.com/-oam0L5GcIQo/TX0A9lXvQwI/AAAAAAAABeE/EPfnCictAv0/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://1.bp.blogspot.com/-duuV-meHLMg/TX0BILhZk3I/AAAAAAAABeM/ymXO0WYc80g/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>
  Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code  


Make these changes:

• Replace http://twitter.com/USERNAME with your twitter profile link
• Replace http://facebook.com/USERNAME with your Facebook Profile link

      6.   Save your template and Bingo you are done! :>
Visit your blogs to see a beautiful new change. Hope you liked it. Questions are always welcomed.

Thank Me Later (:

Read More

Add Recent Comments Widget with Avatar for Blogger/Blogspot

Recent Comments widget with Avatar for Blogger Blogs. In this widget we can show the Avatar of Commenter using the updated the Comments API. as you seen my Recent Comments Widget.

Read More

Add Static Facebook Pop Out Like Box

 

Read More

What Social Networking Buttons Should you use on Blogs?

Web Traffic a word heard everywhere and to achieve it, web owners will try every possible method to push themselves to a better level. In order to achieve web traffic the simplest and most effective solution is the use of Major Social networking websites. With the rapid advancement and development of Internet, more and more bloggers and webmasters are getting addicted to social tools and services for the purpose of inorganic traffic flow. Social networks are expanding widely and every year we hear of another name. By far there are over 350 big and small social connecting sites. Just a month ago we heard of Google+ and God knows how many more will evolve in future.

The question here is that which social buttons should you use in order to increase the number of your unique visitors and thereby daily page views. It really destroys readers interest when he sees too many buttons on your site, eating their internet speed with their heavy load time. Providing efficient and easy navigation to user should be our goal. If you add each and every social media buttons like Digg, reddit, delicious, Twitter, technorati, Facebook like button, Facebook send button, Google +1  button, linkedin, stumbleupon and so on then obviously you are increasing your web blog load time discouraging both visitors and search engines. Readers enjoy fast load time and search engine robots enjoy crawling data at a faster rate. According to Google new webmaster guidelines, all websites with slow load time are penalized by Google and will be ranked low in SERP (Search Engine Result Page). So lets select the best traffic value buttons for your blogs.

Give Priority To Big Social Networks

By big I mean social networking websites with extremely high traffic and audience value. Use social buttons which have the greatest number of online registered users for example Facebook. It has around 750 Million active registered users. The probability that your visitor is a Facebook user is near to 90% so make sure you Keep Facebook at the top of your priority list. Second comes Twitter with 175 Million users.  Third comes the new social Giant though new but soon it will expand like fire and this new giant is of course Google+. Fourth comes LinkedIn with over 100 Million active users.

Social Networks That Counts Second

Now lets look at the traffic value of some other social networking sites that comes in our second priority list.

These names include Stumbleupon with 7 Million users, Digg with approximately 1 Million registers users and reddit.

Now here goes the order of priority from best to least best:

1. Facebook
2. Twitter
3. Google+
4. Linkedin
5. StumbleUpon
6. Reddit
7. Digg

You must Keep the first 4 buttons as the main social sharing buttons on your blogs and keep others on Addthis Share button which contains over 350 social networking sites. This way you keep the load time performance of your blog high and will receive a handsome traffic in return.

What buttons do we use?

You can see Twitter, Facebook Like, Stumbleupon and Google+ buttons as our main focused buttons on MBT Blog and that is contradictory to the priority list I shared above. I have skipped Linkedin because it is mostly used by business professionals and my site does not address them therefore I have used stumbleupon instead. So you should decide yourself which buttons are more important for your blog's growth and success.
You can use the following social networking widgets for customizing your blogs:

• Add Social Networking buttons below titles

I have published many widgets on social networking buttons. You can use the search box above to choose the best widget design for your blog.

Read More

Add Social Networking Buttons beneath Post Title for blogger

After having explained the importance of social network buttons for your blog traffic in order of priority, its now time to add them below your blogger posts titles so that readers may find it easy to like, stumble, +1 recommend and tweet your posts instantly.

Read More

Add Pinterest Counter Button To Blogger

 

As I got busy with studies, a new social networking niche boosted in numbers and strength so dramatically that it has now become the social media network of 2012 with over 10.4 Million registered users and 50 million blog posts featuring Pinterest including MBT. 

Read More

Add Facebook Like Button Beneath Post Titles

I previously shared a Facebook Like button and send button by default. One of the problems I noticed with it was the load time. I then shifted to this new like button which loads like a flash at my internet connection speed. If you wish to add this new like button code just below the post titles of your blogger blogs then follow these easy steps:

Adding Facebook Like Button To Blogger

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Click the "Expand Widgets Templates" Box
4. Search for this,

<data:post.body/>

    5.    Just above it paste the code below,
Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code 

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>

Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code 
     6.   Save your template and you are done!

Visit your blog to see it working just fine just below post titles. Feel free to ask any questions you may have.

Read More