[Update] Cara Buat Tombol Share di Blog ala Evo Magz

Cara menciptakan dan memasang tombol share sosial media di Blog Sebagaimana Evo Magz – Memasang tombol share sosial media di Blog merupakan salah satu cara yang dapat meningkatkan jumlah pengunjung di blog, Sebagai contoh bila ada pengunjung yang mengunjungi salah satu artikel blog anda dan pengunjung tersebut membagikan/menshare artikel tersebut, maka otomatis salah satu artikel yang di share baru saja apabila menarik perhatian orang lain akan di Klik/dikunjungi. Itulah manfaat memasang tombol share di Blog, Oleh sebab itu kali ini admin akan membagikan Cara menciptakan atau memasang Tombol share di bawah postingan blog.

Bukan hanya Tombol share biasa, yang admin share ini merupakan Tombol Share media sosial karya Mas Sugeng yang di pasang di template Evo Magz (template Blog terbaik buatan mas sugeng)

Tertarik memasang Tombol share media sosial seperti diatas, Jangan khawatir apabila tak sesuai dengan template yang anda gunakan, ditutorial ini akan admin terangkan cara menyesuaikannya. Ok langsung aja.

Cara Membuat Tombol Share media sosial Sebagaimana Evo Magz.

  • Pertama silahkan masuk ke Akun Blogger anda dan plih Template – Edit HTML
  • Setelah itu cari kode ]]</b:skin> atau </style> (Untuk mempercepat pencarian silahkan, CTRL+F pada keyboard)
  • Jika sudah ketemu silahkan copy code CSS dibawah ini dan paste di atasnya

/* Social Share Buttons ala Evo Magz*/
.social-buttons-box {
height: 67px;
background: url(http://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/s1600/share.png) no-repeat 330px 0px;
margin:20px 0 15px;
overflow:hidden;
}
.social-buttons {
margin:0 0;
height:67px;
float:left;
}
.social-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
}

  • Kemudian cari Code <data:post.body/> (Biasannya kode tersebut ada lebih dari satu, Silahkan anda pilih code yang terakhir atau dapat anda sesuaikan sendiri nantinnya)
  • Dan Copy code CSS di bawah ini, kemudian paste tepat dibawah code <data:post.body/> 

<div class=’social-buttons-box’>
<div class=’social-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>–>

  • Terakhir Simpan Template
Keterangan : Silahkan mengganti warna Biru diatas dengan URL Gambar lain, apabila gambar sharenya terlalu besar atau apabila anda tak menyukainnya, dan Ganti warna Merah untuk menyesuaikan gambar pada postingan

Demikian artikel tentang cara menciptakan Tomboh share media sosial ala Evo Magz, Jika anda kesulitan dapat anda tannyakan di kommentar. Semoga berhasil dan Terima kasih!
Comments

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More