Cara Menciptakan Tombol Share Dibawah Postingan Blog

tutorial cara pasang tombol share di bawah postingan blogspot

Cara Memasang Tombol Social Share Button di Blog. Kali ini blog mas tamvan akan share tutorial cara memasang tombol social share dan like button dilengkapi dengan counter.

Social share button ini saya ambil dari template evomagz dan kita akan pasang dibawah postingan blog. Fiturnya ada Google Plus Like, Facebook Like, Facebook Share, Twitter Share dan linkedin Share button. Tombol Social Share button ini kita akan pasang disetiap postingan blog.

Fungsinya dan keuntungannya apa tombol social share button ini? Fungsinya ya buat memudahkan supaya dikala si pengunjung merasa artikel kalian bagus, bermanfaat / relevan dan ingin membagikannya ke social media maka dengan gampang tinggal pilih mau di share ke social media yang mana dan tinggal klik saja.

Nah bagi kalian yang ingin mencoba menerapkan widget social media share buton dibawah postingan blog ini, tinggal ikuti langkah demi langkah di blog mas tamvan ini :)

Dan jangan lupa mampir ke artikel lainnya yang sudah ada di blog ini :)

Tutorial Blogger Lainnya :

• Double Click To Select All Text In Div

• Membuat Widget Social Media Follower Counter

• Membuat Slider Random Post Responsive Di Homepage

Kia lanjut ke tutorialnya...

membuat tombol share di setiap postingan

• Jangan lupa login terlebih dahulu ke akun blogger kalian

• Kalo sudah login, kalian pilih sajian Template, Edit HTML

• Selanjutnya Cari Kode <data:post.body/>

• Biasanya isyarat tersebut ada banyak, tiap template beda-beda. Kalian pilih yang ke dua dan masukan script social share button dibawah ini sempurna dibawah isyarat tadi

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Tombol share media umum --> <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> <div style='clear: both;'/> </b:if> 

• Lanjut... Sekarang kalian cari isyarat </head>

• Kalo sudah ketemu, masukan css dibawah ini sempurna diatasnya

 <style type='text/css'> /* share buttons */ .share-buttons-box{height:67px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSfWJYD553HlH8hyphenhyphenETxVcixHHln6I4VF5MnGeaIVtMXVhrD7gTgy1V0o8HLjh8jtiTubKnAae69l5YHFhGKS1IwhqVWt2rdA0e6MqtLlhKhOoxZKItXVG-9auo2b7rLmPPPb5n7dc2lSX9/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;position:relative} .share-buttons{margin:0 0;height:67px;float:left} .share-buttons .share{float:left;margin-right:10px;display:inline-block} </style> 

Kalo widget social share buttonya tidak tampil, silahkan taro html di bawah isyarat <data:post.body/> yang lainnya. Soalnya tiap template beda-beda.

Apabila masih tidak tampil, kalian dapat menggantinya dengan isyarat lain. Milasnya taro isyarat HTML social Share Buttonya di atas 'related-post atau di atas komentar.

• nah kalo sudah, tinggal save dan selesai!!!

Cukup sekian dan terima kasih, semoga artikel wacana cara menciptakan tombol share button menyerupai facebook di bawah postingan blog ini bermanfaat...

Buat yang tidak mengerti dengan tutorial ini, silahkan bertanya di kolom komentar ya gan :) Insya allah dibantu sampe tampil :)