Serba Tutorial | Internet Marketing | Blogging | Komputer | Smartphone

Cara Membuat Tombol Share ala Mas Sugeng pada Blog



TWD.WEB.ID - Memasang tombol share sosial media pada blog ini bertujuan agar artikel pada blog kita dapat di share oleh pengunjung blog ke media sosial seperti Google Plus, Facebook dan Twitter dan lainnya. Tombol share sosial media memiliki peran yang cukup penting untuk blog yang kita kelola.

Nah pada kesempatan yang baik kali ini, saya akan berbagi tutorial cara memasang tombol share keren ala mas sugeng di bawah artikel blog. Mas Sugeng adalah seorang master seo sekaligus pembuat template keren yang karyanya saat ini banyak sekali di gunakan oleh para blogger Indonesia, sebut saja template EvoMagz sebuah template keren yang sangat fenomenal di kalangan para blogger.

Tombol share ala Mas Sugeng yang dipasang di beberapa template populernya, kini anda dapat memasangnya di blog anda sendiri dengan mudah. Kurang lebih tampilannya seperti gambar berikut ini:

Cara Membuat Tombol Share ala Mas Sugeng pada Blog

Untuk cara pemasangan tombol share ala mas Sugeng sebenarnya cukup mudah, anda akan sedikit menambahkan kode-kode tambahan di template pada blog agar tombol share dapat tampil di bagian bawah artikel dan dapat berfungsi sebagaimana mestinya.

Cara Membuat Tombol Share ala Mas Sugeng pada Blog

1. Pertama silahkan login terlebih dahulu ke akun Blogger anda

2. Buka menu >> Template >> Edit HTML

3. Selanjutnya cari kode ]]></b:skin> atau </style> kemudian letakkan kode berikut ini tepat diatas kode tadi.

/*Tombol Share*/
.tombol-share-box {height: 67px;background: url(http://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/s1600/share.png) no-repeat 300px 10px;margin:20px 0 15px;overflow:hidden;}
.tombol-share-keren{margin:0 0;height:67px;float:left}
.tombol-share-keren .share{float:left;margin-right:10px;display:inline-block}
.tombol-share-keren .tweet {margin-top: 41px;}

4. Cari kode <data:post.body/> jika kode tersebut terdapat lebih dari satu kode, silahkan pilih yang ke dua atau yang terakhir. Gunakan CRTL + F agar lebih mudah mencari kodenya.

5. Jika sudah ketemu, silahkan pasang kode berikut ini tepat dibawah kode <data:post.body/>

<div class='tombol-share-box'>
<div class='tombol-share-keren'>
<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>
</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>


6. Jika pemasangan diatas sudah selesai, selanjutnya cari kode </body> kemudian pasang kode dibawah ini tepat diatas kode tersebut.

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

7. Selesai dan silahkan lihat hasilnya.


Share on Facebook
Share on Twitter
Share on Google+
Berlangganan Artikel Gratis Via Email



Copyright © 2016 - 2017 TWD.WEB.ID All Rights Reserved | About me | Contact us | Privacy Policy | Disclaimer | Sitemap | Link Partner