Cara Membuat Tombol Share di Blog ala Evo Magz

By | March 24, 2019
Cara Membuat Tombol Share di Blog ala Evo Magz Cara Membuat Tombol Share di Blog ala Evo Magz


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


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


Memang sih dapat membagikan artikel dengan cara menyalin link artikel tersebut. Namun hal itu agak merepotkan sebab pengunjung harus membuka website tempat dimana ia akan membagikan artikel tersebut terlebih dahulu. Nah, dengan hadirnya fitur tombol share, maka akan menciptakan 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 merupakan tampilan dari tombol share template Evo Magz karya Mas Sugeng :

Cara Membuat Tombol Share di Blog ala Evo Magz Cara Membuat Tombol Share di Blog ala Evo Magz
Namun bagaimana dengan yang ingin memasang tonbol share tersebut ? Tenang saja. Kali ini admin akan membagikan tutorial menciptakan widget tombol share tersebut. Nah, berikut merupakan tutorialnya :
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>

.share-buttons-box {height: 67px;background: url(https://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} 


 

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

<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.