Widget Social Media Unik Metro

Untuk tips blog yang akan saya berikan kali ini masih melanjutkan artikel sebelumnya tentang widget social media unik untuk blog, yang mana masih saya khususkan buat para pengguna Metro Template Ala Windows 8.

Social media memanglah mempunyai peranan penting bagi kelangsungan blog itu sendiri, karena trafic pengunjung selain dari search engine kebanyakkan dari social media ini. 

Selain itu kita juga mendapatkan manfaat back link berkualitas dan relevan tentunya.

Langsung saja berikut widget - widget social media yang bisa anda coba untuk memperindah tampilan blog anda.

• Cara ADD TOMBOL Sharing Sosial Widget
• Pergi ke Blogger Dashboard → Tata Letak → Elemen Halaman. 
• Tambah Gadget HTML / JavaScript. 
• Paste di bawah kode di dalamnya.

<style>
.metro-social{width:300px}
.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:150px;height:141px}
.metro-social .tw{background:url(//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(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:150px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;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 .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>
<br />
<div class="metro-social">
<br />
<br />
<br />
<br />
<br />
<li><a class="fb" href="http://www.facebook.com/" rel="nofollow"></a></li>
<li><a class="tw" href="http://twitter.com/"></a></li>
<li><a class="gp" href="https://plus.google.com/"></a></li
<li><a class="pi" href="http://pinterest.com/" rel="nofollow"></a></li>
<li><a class="in" href="https://www.linkedin.com/" rel="nofollow"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/" rel="nofollow"></a></li>
<li><a class="yt" href="http://www.youtube.com/"></a></li>
</div>. 

Simpan Selesai

share : Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 21.20 and have 0 komentar