Membuat Tombol Shares Keren V.1

Unknown

Selasa, 16 Juni 2015

Bagikan :

Tweet

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/AVvXsEikuOqYJ6-zjEBHNu7HT4np0zoecP2zK7DEITzAoiOCBVpg-3cUWNrbY4SuPxexJcTyh-MYe_d-IbOWjKuNgGtnrq1VpkHABShWIYuDw1KzS6uj5l71sY2NiYKGk3bYLvFwpodV2ux5iBk/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

Tag : Tutorial Blog