Cara Membuat Tombol Share FB, Twitter pada Blog
Cara Membuat Tombol Share FB, Twitter pada Blog - Ada banyak sekali cara untuk membuat tombol share button yang dapat kita pasang di blog kita , ada yang menggunakan java script dan ada yang tidak menggunakan java script .
Kali ini saya akan bagikan bagaimana cara tuk membuat tombol share button di blog yang letaknya dibawah postingan , tombol share ini merupakan tombol share karya mas sugeng yang sudah ada sebelumnya di template evo magz dan brosense . tombol share ini sangat unik sekali , dimana tombol share ini disertai dengan box_count , untuk lebih jelasnya anda bisa lihat demo gambar dibawah ini , ataipun di tombol share saya
Cara Membuat Tombol Share FB, Twitter pada Blog
1. Seperti biasanya , masuk dulu ke editor template html
2. Pasang kode css berikut tepat di atas ]]</b:skin> atau </style>
.share-buttons-box {height: 67px;background: url(http://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;}.share-buttons{margin:0 0;height:67px;float:left}.share-buttons .share{float:left;margin-right:10px;display:inline-block}
3. Kemudian carai lagi kode <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )
4. Setelah ketemu kode diatas kemudian pasang script dibawah ini tepat dibawah kode <data:post.body/>
<div class='share-buttons-box'> <div class='share-buttons'> <div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div> <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div> <div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div> <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div> <div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div> </div> </div> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
5. Terkhir Simpan Template dan Lihat Hasilnya
Jika Berhasil maka tombol share akan seperti gambar diatas, atau pada share button yang saya pasang ( bila masih saya pasang ) hehheheheh, gimana ? ada kesulitan gak cara bikin share button ? Jika ada silahkan komen dibawah.
0 comments:
Post a Comment