Cara Membuat Tombol Share di Blog ala Evo Magz

Bagikan artikel ke:

Facebook Google+ Twitter

Penulis Muhamad Nurul Huda

Cara Membuat Tombol Share di Blog ala Evo Magz - Ketika telah selesai membaca artikel, pengunjung biasanya akan menyukai, mengomentari, atau bahkan hingga membagikan artikel tersebut. Memang ketika artikel tersebut dirasa menarik, maka akan membuat pengunjung serasa seperti harus membagikannya. Terlebih lagi jika artikel yang ingin dibagikan tersebut sangat bagus, menarik, dan nyaman untuk dibaca.

Namun bagaimana jika ketika akan membagikan atau menshare artikel tersebut, pengunjung tidak menemukan tombol untuk membagikan artikel tersebut. Nah loh. Hal ini yang akan membuat pengunjung kebingungan. Tapi lain lagi jika pengunjungnya agak paham tentang internet, maka ia akan menyalin url artikel tersebut dan membagikannya.

Baca dulu :

Cara Menghapus Garis Pelangi Navigasi pada Template Evo Magz Cara Membuat dan Memasang Google Custom Search Engine di Blog 5 Cara Mendapatkan Domain Gratis untuk Blog Website

Memang sih bisa membagikan artikel dengan cara menyalin link artikel tersebut. Namun hal itu agak merepotkan karena pengunjung harus membuka website tempat dimana ia akan membagikan artikel tersebut terlebih dahulu. Nah, dengan hadirnya fitur tombol share, maka akan membuat pengunjung lebih mudah dalam menshare artikel yang telah ia baca. Selain itu, hal ini juga akan meningkatkan pageview blog tersebut.

Kali ini kita akan menggunakan tombol share yang ada pada template Evo Magz karya Mas Sugeng. Dengan menggunakan tombol share ini, pengunjung akan dapat dengan mudah membagikan artikel yang telah dibaca ke Google+, Facebook, Twitter, dan yang lainnya. Selain itu, dengan menggunakan tombol share dari template Evo Magz, maka pengunjung dapat dengan mudah mengetahui sudah berapa kali artikel tersebut dibagikan melalui Google+ atau Twitter.

Berikut adalah tampilan dari tombol share template Evo Magz karya Mas Sugeng :

Namun bagaimana dengan yang ingin memasang tonbol share tersebut ? Tenang saja. Kali ini saya akan membagikan tutorial membuat widget tombol share tersebut. Nah, berikut adalah tutorialnya :

Catatan !

Gunakan tombol CTRL+F untuk mencari kode

1. Buka blogger.com kemudian login

2. Pilih menu template atau tema

3. Pilih mode Edit HTML

4. Letakkan script css berikut tepat di atas kode ]]</b:skin> atau </style> 

CSS

.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN0rCRIJH7_nYdLpR2YONziFSs0rdR1Ogoj8qJji0UT-C_sQMoJ3asxtnOdgUjs9rzshGN6n6PlTaEcj1oDDs78I9-cfP6DtaAavPQpOdJW9VtUft1UBYP49C8bg0kqoeKWNLlN696plo3/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}

5. Salin script di bawah ini tepat dibawah kode  <data:post.body/>

Script

<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)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>

• kemudian Klik save dan lihat hasilnya.

Catatan !

Backup templatemu terlebih dahulu dan hapus script widget share dari templatemu lalu masukkan script widget share Evo Magz.