Memasang Button Sosial Media dengan Font Awesome

Memasang Button Sosial Media dengan Font Awesome

Memasang Button Sosial Media dengan Font Awesome - Pada kesempatan kali ini saya akan membagikan share button sosial media dengan font awesome,setelah sebelumnya saya sudah memposting tentang Memasang Button Share Sosial Media di Blogger .

Dengan bantuan font awesome ini tampilan akan lebih menarik dan pastinya ringan di blog kita apalagi bagi anda yang mengutamakan kecepatan penayangan pada blog anda. Anda bisa lihat penampakan share buttonnya dibawah ini atau bisa lihat pada bawah postingan ini.

Untuk pemasangannya simak tutorial dibawah ini:
1. Letakkan kode CSS dibawah ini diatas kode </b:skin> atau </style>

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

2. Letakkan kode HTML berikut di area post footer,cari kode <data:post.body/> letakkan pada baris kedua

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='button-share'>
<span>Bagikan Artikel:</span>
<a class='fbx' expr:href='&quot;//www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-facebook icon-large'/> Facebook</a> 
<a class='twet' expr:href='&quot;//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 anda yang ingin menggunakan fungsi POP UP pada share button ini, ganti kode target='_blank' dengan kode berikut

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

Untuk Biar Font Awesome terlihat silahkan masukan kode berikut di atas kode </head>

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

Jika Blog anda sudah terpasang font awesome pada langkah ini abaikan saja 

Simpan Template

Anda bisa mengatur dan menambahkan sosial media lainnya Semoga bermanfaat

//blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
//blogpedas.blogspot.com/2014/01/share-button-menarik-font-awesome.html