Thursday, 5 November 2015

Cara Membuat Widget Social Media Gaya Metro UI di Blog

Posted by on Thursday, 5 November 2015
Cara Membuat Widget Social Media Gaya Metro UI di Blog

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 Membuat Widget Social Media Responsive di Blog


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="http://1.bp.blogspot.com/-0M62-Stfcdc/Ud1ZFcVvCRI/AAAAAAAABuY/9_o8SRGny8U/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="http://2.bp.blogspot.com/-7qVkCzvGlC4/Ud1ZF3wqNlI/AAAAAAAABuc/6V0lQLdtvnk/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="http://1.bp.blogspot.com/-ReX8Fx2MrOk/Ud1ZFBIvvSI/AAAAAAAABuI/hX1cGTGVWZ0/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="http://3.bp.blogspot.com/-9gpsltkgVP0/Ud1ZFcm_cyI/AAAAAAAABuM/0u5oe5uRmuQ/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
close