Thursday, August 17, 2017
728x90 V3

How To Add Metro Style Social Widget For Blogger

Everybody loves social media buttons, buy when those buttons are styled they are even more better and more people will visit your social profiles or pages. With more traffic on social medias you will get more traffic on your own site, today i’m going to show you guys how to add Metro style social widget for Bloggers.THe tutorial is simple, step by step, you will be amazed by the results!

Add a gadget

First you need to log in into your Blogger dashboard, after that go to Layout then click on the “Add a gadget” link like in the picture below.

Screenshot_1

HTML/JavaScript Gadget

When you click on the  “Add a gadget” link a new window will come out, from the menu choose “HTML/JavaScript” gadget, click on + button like in the picture below.

Screenshot_2

Add a code

When you clicked on that “+” yoo will see a new window,and widget windows with Content and a Title box,  like in the picture below.

Screenshot_3

Inside the Content box put the code from below, like in the picture above.

<div class=”metro-social”>
<li><a class=”fb” href=”Your Facebook URL here“></a></li>
<li><a class=”tw” href=”Your Twitter URL here“></a></li>
<li><a class=”gp” href=“Your GooGle + URL here“></a></li>
<li><a class=”fd” href=”Your FeedBurner URL here“></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code:
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
<br />
When you finished just click the “Save” button.
Customization
1. Change the blue text with Social Media URLS.

2. Place a gadget where you want, just drag and drop it, in the Layout page.

Screenshot_4

 

I hope that this tutorial helped you, stay tutioned!

About Dimitrije Zivadinovic (Di)

Dimitrije Zivadinovic (Di)
Hey there, I'm Dimitrije Zivadinovic and this is my blog! I am a blogger, and.. No i am just a blogger, i know something about blogging platforms and i wanted to share my knowledge with you. If you have anything to ask me, feel free to hit me up via social media or leave a comment down bellow!

Check Also

Add a CSS Animated Share Button on Blogger

Social Medias are very important for SEO so it’s better for you to have a ...

Leave a Reply

Your email address will not be published. Required fields are marked *