Wavker - Setelah kita kemaren membagikan widget social media, sekarang ada loh ikon share juga tapi beda nya memiliki ikon efek hover, nah cara memasang nya pun juga mudah pastinya untuk kita para blogger.

Widget ini cukup sederhana, dan pastinya lebih mudah
Widget ini juga gak kalah dari blog blog yang lain, widget ini cukup unik untuk semua berbagai macam jenis template.


Yok langsung saja kita memulai tutorial memasang nya :

Pertama kita pastinya masuk ke Dashboard Bloger > Template > Edit HTML - Nah sekarang kita akan  mencari kode </style>, Caranaya agan cuma menekan CTRL+F lalu cari kode </Style> setelah itu mari kita pasang kan kode CSS berikut diatas kode </style>  :

.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:&quot; &quot;;display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff!important;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}

Udah dipasangkah ? Kalo sudah sekarang kita memasang kode ke dua yaitu dengan memasukan kode kedalam widget layout, Caranya pun mudah pertama kita masuk ke dashboard bloger lalu pilih Layout > Add Gadget > HTML/ Javascript setelah itu kita masukan kode di bawah ini ke dalam box nya lalu pilih save, Berikut kode nya :

<div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
</a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-pinterest"></i></span>
</a></div>
<div class="app_social google">
<a href="https://www.google.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-google-plus"></i></span>
</a></div>
</div>

Setelah kita save silahkan view blog agan.
Keterangan : USER_NAME kita ubah menjadi user name agan, contoh mari kita lihat gambar,
Setelah itu kita save lalu lihat hasilnya, jika agan nya masih binggung silahkan tanya di komentar - Terima Kasih