Simple Social Buttons Widget for Blogger Blogs

Are you looking for a Social widget for your Blog? Well the wait ends Here is a simple social buttons widget for blogger. This widget contains Facebook Like button, Twitter Follow button and Google+ Recommend button. This widget looks decent and loads fast and is fully compatible with blogger blogs.

You Might Also Like:

• Social Share Buttons Below All Blogger Posts.
• Multi Social Subscription Widget for Blogger.
• Mashable Style Social Subscription Widget for Blogger. 
• Add a Stylish Email Subscribe Widget to Blogger. 

Here is a Step by Step guide for Installing this widget on Blogger. If at any step you find difficulties Please feel free to contact me or just leave a comment below.

This is How It will look

How to Install this Widget.

Step 1: Go to Blogger Dashboard > Layout

Step 2: Click on 'Add a Gadget' and choose HTML/Javascript 

Step 3: Copy and Paste the following code inside the widget box.

<!-- The-Area51.com Social Widget Start --></div>
<style>#socialwidget{border:1px solid#ebebeb;width:300px}.TZ-social{padding:10px 10px 10px 10px;border-bottom:1px solid#ebebeb}.TZ-social img:hover{opacity:0.8}.googleplus{background:#ffffff;border-top:1px solid white;border-bottom:1px solid#ebebeb;font-size:12px;color:#000;padding:9px 11px;ine-height:1px;font-family:Verdana,Geneva,sans-serif}.googleplus span{color:#000;font-size:11px;position:absolute;margin:9px 70px;width:310px}.g-plusone{float:left}.twitter{background:#ffffff;border-bottom:1px solid#ebebeb;padding:10px}.TZ{background:#ffffff;border-top:1px solid white;font-size:12px;color:#000;padding:9px 11px;line-height:1px;font-family:Verdana,Geneva,sans-serif}.TZ span{color:#000;font-size:11px;position:absolute;margin:-12px 100px;width:310px}#widgetbox.author-credit a{font-size:10px;font-size:10px;letter-spacing:1px;color:#1E598E;text-decoration:none}.</style><div id="socialwidget"><!--Begin Widget--><div class="googleplus"><span><font><font>Recommend Us On Google</font></font></span><!--GooglePlus--><!--Place this tag where you want the 1 button to render--><g:plusone size="medium"href="http://www.the-area51.com/"></g:plusone><!--Place this render call where appropriate--><!--Place this render call where appropriate--><script type="text/javascript">(function(){var po=document.createElement('script');po.type='text/javascript';po.async=true;po.src='https://apis.google.com/js/plusone.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po,s)})();</script></div><div class="TZ"><!--facebook--><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fthearea51blog&amp;send=false&amp;layout=button_count&amp;width=300&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21"scrolling="no"frameborder="0"style="border:none; overflow:hidden; width:300px; height:21px;"allowtransparency="true"></iframe></div><div class="twitter"><!--Twitter--><iframe allowtransparency="true"frameborder="0"scrolling="no"src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=jimmieluthra&amp;show_count=true&amp;show_screen_name=true&amp;size=m"class="twitter-follow-button"style="width: 244px; height: 20px; "title="Twitter Follow Button"></iframe><script src="http://platform.twitter.com/widgets.js"type="text/javascript"></script></div><!--End Widget--></div>

Step 4: Make the following changes to the code.

        - Your Facebook Page Username

        - Your Twitter Username


Step 5: Save the Widget

This will complete the process and the widget will appear on your blog. I Hope this post was helpful for more widgets see Blogger Widgets. Comments are welcomed.