Memasang Button Sosial Media Dengan Font Awesome

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

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

Untuk pemasangannya simak tutorial dibawah ini:
1. Letakkan isyarat CSS dibawah ini diatas isyarat </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 isyarat HTML berikut di area post footer,cari isyarat <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 memakai fungsi POP UP pada share button ini, ganti isyarat target='_blank' dengan isyarat 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 isyarat berikut di atas isyarat </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 dapat 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

Bagikan Artikel ini