Cara Membuat Widget Media Sosial Share Cantik di Blog

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:

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('http://3.bp.blogspot.com/-3ypydr9U3DI/U9DHOBQy-vI/AAAAAAAAAbs/hvhfDPIpevI/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}

Jika sudah ditempel, cari kode berikut dibawah <data:post.body>:

<b:if cond='data:blog.pageType == "item"'>
<div class='article-share-masalvi'>
<div class='article-share-fb-cont'>
<a class='article-share-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'></a>
<a class='article-share-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'></a>
<a class='article-share-gp-label' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
</div>
<br/>
</b:if>

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)