Tutorial & Cara Membuat Tombol Share di Blog yang Mudah di Klik Pengunjung

Tips kali ini kita akan membahas bagaimana cara membuat tombol share di Blog, contoh share social media yang saya buat ini bisa anda lihat di bagian akhir postingan ini.

Tutorial Membuat Tombol Share ini dibuat sedemikian rupa agar pengunjung yang sedang melihat artikel anda, tergugah untuk mengklik tombol share yang nantinya menyebar ke berbagai social media.

Berikut adalah cara memasang tombol share seperti blog evo magz


1. Login Ke Blogger Anda.
2. Pilih Template-> Edit HTML
3. Kemudian Cari kode ]]></b:skin>
4. Jika Sudah Ketemu Copy kode dibawah ini tepat di atas kode ]]></b:skin>

.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaTuxVZVg4pkm81Rvgif247pM3F983KSgJxbFQICRBWaeoIAfsgr7LEKA0yAqrj99L9l_mXGRnq8WUxh7TvBBl6FrXV9ddassterCxeoIq4_ySyxr3jl9TZslh88v5GkwdIZqP5IUWNMcf/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. Kemudian cari lagi kode <data:post.body/>  biasanya kode tersebut lebih dari 2 , kamu pilih aja yang terakhir atau di coba satu persatu

 6. jika sudah ketemu script tersebut kemudian pasang script dibawah ini tepat dibawah kode <data:post.body/>


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


 NB : Jika Template Sobat Belum terdapat javascript facebook silahkan copy kode ini dan letakan di bawah kode </head>

 <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;js.async=true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Semoga artikel membuat tombol share ini bermanfaat :)