Follow buttons is main source of getting followers on social networks. Since blogger doesn't provide follow buttons so you have to add it in your blog from other blogs and websites. There are many content amplification sites that provides follow and share buttons, but these buttons are not stylish and responsive and sometimes they are responsive(addthis buttons). Addthis provides responsive follow buttons but these are very small in size and also takes time to load. Previously I have created some posts in which I have shared stylish responsive follow buttons and follow buttons for header and in this post I am going to share some new kind of widget which is metro style follow buttons.
These buttons are stylish and responsive, may be you have seen metro style buttons in some blogs. These buttons are designed like windows 8, you can take a look below:
This is the commonly used metro style follow buttons widget, In this I will share metro style follow buttons in 3 different styles. Choose a style and follow below steps to add that style in your blog:
Step 1: Go to blogger dashboard.
Step 2: Select layout in menu on left side.
Step 3: Click on add a gadget and scroll down to Html/javascript.
Step 4: Click on Html/javascript, copy the code of desired follow buttons from below and paste it into Html/javascript window:
Tip: To copy a code first select it by left click and then use Ctrl+C on your keyboard to copy it!
Style 1:
<div class='metro-style'>
<li><a class="facebook" href="https://www.facebook.com/101Helper" rel="nofollow" target="_blank"></a></span></li>
<li><a class="twitter" href="http://twitter.com/accountname" rel="nofollow" target="_blank"></a></li>
<li><a class="Googleplus" href="https://plus.google.com/googleplus" rel="nofollow" target="_blank"></a></li>
<li><a class="pinterest" href="http://pinterestnterest.com/yourID" rel="nofollow" target="_blank"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/yourID" rel="nofollow" target="_blank"></a></li>
<li><a class="yt" href="http://www.youtube.com/channel" rel="nofollow" target="_blank"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/101helper" rel="nofollow" target="_blank"></a></li>
</div>
<style>
.metro-style{width:285px}
.metro-style li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-style .facebook,.twitter,.Googleplus,.pinterest,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-style .facebook{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-style .twitter{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-style .Googleplus{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-style .pinterest{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-style .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-style .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-style .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-style li:hover .facebook{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-style li:hover .twitter{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-style li:hover .Googleplus{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-style li:hover .pinterest{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-style li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-style li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-style li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>
<div class="metro-social">
<br />
<br />
<li><a class="fb" href="https://www.facebook.com/101Helper" rel="nofollow" target="_blank"></a></span></li>
<li><a class="tw" href="https://twitter.com/101Helperblog" rel="nofollow" target="_blank"></a></span></li>
<li><a class="gp" href="https://plus.google.com/+101helperBlogspot" rel=" nofollow=" target="_blank"></a></span></li>
<li><a class="fd" href="http://feeds.feedburner.com/101Helper" rel="nofollow" target="_blank"></a></span></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.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:135px;height:141px; position: relative; top: -3px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:135px;height:141px;position: absolute;
left: 143px;top: -3px;}
.metro-social .gp{position:absolute;left:284px;top: -3px;width:135px;height:141px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:135px;height:141px;position: absolute;
left: 426px;top: -3px;}
.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/CjzDP) no-repeat center center #e9a01c}
</style>
Replace links with your social pages links.
Style 3:
<style type="text/css">
#metro-style{ width:500px;}
ul.metro-style{
margin:0;
padding:3px;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
position:absolute;
}
ul.metro-style li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: 10px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.metro-style li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.metro-style li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.metro-style li a img{
border-width: 0;
}
ul.metro-style li:hover a{
-webkit-transform:scale(1.10); /* Safari and Chrome */
-moz-transform:scale(1.10); /* Firefox */
-ms-transform:scale(1.10); /* IE 9 */
-o-transform:scale(1.10); /* Opera */
transform:scale(1.10);
}
ul.metro-style li:hover a span{
background-color:black;
-moz-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
width:50px;
height:10px;
}
#title{
font-size:20px;
font-weight:bold;
font-family:Trebuchet ms;
color:#fff;
background-color:#444;
width:288px;
text-align:center;
}
</style>
<div id="title">Follow us on:<div>
<div id="metro-style">
<ul class="metro-style">
<li><a href="http://www.facebook.com/101helper"><img src="http://s2.postimg.org/c9z5wq7xh/image.png" title="" /></a></li>
<li><a href="https://plus.google.com/101helperblogspot"><img src="http://s27.postimg.org/lj8oy6wgv/image.png" title="" /></a></li>
<li><a href="http://www.twitter/101helperblog"><img src="http://s30.postimg.org/v33bx5ggd/image.png" title="" /></a></li>
<li><a href="http://feeds2.feedburner.com/101helper"><img src="http://s29.postimg.org/g1imfb8w3/rss.png" title="" /></a></li>
</ul>
</div>
Replace links with your social network links.
If you wish to remove "Follow us on" from above(style 3) social icons gadget then simply remove highlighted piece of code.
Step 5: Click on save and you are done!
Do you like this post and this widget is working properly in your blog? send me your feedback in comments. If you have any problem feel free to ask me. Follow and subscribe to get latest updates in your inbox. Share this post with others.
Search tags: 3 Metro style follow buttons for blogger, metro style blogger follow icons, follow icons for blogger, Responsive follow icons for blogger, 101Helper blogger widgets.
