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.
share button
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;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='twet' 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 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
http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
http://blogpedas.blogspot.com/2014/01/share-button-menarik-font-awesome.html

28 Responses to Memasang Button Sosial Media dengan Font Awesome

  1. sib sob nanti sya coba, kebetulan share buton punyaku berat... :)

    ReplyDelete
  2. bener mas, memang ini lebih ringan, bisa dijadikan alternatif ya mas..., keren :D

    ReplyDelete
    Replies
    1. iya mas buat alternative saja :)

      Delete
    2. This comment has been removed by a blog administrator.

      Delete
  3. kayaknya blog saya udah ribet masang yang ginian sob :(

    ReplyDelete
    Replies
    1. hehe, gmna baiknya saja mas yobert :D

      Delete
  4. mantap gan :D
    Keep posting :)
    Artikelnya Berguna gan

    Kumpulan Cerita Dewasa Terbaru

    ReplyDelete
  5. mantab tutornya gan, tapi saya sudah ada social button nih,,
    jadi nyimak aja deh

    ReplyDelete
  6. Replies
    1. Udah saya pasang di template yg baru, thanks sob...

      Delete
    2. ur are welcome :D bagus jadinya yah

      Delete
  7. Mantap Nih Shaerbuttonnya :D
    apalagi pake Font awesome > Pastinya Bakal AWESOME :D

    ReplyDelete
    Replies
    1. iya bener mas ridwan :D awesome banget =D

      Delete
  8. Saya coba dulu
    halimtc.blogspot.com

    ReplyDelete
  9. Bisa dicoba dulu, barangkali cocok dan pindah ke button ini :)

    ReplyDelete
    Replies
    1. di edit aja mas, biar pas sama template :D

      Delete
    2. Tapi kayaknya tetap bertahan saja saya :mn

      Delete
    3. iya deh, eh itu unyu2 emoticonya :D

      Delete
  10. Ini bikin ringan loading ya, Bang? Kalo iya, aku mau coba ah

    ReplyDelete
    Replies
    1. iya sist :D silahkan kalau mau coba :D

      Delete
  11. fb sama twitter nya enggak mau kang

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔