Cara Memasang Share Button Keren di Blog - Tombol share dibawah postingan blog sangat penting dipasang untuk membagikan artikel yang di posting ke berbagai social networking, semakin banyak yang orang datang ke halaman blog anda dan dishare maka makin banyak juga peluang web anda menjadi rami pengunjung.
Selain itu memasang share button di blog juga bisa meningkatkan kualitas seo blog, walaupun sudah banyak sekali yang share artikel tentang membuat atau memasang tombol share pada blog, namun disini saya juga ingin berbagi yang tak kalah keren dengan mastah lain tentang membuat tombol share dibawah postingan.
Tombol share blog biasanya berisikan tombol sosial networking seperti facebook, twitter, google plus, digg dan masih banyak lagi yang lainnya. Nah, bagi sahabat yang ingin memasangnya juga pada blog, silahkan anda ikuti tutorial berikut ini.
Cara Membuat Tombol Share Button dibawah Postingan Blog :
1. Silahkan anda login ke blogger anda, kemudian silahkan anda masuk kebagian Template dan Edit HTML
2. Silahkan copykan kode berikut ini diatas kode ]]</b:skin> atau </style>
.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5YwDj1JiBq3mOZmFLC_PR_iQRAnjjRGluxwmOhFuO9Vayii2WfQ46U09VcNHnsqnmtS9Kt5ffWIfu0ZJwknM4gt13tUDifmSaHQO1RSkpOby_4r7N4jaoLrIe9cLktM54msr6rTtgUZ1a/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;}3. Silahkan anda cari lagi kode <data:post.body/> dan pastekan kode berikut ini tepat dibawah kode tersebut :
.share-buttons{margin:0 0;height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block}
<div class='share-buttons-box'>4. Save template dan lihat hasilnya...
<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. Selesai...
Tombol share button ini saya terinspirasi dari template evo magz mas sugeng yang keren dan ganteng sekali. Karena templatenya banyak yang keren widgetnya seperti cara membuat popular post keren dan masih banyak lagi tutorial blog keren disini.
Silahkan pasang sekarang juga Share Button Keren di Blog anda, jika terdapat error kode diatas silahkan berkomentar dibawah ini secepat mungkin akan diperbaiki oleh admin blog mahrus-net.
pakai javascript juga ya mas... makasih ne mas, share button cocok buat blog saya yang satu lagi...
BalasHapusIya mas pakai
BalasHapuskok gabisa ya kak.. thanks
BalasHapusCoba dicermati lagi mbak cara memasangnya!
Hapussekarang mulai trend pasang tombol share via whatsapp, kompas dah pake bro.
BalasHapusJadinya kenapa ya mas kok vertical... gak horisontal
BalasHapuspas banget lagi dibutuhkan. artikel bermanfaat
BalasHapusuntuk pasang share whatapp caranya gmn ya? aku coba kok gk bisa!!apa ngaruh sama templetnya ya???makasih
BalasHapusmembantu sangat. matur nuwun sangat mas bro
BalasHapusjadi juga dahh, thanks bro
BalasHapusterus untuk menghilangkan tulisan share tu gmn?
BalasHapusterimakasih kakak
BalasHapusizin copy
BalasHapusKeren gan
BalasHapus