Pada postingan sebelumnya mengenai widget blog ala Bang Jarwo saya membuat blockquote dengan flat design, sekarang saya akan membuat widget share artikel super ringan.
Dan pastinya ala Bang Jarwo.
Berikut beberapa keunggulan widget ini dibanding lainnya:
- Super ringan. Mengapa?
- Tanpa Font Eksternal dari FontAwesome
- Pure CSS, tanpa Javascript
- CSS dan HTML telah dikompres
- SEO Friendly / Tidak mengganggu SEO
- Menggunakan Tag Heading (H5)
- Mobile Friendly / Responsif
- Eye Friendly / Tidak mencolok mata
- Pemasangan yang mudah
- Memberikan efek warna ketika di hover (diarahkan ke kursor)
Widget share memiliki peranan yang cukup penting pada suatu artikel di blog, karena dapat menambah PageView pada blog bila ada seseorang yang menshare artikel miliki anda di akun jejaring sosialnya.
Langsung saja, berikut cara pemasangannya.
1. Pemasangan CSS
Pertama, cari kode </head> didalam template blog anda, lalu masukkan kode dibawah ini tepat diatas kode </head> tadi. Double klik kode dibawah ini untuk select all.
<style>
#button-share-jarwo {background:#f1f1f1;color:#000;line-height:45px;margin:50px auto 25px;padding:10px;max-width:100%}
#button-share-jarwo h5 {text-align:center}
#button-share-jarwo a {position:relative;font-size:10px;margin:2px;color:#fff;text-transform:uppercase;padding:7px;font-weight:700}
#button-share-jarwo a span {line-height:20px;width:40px;padding:6px 0;top:0}
.facebook-jarwo {background:#1e90ff}
.facebook-jarwo:hover {background:#1338f2}
.twitter-jarwo {background:#00bfff}
.twitter-jarwo:hover {background:#00aaba}
.googleplus-jarwo {background:#f83124}
.googleplus-jarwo:hover {background:#c40000}
</style>
Lalu, simpan template anda.
Sedikit catatan bagi yang ingin mengedit warnanya sesuai dengan keinginan hati. Bila tidak biarkan saja kode seperti diatas.
Ganti kode yang berwarna berikut
- Biru muda dengan kode warna tombol share facebook anda.
- Biru tua dengan kode warna tombol share facebook efek hover anda.
- Merah dengan kode warna tombol share twitter anda.
- Orange dengan kode warna tombol share twitter efek hover anda.
- Pink dengan kode warna tombol share Google+ anda.
- Ungu dengan kode warna tombol share Google+ efek hover anda.
2. Pemasangan widgetnya
Silahkan anda cari kode </article> didalam blog anda. Lalu, masukkan kode dibawah ini tepat diatas kode </article> tadi.
<div id='button-share-jarwo'><center>
<h5>Share via</h5>
<a class='facebook-jarwo' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a>
<a class='twitter-jarwo' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
<a class='googleplus-jarwo' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a></center>
</div>
Silahkan ganti tulisan yang berwarna merah dengan kata-kata yang anda inginkan.
Bagaimana? Apakah widget telah terpasang sempurna di blog anda? Semoga widget diatas bermanfaat dan dapat menambah share di artikel blog anda. Dan jangan lupa nantikan widget lainnya dari Bang Jarwo dengan mensubscribe blog ini!