Berbagi Tips Komputer, Blogger, Dan Android

Wednesday, June 17, 2015

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('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='&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

Previous
Next Post »

4 komentar

Pemuda Pasaman delete June 17, 2015 at 3:39 PM

izin nyoba dulu mas, bermanfaat sekali..

Helsel delete June 19, 2015 at 7:33 AM

Silahkan di coba mas @Wiki

Abdul Muhajir delete June 23, 2015 at 10:24 PM

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

Helsel delete June 24, 2015 at 5:57 AM

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

Dilarang Spam , Flood , Junk , Sara , Link Aktif Dsb.

 
Back To Top