Thursday 17 April 2014

Metro Style Social Media Widget For Blogger

Metro Style Social Media Widget For Blogger
Social media widgets are recommended for bloggers to engage their visitors in their social media pages. If you have a facebook page, twitter profile, google+ page etc for your website/blog, then you can put their subscription links in a stylish way using social media widgets. In this post, I'll tell you how to add a metro style social media widget in your blog. Just follow the steps below:
1. Login to your blogger account and from the dashboard, go to LAYOUTS section.
2. Now, add a new HTML/Javascript widget and paste the following code in that:

<style>
.metro-social{width:315px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDbYb52xX_9mw-8Z3DEW_byFQR9QYgQAk8wlfDbvM8YtBe5te87W6nToHGXRi-FkI-vDPGXOnccxuOB8KXmdEsRObF40NQ28f_XC_sAd6zgg2-nlZniP2yL3IJyaWXWVM7qpKZNyEvsY/s1600/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDenWOt-og8Jb7YWgQlVakoKl5bjUy5QNzsLJ9oakUcLmABhzzLM3_BZLF0ch2Q5LAIeo7SCaYNa4KspaHco0Mcb5Cs38MyZJoWjUiACfZZwV9A5ui-yDhQzKooe-Wne_S9Oyq51GXBXc/s1600/twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9mCc_hh7fKQBhRhzAtyr_18HfPjp9nzsjwX3tpvRj3d1jf5YgM7a8Vu_FsPfx4aVT57-nVybYHwlzXcCmYQ57R4y89j-2OsGVxZLM9IZbRE-JEUjbWRY6yAZk8bW-tmV75i_kLVD0Qg4/s1600/google+plus.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3mEc2h0GlRbvQH-V3wyZwNcQ75KcWu3n3vMcK4MNf0ap13PvdXopNLgLlmhxKwDtTeDT0NamkpoC-weoAIcl3c1s5AWzhkvmnYf-d5Poe52yHsBbqU-gZg8RPWpcw-1Qye3dV85qxOWI/s1600/pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgocPQ1JbPNAl41o1dQHk3pwueflPUNwFStO_lkBzHGQzfD75jD2HUbXEgtwkB4XwR4I3QHSS6I_0SzbmYnMfxTgr6ICn5v_KSa1NOReHT3J6pb_obSkteoHiMVbmUmZcYBSYPX0iv0c_8/s1600/linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5ccmVjqTP-3qwQ6s32Qq4I9-WWGaYPZM29NVDKeeejf9oLjNzzOPR_bK1ERvUeS3753zc7Sue8l56xymBMag1n3_i2XDDZZJQMy8dD5DjxzFTl94tmEfEL5JeSkytCqdyvt-VkSPYco/s1600/youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG51EgLEayRTs6wVUrtZQbkcLXVLzUcD9U3jtj7Ssu-TTtmO966iX5htq-MQRDizh5YiHeLrf4BoOtvxI2Pc3dDidpz9lwz2khrnUfGJO8Xq0pt4uFE5fxx21LGnE0E_t1Ywo6qy7pgrE/s1600/feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAl-HF1EQPTE0PiXD98IRKZ8TvxPduAuonrhML3XuKy5_PpG4hPrNoHTb8fze2bB9E-6HyYKSVEo0ei9WSbU5iCPkMLjPaf-XFEkE6s6nVTIekdtFWiSfmJ5GYSFNjTJCGnpoOMm_kB1A/s1600/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UEMFjEOd2eZ6wNJoxRLrq-_MydNqIDrzZt8va3tvIpc3rNkauz4RqUQy7rZl-rkNQJNU_AtiMTnbAHXo78CXoMoXehZia1X6Wzz8Q7wU0LdZwRP5_TZQRHPP355-5QZ5sXdfKRFlqUU/s1600/twitter.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1bAI_D3dP8NQJUcMa-a2i7sgjT0qRNvYRNjSuvk-dsHyDwa6WkQNZmDZWaIjgUR7I6I8MK1ZUShE9eR_L3gVvmJWwD3f6GEjbbasKdn1ZKNmhScEvbpcA9j47sV12p-YmTTdHg9JsWTQ/s1600/google+plus.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqHAfu-RGyeaQIKR3LhB2EFulA2i4iPvesH4yItbPgqQR72aeX-7NzwVkHq49yo3zwC1rvvRgF0c8LmEKK7_Zf_vhLgQgwEgDVG4oieSv-qRdOF7VwCiosRsC8Bp-PZoWPIyeOQsQRW0I/s1600/pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_S-SRwcoftUroZJ5lnU8145E0v1Q8Fa2aAmRUPIOgpCU2oOytYhdz2R4ObitkLj-BRg5uvTUMdVpbH9TZ9bSWkY2M7JBtXNL8B9oGTb6RFPAqqedN0ZZvUtLQ3HpE2z2H4KIrtt4dBlM/s1600/linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4G6BTNs5lY2CiKGexj46Ttexi_zTa8xn9lO-k2mnihIwRFfHqvVwzpmUHghaFvnUw1-qjxkmQDBgfGvl2NNdxHPCXlslLKWg3CHldSpS_1_wTUcSWCuX2R2A-H-vQXb3xOOKYmgX7FOI/s1600/youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieWbc43yDi2pP5PqD5bNlTxX21-cynomuHnEHl2nchyD51atdbWdhxGZVEWyoakbJLE4B58bgKXkVqU1nHyJZyYVK6NKHoYzWRSRxyKx9TqHw9o9N17lIxDnnTV6wF_38jDht0GWkub0c/s1600/feed.png) no-repeat center center #e9a01c}
</style>
<div class="metro-social">
<br />
<li><a class="facebookbt" href="YOUR FACEBOOK PAGE LINK" target='_blank'></a></li>
<li><a class="twitterbt" href="YOUR TWITTER ACCOUNT LINK" target='_blank'></a></li>
<li><a rel='author' class="googleplusbt" href="YOUR GOOGLE PLUS LINK" target='_blank'></a></li>
<li><a class="pinterestbt" href="YOUR PINTEREST LINK" target='_blank'></a></li>
<li><a class="linkedinbt" href="YOUR LINKEDIN PROFILE LINK" target='_blank'></a></li>
<li><a class="youtubebt" href="YOUR YOUTUBE CHANNEL LINK" target='_blank'></a></li>
<li><a class="rssbt" href="YOUR FEED URL" target='_blank'></a></li>
</div>

3. Replace the red text with your own social media links and then save the widget and save the layout.
4. That's it. Open your blog and see the live preview of your metro style social media widget.
Keep visiting PC Tricks Guru for more tips and tricks.
Share:

3 comments:

  1. Hey Ashutosh,

    That's actually pretty cool and I'm wondering if the same type code could be used for WordPress. It looks like the coding wouldn't really be any different since it's being added to a widget. Of course I'm not a coder so you would know better than me but that's really cool.

    ~Adrienne

    ReplyDelete
    Replies
    1. This code is for blogger blogs only, but you can add it to your wordpress site also. Wordpress officially provides this widget as a plugin and you can get it from http://wordpress.org/plugins/metro-style-social-widget/
      Hoping to see this widget active in your blog very soon. :)

      Delete
    2. I prefer not to do plugins if necessary and the other social icons I had on my blog were coded and not a plugin. I actually did those myself but I'm sure I could find someone to do something similar. Thank you though, I appreciate that.

      Delete

Custom Search Box

Earn Money With Crypto

WazirX

Offers and Deals

Blog Archive

Contact Form

Name

Email *

Message *