Widget Metro Style Social Media Icons

Widget Metro Style Social Media Icons

Posted by Robi Armansyah

Widget Metro Style Social Media Icons
Widget Metro style memiliki tampilan elegan kali ini saya akan bahas cara menambahkan widget Metro Style Ikon Sosial Media ke blog. Saya sering melihat widget ini pada blog WordPress.
Live Demo seperti dibawah kira-kira.

Tutorial Membuat Widget Metro Style Social Media Icons
Buka dasboard blog ▬►Tatak Letak ▬►Add Gadget HTML

Tambahkan kode berikut pada add Gadget HTML tsb.

HTML Widget Metro Style Social Media Icons
<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/AVvXsEjMQltjRJH-Gjnti6cwFOcEzKxe6wj7LvBNRlkC9X2iAj_eaXQPVCUOV_bpQV4SWbCIbPOMCFu3I-WGY5IPAXJyj2fEywPc-C-CFa-E3y1D-gQtcVlwoaiKADOljL-xv-Fh9kFXz3gcKMA/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/TWITTERID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZVCbR2f5fwieI5li3cJKtlBXGnoM3ge40ltHkrMw-KJqeHnWs2S5wxiToAid9xLWQj_a-ufkr5e2CAfaEO9mveyyaTH-RYs4nCWiV6MOKZF_v6lEYZ6bJ6xp6MbCSQPjzCnBoiawPUy4/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/FACEBOOKID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJu6CMTj1_8szwKriN_vJ7ld7_vLoUthUI5DOblRvmq0t2BQbeFYdMwxbba_kqE9z7infZJVNixfTiJajEyRFky-J1J3ufNs4j0E94zIQyty638KKKCGPf5JP2XyjFqlSS3sGw0QT6DLs/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/GOOGLEID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqevbSrxkUOLxncqqHNvj6F6zpRCHoYG9lMsPQXHqb1Axs-E3V3YN19U3cVQjxYBusBiCxbUoHykkPn7nNMTynnYdNesTHUU8dVfy7x33PE9Z73dWAj_HqD1-IztJTh87TL4pBmAm4k68/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>
Jangan lupa mengganti
FEEDID ▬► di ganti dengan URL Feed
TWITTERID ▬►di ganti dengan User twitter
FACEBOOKID ▬►di ganti dengan User facebook
GOOGLEID ▬►di ganti dengan User Google

Ditulis Oleh : Robby Armansyah

DMCA.com Protection StatusAnda baru saja membaca artikel dengan judul Widget Metro Style Social Media Icons. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.
✚
Subscribe to:Post Comments (Atom)