Responsive Sosial Share Buttons Flat Design Dengan Counter

IwanBerbagi.com – Sebuah website tanpa sosial share ketika ini akan terasa hampa, dan terlihat kurang profesional. Maka dari itu pentingnya sebuah website memakai tombol share dan keren di tamat postingannya. Tombol share saja tidak cukup, alasannya ialah kebanyakan kini sudah memakai smartphone, maka kita dituntut untuk menciptakan tombol share yang responsive, semoga ennak dilihat pada tampilan mobile.

Mungkin sudah banyak yang membuatkan Share Buttons homogen ini, namun disini tampilannya sudah di modifikasi oleh Kang Adhy selaku admin KompiAjaib dan saya sesuaikan sedikit disana sininya. Termasuk meningkatkan secara optimal 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 isyarat css dibawah ini diatas isyarat </head> pada template kau :

<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 isyarat HTML dibawah Postingan
Seperti biasa tombol share itu akan ditempatkan sesudah postingan, maka dari itu kau perlu mencari isyarat <b:includable id='post' var='post'> dan kau harus termukan isyarat yang kurang lebih akan terlihat menyerupai berkut :

      <data:post.body/>       <div style='clear: both;'/> <!-- clear for photos floats -->     </div>

Simpan isyarat HTML berikut ini daerah dibawah isyarat 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' kau sanggup sesuaikan yang pertama dengan keadaan pada template kamu, apakan lebih rapih kalau ditampilkan 4 sosial share begitu juga pada yang kedua apakah ditampilan mobile lebih rapih kalau ditampilkan sebanyak 2 tombol share.

Baca Juga:  Daftar Alamat Dan Nomor Telepon Perusahaan Di Jakarta (Bagian 31)

Untuk lebih jelasnya berikut ini tampilan ketika diakses via desktop atau laptop :

 Sebuah website tanpa sosial share ketika ini akan terasa hampa Responsive Sosial Share Buttons Flat Design Dengan Counter

Tampilannya minimalis flat design gimana gitu kan. hihi, untuk tampilan mobile kau sanggup mengeceknya pada template blog saya ini.

Langkah terakhir, menambahkan file JS
Untuk penyelesaian kau harus menambahkan file JS berikut ini, semoga share count nya sanggup terpasang dengan baik, share count dibawah ini sudah dilengkapi dengan script async jadi akan terload kalau 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 isyarat tersebut sempurna diatas isyarat </body> pada template kamu. Dan simpan template untuk melihat hasilnya. Semoga bermanfaat.
Sumber https://www.iwanberbagi.com