Membuat Widget Media Sosial Share Cantik

Alvian Casablancas 23 Agustus 2015

Setelah mempublikasikan artikel, menyebarkannya ke media sosial juga menjadi poin vital agar artikel sampai kepada khalayak yang membutuhkan. Anda dapat memanfaatkan jalan pintas tombol untuk menyebarkan artikel ke beragam media sosial seperti Facebook, Twitter, dan Google+ dengan hanya satu klik saja.

Anda dapat membuat tombol share ke media sosial seperti ini:

Widget Sosial Media Share

Untuk membuat widget bagikan ke media sosial, seperti biasa masuk ke HTML edit terlebih dahulu, kemudian lakukan langkah dibawah:

1. Tepat diatas kode </style>  tempel kode berikut (anda dapat memanfaatkan CTRL + F untuk memudahkan pencarian):
   .article-share-masalvi{width:100%;height:43px;margin-bottom:10px}
.article-share-fb-cont,.article-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
.article-share-tw-cont,.article-share-other-cont,.article-share-like-cont{float:left;width:114px;height:inherit;padding:0 7px;border-left:solid 1px #d8d8d8}
.article-share-fb-cont,.article-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
.article-share-fb,.article-share-tw,.article-share-gp,.article-share-li,.article-share-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjizJf16XH7AlG-6HSHn_01qWYIiQhqI9Kj6fRLhFlcCx-SczvkaOPxAVibTVVhCUNOuhtL2vZn_v4cVBTDPTrAwwkUn1w__2sT0ILYdQ4Wtvo7fgKqw8z-hPC-r-JYVFfxysyUpzXsUWI/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.article-share-fb-label{color:#2d609b}
.article-share-fb-label,.article-share-tw-label,.article-share-gp-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.article-share-tw{background-position:0 -43px}
.article-share-tw-label{color:#00c3f3}
.article-share-gp{background-position:0 -86px}
.article-share-gp-label{color:#f00}
2. Jika sudah ditempel, cari kode berikut dibawah <data:post.body>: <!--SOCIAL SHARE-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='article-share-masalvi'>
<div class='article-share-fb-cont'>
<a class='article-share-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a>
<a class='article-share-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='article-share-tw-cont'>
<a class='article-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'></a>
<a class='article-share-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='article-share-other-cont'>
<a class='article-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'></a>
<a class='article-share-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
</div>
<br/>
</b:if>
3. Klik Simpan dan lihat hasilnya.

*Catatan:  Jika terdapat kode <data:post.body> lebih dari satu, silakan mencobanya satu persatu di setiap kode yang bersangkutan. Biasanya terdapat sekitar tiga kode ganda. Jangan lupa bahwa anda juga dapat mengganti kalimat yang dihighlight sesuai yang diinginkan)

Tags #Tutorial

Alvian Casablancas — masalvipekok@gmail.com

Seorang anak rumahan yang senang berkecimpung dengan dunia virtual. Suka ngeblog, membaca, berdiskusi, mencoba hal baru, dan mantan silent reader. Juga seorang novice programmer yang masih terus belajar.