Cara Membuat Tombol Share Warna-warni
Kali ini Saya akan memberitahu Cara Membuat Tombol Share Warna-warni.
Biasanya tombol share yang dibuat itu berupa widget, tapi sekarang bentuknya seperti widget tapi tidak dipasang satu-satu melainkan digabung menjadi satu dan rapih. Contohnya seperti di bawah ini.
Cara membuatnya ada di bawah ini :
Biasanya tombol share yang dibuat itu berupa widget, tapi sekarang bentuknya seperti widget tapi tidak dipasang satu-satu melainkan digabung menjadi satu dan rapih. Contohnya seperti di bawah ini.
Cara membuatnya ada di bawah ini :
- Login ke blogger.com
- Pada dashboard pilih Template → Edit HTML
- Cari kode ]]></b:skin> dengan cara tekan tombol F3
- Setelah itu letakkan script di bawah ini di atas kode ]]></b:skin>
#share-button-lanonadio {margin:0 0 8px;padding:0;overflow:hidden;}
#share-button-lanonadio p {float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#eaeaea;font-color:#000;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff;}
#share-button-lanonadio 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;}
#share-button-lanonadio a:hover {top:1px;left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1);}
- Setelah itu cari kode <data:post.body/>
- Letakkan script di bawah ini di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>Perhatian :
<div class='clear'/>
<div id='share-button-lanonadio'>
<p>Share On</p>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a>
<a class='facebook' expr:href='"https://plus.google.com/share?url=" + data:post.url' style='background:#c0361a;' target='_blank' title='Google+'>Google+</a>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a>
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' style='background:#1BE105;' target='_blank' title='StumbleUpon'>StumbleUpon</a>
<a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title' style='background:#3b5998;' target='_blank' title='LinkedIn'>LinkedIn</a>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://digg.com/submit?url=http://www.erjud-chayob.com/2013/03/tombol-share-lintas-me-modified.html&title=Tombol Share Lintas Me Modified' rel='nofollow' style='background:#000000;' target='_blank'>Digg</a>
<!-- script begin here -->
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>");
//]]>
</script>
<!-- End script -->
<div class='clear'/>
</div>
</b:if>
- Kode <data:post.body/> bisa sampai tiga kodenya, cobalah satu-persatu, jika tombol share masih belum muncul.
Selamat Mencoba dan Semoga Bermanfaat !
Belum ada Komentar untuk " Cara Membuat Tombol Share Warna-warni "
Posting Komentar