BLOGGINGPASURUAN - Kali ini saya akan membagikan tips bagaimana Cara Membuat Widget Sosial Media Metro UI dengan efek hover di blog blogger Anda. Umumnya widget ini terpasang pada posisi sidebar plaform wordpress, namun kali ini saya ingin mengaplikasikannya/mengkonversi pada platform Blogger. Widget ini memiliki tampilan yang sangat sederhana pada perubahan ikon yang dibuat lebih transparan.
Harapannya Widget ini dapat
membantu Anda mendapatkan audiens blog dari media sosial .
Cara Menambahkan Widget Sosial Media Gaya Metro UI
1.Silahkan
masuk ke akun Blogger Anda
2. Dasboard >> Tata letak >> Add
gadget >> HTML javascript
3.
Pada kotak HTML javascript, masukkan kode berikut ini di dalamnya
HTML - BLOGGINGPASURUAN
<center>
<ul id="bloggingpasuruan-social-icons">
<li class="rss-icon"><a
href="http://feeds.feedburner.com/IDFeedburner-Anda"
target="_blank"><img height="147"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM9DvVg4eTFgMjqfjBv1LnCwQ9AlOKVrOA95T5Heuw2ed3f1zBbvKxbi0utTIuDTyvwhtux78cqfZ0oTsl-7aMZWArxSMZZfgA9abkhLpYI14nz9y4tVv96G_zjhYT3FhsxHEU7dG1ysY/s1600/rss.png"
width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/IDTWITTERHANDLE-Anda"
target="_blank"><img height="147"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjvegnBLJ4wGjt1lzqLjp60e4a1saSM7QpiEdJ9hR7Kcd_cnSnGn9pUF3bxsO2oUa9jdcseb7T8UPI7yLcMO5IXOze1cQD9lqgL1nYmLCCYrJPNDhXGDA5FjE0b0J-QwWTkAE9K-6AJPE/s1600/twitter.png"
width="147" /></a></li>
<li class="facebook-icon"><a
href="http://www.facebook.com/IDFacebook-Anda"
target="_blank"><img height="147"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUhCQVVM4DRyfTOaI_g6DYwxbQk5deuhkZU3LnYcCW4GbSdL1gwLhGkmOZ9noB5RUjaWKSr_aF6aHQ-IqtnGFWJWu_bAwb1XRUyMpZj6f531pmObWyGGNWwKimpR1rl8H6NUkTbJgE0C8/s1600/facebook.png"
width="147" /></a></li>
<li class="google-icon"><a
href="https://plus.google.com/IDGoogle+-Anda"
target="_blank"><img height="147"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGghHeqPglIIalrkpW_YQ3vaAgZ2PEqHja56vFF_ayM_NnLPhyJdWNzuMitcP8zmBOqUkVcZrmqW7RZkHRO6JNIS-5G9JZmk1-I_2R_lFRSKGaK9OkD7BRGAzLL1BD86ipCjd2G9kcxg/s1600/google.png"
width="147" /></a></li>
</ul>
</center>
<style>
# bloggingpasuruan -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;
}
# bloggingpasuruan -social-icons li a {
line-height: 1px;
display: block;
}
# bloggingpasuruan -social-icons li a:hover img {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
# bloggingpasuruan -social-icons li a span {
display: none !important;
}
</style>
Setelah menambahkan kode kemudian
ubah link warna
merah dengan ID Anda sendiri. Sekarang Save widget dan lihat hasilnya .
Sekarang pengunjung Blog Anda
dapat berinteraksi dengan widget sosial media elegan gaya Metro UI. Jika Anda tertarik dengan artikel di atas mohon bantuan share pada
sosial media yang Anda miliki, sebelumnya Admin mengucapkan banyak terima kasih dan semoga bermanfaat….
Jika ada masalah saat pemasangan widget diatas, silahkan tinggalkan komentar pada kotak komentar yang disediakan
cara biar icon nya horizontal gitu gimana ya gan? saya coba kok hasilnya vertikal kebawah? Mohon bantuannya gan
ReplyDelete