Well this post idea belongs to Widget Generators. So I thank him for this wonderful widget. So now just check out below steps on how to install this on your blog.
How to Add Metro Style Widget for Blogger
- Go to Blogger “Dashboard”
- Click on the “Layout”
- Then hit “HTML/JavaScript Gadget”
- Then paste below code in it.
<style>
#WG-social {
width:305px;
float:left;
margin-top:10px;
}
#WG-social li {
position:relative;
cursor:pointer;
padding:0!important;
}
#WG-social .fb,.tw,.gp,.fd {
position:relative;
-moz-transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
z-index:5;
display:block;
float:left;
margin:1px;
}
#WG-social .fb {
width:150px;
height:152px;
background:url(//goo.gl/6xmUk) no-repeat center center #3b5998;
}
#WG-social .tw {
width:150px;
height:74px;
background:url(//goo.gl/oyiFK) no-repeat center center #3b5998;
}
#WG-social .gp {
width:150px;
height:74px;
background:url(//goo.gl/oT0kF) no-repeat center center #3b5998;
}
#WG-social .fd {
width:302px;
height:74px;
background:url(//goo.gl/ncoLY) no-repeat center center #3b5998;
}
#WG-social li:hover .fb {
-moz-transition:all .1s ease-in-out;
-webkit-transition:all .1s ease-in-out;
background:url(//goo.gl/MH8AP) no-repeat center center #3468b6;
}
#WG-social li:hover .tw {
background:url(//goo.gl/hHRHv) no-repeat center center #4099ff;
-moz-transition:all .1s ease-in-out;
-webkit-transition:all .1s ease-in-out;
}
#WG-social li:hover .gp {
background:url(//goo.gl/wva4B) no-repeat center center #e44524;
-moz-transition:all .1s ease-in-out;
-webkit-transition:all .1s ease-in-out;
}
#WG-social li:hover .fd {
background:url(//goo.gl/JFGqn) no-repeat center center #f60;
-moz-transition:all .1s ease-in-out;
-webkit-transition:all .1s ease-in-out;
}
</style><div class=”WG” id=”WG”>
<ul id=”WG-social”>
<li><a class=”fb” href=”https://www.facebook.com/Triposoft”></a></li>
<li><a class=”tw” href=”http://www.twitter.com/triposoft”></a></li>
<li><a class=”gp” href=”https://plus.google.com/102229186630832989606″></a></li>
<li><a class=”fd” href=”http://feeds.feedburner.com/triposoft”></a></li>
</ul>
</div>
- That’s it !
Some Tweak and Instruction
- Replace “Triposoft” with your Facebook Page Username.
- Replace “triposoft” with your Twitter Username.
- Replace “102229186630832989606” with your Google + Username.
- Replace “triposoft” with your Feed Burner Username.
Need Any Help ?
This is the easiest method for adding a Metro Style Widget on your blog. I simply hope I did justice with the post by creating it as simple as attainable. If you’re facing confusion in any half simply feel assured to depart your comment within the comment box below and I will be at your service 24/7. Share your thoughts in comments !