Blogger Metro Style Social Icons Widget

To add this widget's code go to Blog Title > Layout > Add Widget >HTML/JavaScript and paste the given code in the box opened.

just replace your link>>>


<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/FEEDID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnakI3nwMdJiAAn3wLDjtWUBmRcXs9-u3gPBCWXtN0OMqkPXkpUOmSrM6FOXrgrGeiefn5wRC9NCWD9Ayn8e8RSiIBPN3Fuvr2LRwPWDORTDBfm26iG98KGd540fAppmlOAd5ijpbGC-o/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/twite" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWP8NA_VFNQ7w203VByNv9KFNoCU8xh1KdmSm6wF9tdIZ5PZyxd-t7eukXNUHK4pGiVlmn9fiontuCXu2s5BOHQ0GE9vAQtpnnKUuQmiWSDNUwnx4wWZm1GVs90en1KA2hTrmQN5A78RQ/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/PAGEID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyfpHusSPgLruJWK8F2Cc_uYuhWhRAAx7jFG_81WDiXWZ6vZN9gTwRi0ut-vrC1pGdYC3hb6rYsuPPtonpgsV7akOU5m-TgkC5F3scqmNWnh4U3TrmnlGnsF0rkn4quqbYkAnZO6qkRhA/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/YOURID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN59xPRGi4P9_1yGxbFd8wZcn8OxbL0ywGC7oRsE7lAyaj1hjk_jxWi4CeYosAs-Vni86zfDZUkjF5kbd0j6gW7-qM5c06Sjgk0sOnjVCPeKadiMRJhk7mCsGvqdjoyAYdGcMVVQJUKos/s1600/google.png" width="147" /></a></li>
</ul>
</center>
<style>
#abt-social-icons li {
 float: left;
 width: 147px;
 height: 147px;
 margin: 0 6px 6px 0;
 padding: 0 0 0 0;
 border-bottom: none;
        list-style: none;
}
#abt-social-icons li a {
 line-height: 1px;
 display: block;
}
#abt-social-icons li a:hover img {
 -webkit-opacity: 0.8;
 -moz-opacity: 0.8;
 opacity: 0.8;
}
#abt-social-icons li a span {
 display: none !important;
}
</style>

Share

Tweet