IwanBerbagi.com - Sebuah website tanpa sosial share saat ini akan terasa hampa, dan terlihat kurang profesional. Maka dari itu pentingnya sebuah website menggunakan tombol share dan keren di akhir postingannya. Tombol share saja tidak cukup, karena kebanyakan sekarang sudah menggunakan smartphone, maka kita dituntut untuk membuat tombol share yang responsive, agar ennak dilihat pada tampilan mobile.

Mungkin sudah banyak yang berbagi Share Buttons sejenis ini, namun disini tampilannya sudah di modifikasi oleh Kang Adhy selaku admin KompiAjaib dan saya sesuaikan sedikit disana sininya. Termasuk optimasi tampilannya pada tampilan mobile.

Menambahkan CSS Flat Design
Saya sangat menyukai modifikasi jenis ini, dan sudah sangat cocok dengan template yang saya gunakan pada blog cupu saya ini. Kamu hanya perlu menyimpan kode css dibawah ini diatas kode </head> pada template kamu :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.don-share{margin:5px -10px 0 0!important;padding-left:80px}
.don-share .don-share-total{margin-left:-80px!important}
.don-share.don-active .don-share-total:after{bottom:15px!important}
.don-share .don-share-expand:before{font-weight:700!important;font-size:28px!important;line-height:19px!important}
.don-share .don-share-expand{max-height:34px}
button.don-share-expand{font:28px Arial!important;}
.don-btn{border-radius:0!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}
.don-btn:hover{color:#fff;background-position:bottom;-webkit-box-shadow:none!important;box-shadow:none!important;opacity:.8}
.don-share .don-btn.don-share-expand:hover{color:#666!important}
/*]]>*/
</style>
</b:if>

Memasang kode HTML dibawah Postingan
Seperti biasa tombol share itu akan ditempatkan setelah postingan, maka dari itu kamu perlu mencari kode <b:includable id='post' var='post'> dan kamu harus termukan kode yang kurang lebih akan terlihat seperti berkut :
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
Simpan kode HTML berikut ini tempat dibawah kode tersebut.
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div class='don-share' data-limit='4' data-style='short'>
<div class='don-share-total'/>
<div class='don-share-facebook'/>
<div class='don-share-twitter'/>
<div class='don-share-google'/>
<div class='don-share-linkedin'/>
<div class='don-share-pinterest'/><div class='don-share-tumblr'/><div class='don-share-stumbleupon'/><div class='don-share-reddit'/><div class='don-share-hackernews'/><div class='don-share-buffer'/><div class='don-share-xing'/><div class='don-share-pocket'/><div class='don-share-fancy'/><div class='don-share-yummly'/><div class='don-share-scoopit'/><div class='don-share-weibo'/><div class='don-share-vk'/><div class='don-share-mailru'/><div class='don-share-odnoklassniki'/><div class='don-share-hatena'/>
  </div>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<div class='don-share' data-limit='2'>
<div class='don-share-total'/>
<div class='don-share-facebook'/>
<div class='don-share-twitter'/>
<div class='don-share-google'/>
<div class='don-share-linkedin'/>
<div class='don-share-pinterest'/><div class='don-share-tumblr'/><div class='don-share-stumbleupon'/><div class='don-share-reddit'/><div class='don-share-hackernews'/><div class='don-share-buffer'/><div class='don-share-xing'/><div class='don-share-pocket'/><div class='don-share-fancy'/><div class='don-share-yummly'/><div class='don-share-scoopit'/><div class='don-share-weibo'/><div class='don-share-vk'/><div class='don-share-mailru'/><div class='don-share-odnoklassniki'/><div class='don-share-hatena'/>
  </div>
</b:if>
Perhatikan pada data-limit='4' dan data-limit='2' kamu bisa sesuaikan yang pertama dengan keadaan pada template kamu, apakan lebih rapih jika ditampilkan 4 sosial share begitu juga pada yang kedua apakah ditampilan mobile lebih rapih jika ditampilkan sebanyak 2 tombol share.

Untuk lebih jelasnya berikut ini tampilan saat diakses via desktop atau laptop :
Responsive Sosial Share Buttons Flat Design Dengan Counter
Tampilannya minimalis flat design gimana gitu kan. hihi, untuk tampilan mobile kamu bisa mengeceknya pada template blog saya ini.

Langkah terakhir, menambahkan file JS
Untuk penyelesaian kamu harus menambahkan file JS berikut ini, agar share count nya dapat terpasang dengan baik, share count dibawah ini sudah dilengkapi dengan script async jadi akan terload jika semua komponen blog sudah terload. Intinya tidak akan menambah berat loading blog.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload() {
    var d = document.createElement("script");
    d.src = "https://firebasestorage.googleapis.com/v0/b/hostingib-66ddd.appspot.com/o/donreach-iwanberbagi.js?alt=media&token=d2dd81ec-24a5-405d-ba46-0e03ae42dd16", document.body.appendChild(d)
}
window.addEventListener ? window.addEventListener("load", downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent("onload", downloadJSAtOnload) : window.onload = downloadJSAtOnload;
//]]>
</script>
</b:if>
Simpan kode tersebut tepat diatas kode </body> pada template kamu. Dan simpan template untuk melihat hasilnya. Semoga bermanfaat.
Share this with short URL:
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed