Widget Sosial Icons Metro Style Kotak Di Blog | Hai, Pada artikel yang akan saya bagikan ini, Akan saya share sebuah Widget sosial icons, widget ini memiliki bentuk unik, Tidak seperti Sosial Media lainnya memeliki bentuk mendatar, widget ini memiliki bentuk Kotak.
Widget ini sangat cocok sama Template yang memiliki Warna cerah, dan warna yang Cerah sangat cocok, Widget ini sangat Elegan dan Mudah untuk dipratekkan, Kalau sobat tertarik dengan widget ini dan ingin mengunakannya Tutorilanya seperti ini :
Widget Sosial Icons Metro Style Kotak Di Blog
- Pertama, Sobat harus masuk ke Blogger
- Setelah Berada disana, Klik menu ''Tata Letak''
- Klik ''Tambah Gadget''
- Pilih Gadget ''HTML/JavaScript''
- Mauskan kode dibawah ini, didalamnya
<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/FEED ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZVDIPQ5BZovjPw_G_9RYReR1R7LSDZoOAJLT9AuPVdDywmwILwcc3rHWqR2X9Wntbu0dfBdmjNHOC6mlR0CqRoG2kmel_OWtga5SBzvlxctZr1OxBLGWS9Qs4sWcXc3SgAkeg7Nndl8/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/TWITTER ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkaKUjQ9m39ePK5lUA7IwyTwvptJCBKWD4AckHBpBtpL41c3RjGlGaq6NKl0vrGQPKc8CJPv2dlTrG-i4w7ogxPk2yubjFQ3I-afWAh6IK7HhvYXFSrXxc7fP0SAES_mZ_DGp-AohWnaY/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/PAGE ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq009tDefYDH-gfpei5PAu3R_uyJ-egMP0UVJ6P2suuz3N_YPCDqGd2EKNIctXzDWiKaoWgC-PaKmEItuxQl-FCqi1piUfg0mXTNqUlE-0GjuVF5x30M0MZZizxZJwJnu3xZjPS0CdhL8/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/YOUR ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZeAMJKisVqQq14wI_NxBAutUCATaOM_inKrn9UNRYPxodfNiJoNeA09y9hUn1Kx7gicP96BKGI1Rc1C0jworyOcgfw1Z7YC3heTuKtid-07M5Cd-EBrwIEnYbtdiZ3pnOBkLGLW1Styo/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>
- Ganti FEED ID Dengan url feedburner anda
- Ganti TWITTER ID Dengan url username twitter anda
- Ganti PAGE ID Dengan url username Facebook anda
- Ganti YOUR ID Dengan url profile google+ anda
Demikianalah artikel ini semoga artikel ini bermanfaat dan mudah dipratekkan sama sobat semua, silakan beri pendapat tentang artikel di kolom komentar dibawah ini, Terima Kasih...
