Floating Vertical Social Share Buttons With Counter

Masih dengan tombol membuatkan sosmed dari Donreach yang dilengkapi dengan konter penghitung klik berbagi, sekarang aku akan bagikan floating vertical social share buttons with counter. Floating vertical social buttos with counter ini merupakan modifikasi dari Donreach social share buttons.

Kita ketahui bahwa Donreach hanya menyediakan horizontal social share buttons, oleh sebab itu tombol membuatkan ini aku modifikasi menjadi tombol vertical yang ditampilkan melayang di sisi blog sebagai alternatif lain untuk memakai tombol membuatkan dari Donreach ini.

Selain dilengkapi dengan counter, tombol membuatkan ini juga cukup ringan untuk disimpan di blog sehingga cocok untuk dipakai oleh blog yang mengutamakan kecepatan.

DEMO

Untuk memakai atau menciptakan flotting vertical social buttons ini, silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Silahkan simpan isyarat CSS di bawah ini di atas isyarat </head>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>
 /*<![CDATA[*/
 .don-share{width:50px;padding:10px 10px 5px;margin:0 0 0 -91px!important;background:#fff;border:1px solid #ddd;border-right:0;border-radius:4px 0 0 4px;position:fixed!important;z-index:99999;bottom:30%;float:left;display:inline-block!important}
 .don-btn,.don-bubble-hover a .don-count,.don-share .don-btn-ico [class*=' don-ico-'],.don-share .don-btn-ico [class^=don-ico-]{width:50px!important}
 .don-share .don-share-total:after{position:absolute;top:40px!important;bottom:0!important;left:0;width:50px!important;height:2px;background:#ccc;content:"";margin-left:0!important}
 .don-share .don-share-total{line-height:18px;margin-right:0!important;position:relative!important;padding:0 0 15px!important}
 .don-share [class*=' don-share-'],.don-share [class^=don-share-]{margin:0 0 6px!important}
 .don-share .don-share-expand:before,.don-share.don-active .don-share-expand:before{line-height:20px!important}
 /*]]>*/
 </style>
 </b:if>

Perhatikan!
Kode margin:0 0 0 -91px!important; perlu di sesuaikan sebab tiap blog biasanya berbeda-beda. Perhatikan isyarat -91px harus diubahsuaikan kalau ternyata letak floating share button terlalu ke kiri atau mungkin kurang ke kiri. Makara silahkan hitung untuk angka tersebut dengan menjumlah lebar widget + padding kiri .post atau margin kiri .post-body.

Lebar widget = 71px

UPDATE:
Ma'af sebelumnya aku tidak memperhatikan untuk tampilan mobile. Di tampilan mobile, tombol share ini tidak dibentuk melayang sebab akan menutupi postingan, jadi akan berada di bawah postingan. Untuk itu silahkan tambahkan isyarat CSS di bawah ini untuk tampilan mobile pada CSS di atas.

 @media screen and (max-width:800px){
 .don-share{width:auto;margin:15px -10px 15px 0!important;padding:0;background:0 0;border:none;border-radius:0;position:relative!important;bottom:0;float:none;display:block!important}
 .don-share [class*=' don-share-'],.don-share [class^=don-share-]{margin:0 10px 10px 0!important}
 .don-share .don-share-total:after{position:absolute;top:0!important;bottom:0!important;left:50px;width:1px!important;height:100%;background:#ccc;content:"";margin-left:15px!important}
 .don-share .don-share-total{line-height:18px;margin-right:30px!important;position:relative!important;padding:0!important}
 .don-btn,.don-bubble-hover a .don-count,.don-share .don-btn-ico [class*=' don-ico-'],.don-share .don-btn-ico [class^=don-ico-]{width:45px!important}
 }

2. Langkah Kedua
Silahkan temukan isyarat menyerupai di bawah ini.

               <b:includable id='post' var='post'>
   <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='//schema.org/BlogPosting'>
 .............
 .............
 .............
 SIMPAN KODE HTML DI SINI
 </div>
 </b:includable>

atau isyarat yang menyerupai ini

               <b:includable id='post' var='post'>
   <article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
 .............
 .............
 .............
 SIMPAN KODE HTML DI SINI
 </article>
 </b:includable>

Kemudian silahkan simpan isyarat HTML di bawah ini pada isyarat di atas (SIMPAN KODE HTML DI SINI).

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class="don-share" data-style="icons" data-limit="5">
   <div class="don-share-total"></div>
   <div class="don-share-facebook"></div>
   <div class="don-share-twitter"></div>
   <div class="don-share-google"></div>
   <div class="don-share-linkedin"></div>
   <div class="don-share-pinterest"></div>
   <div class="don-share-tumblr"></div>
   <div class="don-share-stumbleupon"></div>
   <div class="don-share-reddit"></div>
   <div class="don-share-buffer"></div>
   <div class="don-share-pocket"></div>
 </div>
 </b:if>

3. Langkah Ketiga
Silahkan simpan isyarat javascript ini di atas isyarat </body>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/share-donreach.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
 //]]>
 </script>
 </b:if>

Selesai...kini blog Anda sudah mempunyai flotting vertical social buttons with counter. Silahkan cek halaman postingannya.


Sumber https://www.kompiajaib.com/

Share this post