Cara Mudah Membuat dan Memasang Tombol Share di Blog!

Cara membuat dan memasang tombol share

Tutorial kali ini Saya akan membahas mengenai cara mudah membuat dan memasang tombol share di blog. Memiliki template yang terdapat tombol share memang keren jika dilihat oleh pengunjung blog Kalian.

Jika sudah memiliki buttons share (tombol share) tetapi tidak lengkap ? Bagaimana dong? Ya cukup Kalian lengkapi lah hehe.

Karena disetiap sosial media adalah langkah jitu Kalian untuk mendatangkan trafik yang banyak di blog Kalian. Jadi diharapkan untuk memasang tombol share pada blog Kalian.

Memasang tombol share di blog memang sangat mudah hanya dengan menambahkan sedikit kode kode html/javascript.

Tetapi, Kalian perlu hati hati saat mengediting template. Sebaiknya, sebelum cara memasang tombol share keren di blogspot di mulai. Alangkah baiknya, untuk di backup terlebih dahulu.

Baca Juga : Cara Pasang 2 Unit Iklan Adsense di Tengah Artikel!

Tanpa bertele tele, langsung kita mulai membahas cara mudah pasang tombol share di blogspot. Simak penjelasan serta ulasan lengkap dibawah ini!

Cara Mudah Membuat dan Memasang Tombol Share di Blog

www.nbcdns.com

Untuk langkah langkah dibawah, Kalian bisa terapkan jika Kalian sudah membaca keseluruhan artikel ini!

#1 Login Kedalam Blogger.com

#2 Pilih Theme >> Edit HTML

#3 Cari Kode <head>. Lalu letakan Kode berikut dibawah kode tersebut.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

#4 Jika Sudah, Selanjutnya Kalian Cari Kode <data:post.body/>. Letakan kode berikut tepat diatasnya (bila kalian ingin menampilkan tombol dibawah judul), dan bisa Kalian letakan dibawah kode tersebut (bila kalian ingin menampilkan tombol share di akhir postingan). Berikut kodenya.

<style>
.social-buttons-box {
height: 67px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFKC95zefcRRRyHpEIGNGtajp01zwx2XDxVUxVqOfAFjzqaLG9ew95c111GGtkUFE5j8xKoHGl3kVBj6YF_K5RsgAeGp7X8pptRBsK2wwkSQoZVnLcLOd1GvQWo3WZbEKUaOH6YimXeQv/s1600/rect3799.png) no-repeat 200px 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;
}
</style>
<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 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>
</div>

<div style='clear: both;'/>
<script>
window.___gcfg = {lang: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script><div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

#5 Simpan Tema, dan Alhasil tombol share Kalian terpasang dengan Mudah!

Baca Juga : Panduan Ngeblog Melalui Hp!

Itulah Cara Mudah membuat dan memasang tombol share di blog. ikuti step by step diatas. Agar dapat memasang dengan benar tanpa ada kesalahan!

Note : kode <data:post.body/> terdapat banyak didalam template Kalian. lebih dari tiga. Kalian dapat Memilih kode tersebut di kedua dan ketiga pada template Kalian.