Add Mashable Style Social Media Widget To Your Blog

You must have seen the Social Media widget that was used by Mashable for a certain period of time. This widget looks attractive and has nice effect to it, which makes it appealing to the eyes.This is great as you can get many visitors to your social media profile from them and is a great way to increase your contacts on other networks with the help of your blog. If you havent seen the widget before, then check the image below to get an idea.

It is very easy to add this widget to your blog, be it a Blogger(Blogspot) blog or a Wordpress or belonging to some other platform. However, as this blog is for blogger platform, we will explain how to add this Social Media widget to your Blogger blog.

To add it to your blog, visit the Design section of your blog and in the Page Elements section, click on Add a Gadget. In it, choose the HTML/Javascript option and paste the following code in it.

<style>
/* subscribe widget */
#subscribe1 { background:#f3f3f3; height:60px;width:288px; margin:0px 0px 15px 0px; padding:8px 5px; border:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; font-size:90%; }
.subscribe_icons { width:286px; margin:0px auto; }
.subscribe_icons li { display:inline; float:left; margin:0px 2px 5px 2px; width:52px; text-align:center; font-size:11px; }
.subscribe_icons a { display:block; padding:40px 0px 2px; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; color:#444 !important; }
.subscribe_icons a:hover { color:#26b !important; text-decoration:none; -moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); }
.subscribe_icons .subscribe_twitter a { background:url(http://i49.tinypic.com/2mq2es5.png) center top no-repeat; }
.subscribe_icons .subscribe_facebook a { background:url(http://i52.tinypic.com/2vnqjd3.png) center top no-repeat; }
.subscribe_icons .subscribe_rss a { background:url(http://i56.tinypic.com/9pyyz4.jpg) center top no-repeat; }
.subscribe_icons .subscribe_email a { background:url(http://i54.tinypic.com/15wm1s2.png) center top no-repeat; }


</style>



<!--begin of social widget-->
        <div id='subscribe1'>
   
        <ul class='subscribe_icons'>

            <li class='subscribe_twitter'><a href='http://twitter.com/rahuljrark' rel='nofollow' target='_blank'>Twitter</a></li>

            <li class='subscribe_facebook'><a href='http://www.facebook.com/rahuljadhav' rel='nofollow' target='_blank'>Facebook</a></li>
            <li class='subscribe_rss'><a href='http://feeds2.feedburner.com/cooltricksntips' rel='nofollow' target='_blank'>RSS</a></li>
            <li class='subscribe_email'><a href='http://feedburner.google.com/fb/a/mailverify?uri=cooltricksntips&amp;loc=en_us' rel='nofollow' target='_blank'>Email</a></li>
</ul>



         <!--end .subscribe_icons--></div>

You have to change the username highlighted in red colour with your username and also the feedburner id for your blog. Now click on Save and check your blog. You should note that if your blog already uses symbols for ul and li tags, then you may face some problem with the alignment of this widget. If you are facing any problem with the placement of the widget then do tell me about it.

Image by Matt Hamm (via Flickr)