You can see that I am having a Social Media Widget on the top of the sidebar which is showing the links to the Facebook, Twitter, Feed and Email Subscription. Mashable.com used this kind of social media widget first time and that is why, it got popularity. And if you also want to add it in your Blogger/Blogspot blog then here I am sharing the method for that.


Mashable Social Media Widget

How To Add Mashable Type Social Media Widget In Your Blog

To add the Social Media Widget shown in the image above to your Blogger blog, Click on the Design button on your Blogger dashboard. Then in the Page Elements section, click on Add a Gadget. After that select the HTML/Javascript option and paste the code given below 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://i49.tinypic.com/52b7yv.png) center top no-repeat; }
.subscribe_icons .subscribe_rss a { background:url(http://i47.tinypic.com/maapvk.png) center top no-repeat; }
.subscribe_icons .subscribe_email a { background:url(http://i46.tinypic.com/2e4vgwy.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/<b style="color: red;">shaanhaider</b>' rel='nofollow' target='_blank'>Twitter</a></li>

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



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

You will have to change the username of Twitter, Facebook and Feedburner id highlighted in red colour with yours. After making this change, click on the Save button and check your blog after that. The nice looking Social Media Widget will be there on your blog.

If you liked this post or blog then please LIKE the Facebook page or the post below, spread the word about the post by sharing it or subscribe Email updates to get latest posts in your inbox....Thanks

 
Top