Cara Membuat Tombol Share Untuk Blog

Teman-teman blogger pasti pernah mempergunakan atau melihat tombol share di template milik mas sugeng atau yang dipakai di blog ini. Pada kesempatan kali ini saya ingin membagikan sebuah kode yang dapat kita pergunakan untuk memasang tombol sharing artikel ke media sosial ala buatan mas sugeng.

Tombol sharing ini sangat ringan dan yang pasti tidak membuat loading dari blog anda lambat atau lemoot. Dan tombol ini sudah dipastikan dapat membagikan semua artikel kita dengan lancar dan tidak perlu modifikasi yang rumit untuk kita dapat menampilkan tombol ini pada blog milik kita ini.

Untuk memasang tombol share ke sosial media ini kita dapat mengikuti langkah-langkah mudah berikut ini.

• Silahkan login ke blog anda
• Masuk ke template > edit html
• Cari kode berikut ini pada template blog anda ]]</b:skin> atau </style>
• Masukkan kode dibawah ini di atas kode tersebut

.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpaExwtdCRvDg8ObRHLifkCTf2aabutvUKP6b0cUjB5Jk_gDuPE49DqTYf48phlCMoiQeettqtAxKNLfvFA1LmCqnk4AfOxhope56BV2-nASmACsQ_978Dd7x9Ud2j7fowfqrDmhYl7HB0/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}

• Jika sudah maka selanjutnya cari kode ini <data:post.body/> namun kode yang ke dua yaaa.
• Nah silahkan masukkan kode dibawah ini.

 <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><right><a href="http://goo.gl/zAnmTu"><font style='font-size: 9px; color: #CECECE; float: right; margin: 5px;'>share widget</font></a></right><br/>

Nah kemudian simpan template anda. Jika berhasil maka tombol sharing ke sosial media ala mas sugeng akan tampil pada setiap artikel pada blog anda..
Happy blogging.

Tweet