Membuat Share Button Menarik Dengan Font Awesome

Sesuai dengan judul pada artikel ini, saya akan membagikan sebuah tombol share/berbagi yang bisa kamu pasang pada blog kamu. Yang membuat share button ini berbeda dengan yang lainnya adalah adanya penggunaan font awesome. Dimana selain membikin tampilan tombol share tersebut menjadi menarik, tombol share ini juga sangat ringan jika di pasang pada blog kita. Dan sangat cocok buat kamu yang mengutamakan kecepatan penayangan blog kamu. Jika tertarik silahkan simak langkahnya di bawah ini :

Untuk menggunakan font awesome, kita harus meletakkan CSS berikut diatas </head>.

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

1. Jika script diatas telah kamu pasang, maka lewatkan langkah diatas dan lanjut pada langkah berikutnya.
2. Buat kamu yang mengutamakan validasi CSS3, maka script diatas kamu download terlebih dahulu dan di perbaiki kembali agar bisa valid CSS3. Kemudian upload kembali script tersebut menggunakan google drive.

Copy CSS dibawah ini, kemudian paste diatas </style> atau </b:skin>.

.share span {font-size:16px}
.share a, .share a:hover {color:#fff}
.fb, .twit, .gplus {text-align:center; padding:5px 12px; font-size:12px; border-radius:3px}
.fb { background-color:#1358BA}
.twit { background-color:#03C7E9}
.gplus { background-color:#FE1635}
.fb:hover, .twit:hover, .gplus:hover {background-color:#547279; transition:background-color 0.7s ease-out 0s}

Letakkan HTML berikut pada area post footer. Caranya, cari <div class='post-footer-line-1'> kemudian pastekan kode HTML berikut bawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share'>
<span>Bagikan Artikel:</span>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-facebook icon-large'/> Facebook</a> 
<a class='twit' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-twitter icon-large'/> Twitter</a> 
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-google-plus icon-large'/> Google+</a>
</div>
</b:if>

Buat sobat yang ingin menggunakan fungsi pop up pada share button tersebut. Maka ganti target='_blank' tersebut dengan kode dibawah ini :

onclick='javascript:window.open(this.href,"bloggerPopup","toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=300"); return false;'

Untuk demonya bisa di lihat pada blog ini menggunakan versi desktop (untuk pop up) dan versi mobile (untuk new tab).

Kamu bisa merubah kembali atau menambahkan tombol share media sosial lainnya.

Sumber bacaan : http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html