Cara Memasang Widget Metro Style Social Icon Di Blogger - Kali ini saya akan share cara buat widget icon social media metro style di blog. Widget ini hanya CSS tanpa javascript apapun, widget ini juga dilengkapi dengan efek hover, sehingga terlihat keren & elegan. Berikut Penampakan Ikon Social Metro Style-nya..
 |
| SS Widget Metro Style Social Icon |
Saya menemukan widget ini waktu mengunjungi blog barunnya mbak +Dian Anarchyta. Widget ini berisi 7 ikon situs social media terkenal, yaitu Facebook, Twitter, Google+, Pinterest, Linkedin, Youtube & RSS Feeds. Untuk kalian yang berminat memasang widget ini ke blog kalian, anda bisa menggunakan tutorial ini.
Tutorial Memasang Widget Metro Style Social Icon Di Blogger :
1.) Masuk ke Dasbor Blogger, Lalu pilih Tata Letak.
2.) Klik tambahkan gadget di tempat widget ini akan di pasang, Lalu pilih HTML/Javascript.
3.) Masukkan Code di bawah ini :
<style type="text/css">
.metro-social {
max-width: 300px;
}
.metro-social li {
position: relative;
cursor: pointer;
padding: 0;
list-style: none;
}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd {
float: left;
margin: 1px;
position: relative;
display: block;
}
.metro-social .fb {
background: url(//goo.gl/6xmUk) no-repeat center center #1f69b3;
width: 140px;
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 .yt {
background: url(//goo.gl/zcwjB) no-repeat center center #e64a41;
width: 140px;
height: 69px;
}
.metro-social .fd {
background: url(//goo.gl/lhBP1) no-repeat center center #e9a01c;
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>
<div class='metro-social'>
<li><a class="fb" href="https://www.facebook.com/ID_FB" target="blank" rel="nofollow"></a></li>
<li><a class="tw" href="https://twitter.com/Username_twitter" target="blank" rel="nofollow"></a></li>
<li><a class="gp" href="https://plus.google.com/ID_Google+" target="blank" rel="nofollow"></a></li>
<li><a class="pi" href="https://pinterest.com/ID_pinterest" target="blank" rel="nofollow"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/ID_linkedin" target="blank" rel="nofollow"></a></li>
<li><a class="yt" href="https://www.youtube.com/Id_Youtube" target="blank" rel="nofollow"></a></li>
<li><a class="fd" href="https://feeds.feedburner.com/Id_Feedburner" target="blank" rel="nofollow"></a></li>
</div>
4.) Ganti Link Berwarna Merah Dengan link Social Media Kalian, Lalu Klik Simpan & Selesai :)
Sekian Tutorial Dari Saya, Semoga Bermanfaat Bagi Anda Semua :)
ADS HERE !!!