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

Share this

Related Posts

Previous
Next Post »

4 comments

comments
June 17, 2015 at 3:39 PM delete

izin nyoba dulu mas, bermanfaat sekali..

Reply
avatar
June 23, 2015 at 10:24 PM delete

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

Reply
avatar
June 24, 2015 at 5:57 AM delete

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

Reply
avatar

~_Peraturan/Rules_~
Budayakan Komentar Setelah Membaca artikel
- Menggunakan Bahasa Sopan
- Dilarang Spam , Flood , Junk , Sara , Link Aktif Dsb.