Responsive Sosial Share Buttons Flat Design Dengan Counter

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.

Berlangganan Via Email

Suka dengan artikel di atas? nggak ada salahnya untuk berlangganan artikel terbaru dari blog ini langsung via email.