Metro UI Social Network Widget

Social Network menjadi salah satu kebutuhan penting bagi seorang Blogger, utamanya untuk dapat berinteraksi dengan para pengunjung mereka. Sekedar untuk menjalin pertemanan maupun untuk bertanya mengenai artikel yang dipublikasikan apabila dirasa penjelasan yang diberikan kurang bisa di mengerti.

Diantara puluhan bahkan ribuan Blogger telah menambahkan link menuju berbagai profil jejaring sosial mereka, beberapa widget yang ditambahkan adalah Facebook, Twitter, Google+, Pinterest dll dengan berbagai tampilan yang cukup menarik perhatian.

Pada kesempatan ini, Mas Adhie akan membagikan sebuah widget Metro UI Social Network yang berisi beberapa jejaring sosial diantaranya adalah :

• Facebook
• Twitter
• Google+
• Pinterest
• Linkedln
• Youtube
• RSS Feedburner

Source Code Metro UI Social Network :

<style type='text/css'>
.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(http://goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(http://goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(http://goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(http://goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(http://goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(http://goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(http://goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(http://goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(http://goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(http://goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(http://goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(http://goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(http://goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>
<div class='metro-social'>
<li class="fb"><a href="http://www.facebook.com/xxx" rel="nofollow"></a></li>
<li class="tw"><a href="http://twitter.com/xxx"  rel="nofollow"></a></li>
<li class="gp"><a href="https://plus.google.com/xxx"  rel="nofollow"></a></li>
<li class="pi"><a href="http://pinterest.com/xxx" rel="nofollow"></a></li>
<li class="in"><a href="https://www.linkedin.com/in/xxx" rel="nofollow"></a></li>
<li class="yt"><a href="http://www.youtube.com/xxx"  rel="nofollow"></a></li>
<li class="fd"><a href="http://feeds.feedburner.com/xxx" rel="nofollow"></a></li>
</div>

Penerapan pada Blogger

1. Login ke akun Blogger Anda
2. Masuk pada menu Tata Letak > Tambah Gadget > pilih HTML/Javascript
3. Edit link profile pada beberapa social network, copy paste source code diatas,kemudian paste dan simpan untuk menambahkan.