Membuat Tombol Shares Keren V.1 - Tombol bagikan/shares di Blog sangat bermanfaat untuk Blog anda. Sebab para pembaca dapat membagikan Artikel anda, pasti saja Traffik Blog kamu dapat meningkat.
Share button ini bermanfaat untuk mempermudah pengunjung yang ingin bagikan artikel yang dirasa bermanfaat ke jaringan sosial media mereka. Semacam Facebook, Twitter, Google plus, serta Linkedin. Bagikan button ini nantinya bakal timbul di setiap artikel blog sobat.
Berikut Cara Membuat Tombol Shares Keren V.1 :
1. Pertama-tama Sobat Login Ke Blogger
2 .Lalu ke Template Sobat
Blogger > Template > Edit HTML
3. Taruh Kode Berikut diatas Kode ]]></b:skin>
/* SHARE */
.article-share-cont{width:100%;height:43px;margin:10px 0px}.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-cont p{font-size:100%;float:left;background:#1abc9c;display:block;padding:5px 10px;margin:8px 0px 5px;text-transform:uppercase;color:#fff}.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/AVvXsEhXcUVZr8h3TK8ukAeUXs0aE6T8B4cIRZ-kPPcQfWJh6VX_NRztcSCWtPiQtJ4E671mu_shYOV0RuoFvSOG9RpnQ5msuV2hlJ-isOWMKnJ97xq59bQ7tLkAGx0dipLS5zONBM07d77prX0/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}
4. Lalu Letakkan kode di bawah ini di bahwah kode <data:post.body/>
biasanya kode "<data:post.body/>" ada lebih dari 3 ..cari saja yg ke-4 atau ke-4
<div class='article-share-cont'>
<p> Share ya.</p>
<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 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 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 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>
5. Klik Save / Simpan
Demikin Artikel Cara Membuat Tombol Shares Keren V.1 . Semoga Bermanfaat
4 komentar
izin nyoba dulu mas, bermanfaat sekali..
Silahkan di coba mas @Wiki
gk nambah loading berat kan mas, mau coba kalau memang jos :D
Gk gan :D
Karena gk pake JavaScript .. Jadi Gk bakal bikin lemot :)
Dilarang Spam , Flood , Junk , Sara , Link Aktif Dsb.