Cara Membuat Tombol Share Keren Pada Blog

Pencarian mengenai Cara Membuat Tombol Share Keren Pada Blog akan saya berikan langkah-langkah pembuatan pada artikel ini.

Dengan memberikan tombol berbagi pada blog tentu akan mempermudah dalam membagikan arikel sehingga banyak yang mengetahui artikel tersebut, selain itu juga dapat menarik pengunjung untuk dapat membaca artikel kita.

Tobol share yang akan saya bagikan ini adalah merupakan tombol share yang dibuat oleh mas sugeng.

contoh

Pada contoh gambar di atas merupakan tombol share yang terdapat pada www.inidulubaruitu.com yang letaknya dibagian bawah postingan atau attikel pada blog, dan saya akan membagikan bagaimana langkah-langkah pembuatannya, silahkan simak dan ikuti langkah-langkahnya dibawah ini:

Artikel terkait : Cara Membuat Related Post Atau Artikel Terkait Pada Blog

Langkah-langkah membuat tombol share untuk blog
Silahkan ikuti langkah-langkah berikut:
1. Silahkan masuk terlebih dahulu pada dashboard blog kamu.
2. Silahkan masuk pada menu Temlate > Edit HTML.

keterangan no.2

3. Pada laman edit html silahkan cari kode "]]></b:skin>", lalu copy dan paste kode dibawah ini diatasnya.

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

4. Silahkan cari kembali kode "<data:post.body/>" atau "<div class='post-footer'>", lalu copy dan paste kode dibawah ini dibawah kode tersebut.

<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>
<!-- <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>-->
<div style='clear: both;'/>

5. Langkah selanjutnya silahkan cari kembali kode "</boy>", lalu copy dan paste kode dibawah ini diatas kode tersebut.

<script>
  window.___gcfg = {lang: &#39;id&#39;};
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);
</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>

6. Silahkan simpan template dan lihat hasilnya.

Demikian langkah-langkah bagaimana Cara Membuat Tombol Share Keren Pada Blog yang dapat saya bagikan semoga bermanfaat dan tentunya membantu. Terima kasih.


*Jika ada pertanyaan silahkan sampaikan melalui form komentar, dan jika suka dengan artikel ini silahkan klik like, share, atau join fans page untuk mengetahui artikel lainnya.

Tweet

Subscribe to receive free email updates: