Memasang Tombol Share di Blog

Shere button ini selain berguna untuk mempermudah pengunjung membagikan artikel anda, ini juga bisa menjadi salah satu pilihan untuk mempercantik postingan blog anda, langsung saja pada tutorialnya.

• Template > Edit HTML
• Cari (CTRL+F) kode ini ]]></b:skin>
• Copas kode di bawah ini tepat di atas kode ]]></b:skin>

/* CSS Share Button */

.tombol-berbagi-fath{margin:0 0 8px;padding:0;overflow:hidden}#share-button p{float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}

.tombol-berbagi-fath-fb,.tombol-berbagi{float:left;width:13%;padding:0px;height:inherit}

.tombol-berbagi-fath-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:13%;height:inherit;padding:0px;}

.tombol-berbagi-fb-label{color:#2d609b}

.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:8px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}

.tombol-berbagi-tw{background-position:0 -43px}

.tombol-berbagi-tw-label{color:#00c3f3}

.tombol-berbagi-gp{background-position:0 -86px}

.tombol-berbagi-gp-label{color:#f00}

.tombol-berbagi-lin{background-position:0 -129px}

.tombol-berbagi-fath a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;

border:1px solid #fff}

.tombol-berbagi-fath a:hover{top:1px;

left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)}

@media only screen and (max-width:640px){

.tombol-berbagi,.tombol-berbagi-fath-fb{display:inline-block;float:left;width:25%;padding:0;height:inherit}

.tombol-berbagi,.tombol-berbagi-fath-tw,.tombol-berbagi-lk{float:left;width:25%;padding:0;border-left:0}}

• Selanjutnya cari kode ini <data:post.body/>
• Kemungkinan besar di blog Anda akan ada dua atau lebih kode seperti diatas. Pilih yang pertama dan copy script dibawah ini tepat di bawahnya.
• Jika setelah template di simpan tidak terlihat perubahannya, pindahkan kode di bawah ini di bawah kode <data:post.body/> yang kedua.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='tombol-berbagi-fath'>

<div class='tombol-berbagi-fath-fb'>

<a class='tombol-berbagi-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' style='background:#3b5998;' target='_blank'> Share on Facebook</a>

</div>

<div class='tombol-berbagi-fath-tw'>

<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' style='background:#4099ff;' target='_blank'>Share on Twitter</a>

</div>

<div class='tombol-berbagi'>

<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' style='background:#c0361a;' target='_blank'>Share on Google+</a>

</div>

<div class='tombol-berbagi'>

<a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' style='background:#0077B5' target='_blank'>Share on LinkedIn</a>

</div>

</div>

</b:if>

• Simpan template anda, dan semoga bisa bermanfaat.

Baca Juga