Membuat Tombol Share Dengan Hover

Kali ini saya akan share kepada sobat Blogger tentang cara memasang "Tombol Share Dibawah Postingan dengan Hover", tutorial ringan ini saya bagikan karena saya ingin update blog saya maka dari itu saya share tutorial ini. Oh ya, sebelumnya saya juga sempat memberikan Tutorial yang serupa.

Memasang tombol share yang ringan dibawah postingan

Cuma, tombol share yang sebelumnya belum disertakan dengan effect Hover, jadi saya coba lagi membuat yang baru dengan effect hover supaya lebih kelihatan lebih menarik.

Ok, langsung saja.
- Pertama, sobat masuk kedalam Edit HTML
- Setelah itu cari kode ]]></b:skin atau </style>
- Lalu masukan kode berikut diatasnya.

.brayenl {background:#eaeaea;width:97.1%;border:1px solid #ccc;text-align:left;color:transparent;text-decoration:none;padding:7px 7px 7px 7px;font-size:13px;margin-top:4px;position:relative}
.brayen {color:#222;font-size:12px;font-weight:700;}
.share1 a {text-decoration:none;color:#fff;margin-left:3px}
.fb {background:#3b5998;padding:3px;border-radius:3px;border:1px solid #3b5998;transition:all 800ms ease-in-out}
.fb:hover {background:#809FFE;padding:3px;}
.gp {background:#b0103d;padding:3px;border-radius:3px;border:1px solid #b0130d;transition:all 800ms ease-in-out}
.gp:hover {background:#FF0000;padding:3px;}
.tw {background:#4099FF;padding:3px;border-radius:3px;border:1px solid #4099ff;transition:all 800ms ease-in-out}
.tw:hover {background:#9FCCFE;padding:3px;border:1px solid #4099ff;}

Note :
Ganti ukuran panjang yang berwarna merah dengan ukuran panjang yang sobat inginkan.

- Setelah memasukan kode diatas, sobat cari kode <div id='related-posts'> lalu masukan kode berikut diatasnya.

<div class='brayenl'>
<div class='share1'>
<span class='brayen'>Share This Article :</span>
<a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank'>Facebook</a>
<a class='gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'>Google+</a>
<a class='tw' expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'>Twitter</a>
</div>
</div>

selesai, demikia artikel saya, semoga bermafaat.