Cara Simple Membuat Social Share Button Dengan Font Awesome

Social Share button dengan font awesome

Pada artikel sebelumnya pernah saya bagikan artikel yang sama tentang Cara membuat social share button lengkap dengan Whatsapp, Line dan BBM, namun kali ini Social Share yang saya bagikan sangat simple dan mudah untuk diterapkan diblog.

Terdapat 3 tombol share umum yang saya letakan pada social share kali ini, yaitu Facebook, Twiter dan Google+.

Untuk penerapannya, ikuti langkah-langkah berikut:


Langkah 1

Letakan kode CSS berikut diatas </style>

/* Simple Socshare With Font Awesone */
.shareku span {font-size:16px}
.shareku a, .shareku 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}

Langkah 2

Cari kode <div class='post-footer-line-1'> dan letakan kode berikut tepat dibawahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shareku'>
<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>

Langkah 3

Karena Social share ini menggunakan Font Awesome, pastikan anda sudah menambahkan kode berikut ke dalam template tepat di atas </head>

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

Lewati langkah ke 3 jika sudah terdapat kode tersebut di dalam template anda.

Selesai, simpan template dan lihat hasilnya.

Demikian Cara membuat Cara Simple Membuat Social Share button dengan Font Awesome. Selamat beraktifitas.
Advertisement
Advertisement

Artikel Terkait

CEO sekaligus Content Specialist di trikricky.com. Jangan lupa bahagia.