Berbagi Tips Komputer, Blogger, Dan Android

Membuat Tombol Shares Keren V.1

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.

Membuat Tombol Shares Keren V.1


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('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}

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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<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 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 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>

5. Klik Save / Simpan

Demikin Artikel Cara Membuat Tombol Shares Keren V.1 . Semoga Bermanfaat
3 Komentar untuk "Membuat Tombol Shares Keren V.1"

izin nyoba dulu mas, bermanfaat sekali..

gk nambah loading berat kan mas, mau coba kalau memang jos :D

Gk gan :D
Karena gk pake JavaScript .. Jadi Gk bakal bikin lemot :)

Back To Top