Merapihkan Tampilan Donreach Share Buttons With Counts

Beberapa waktu yang kemudian aku memposting cara menggunakan social share buttons yang ringan dan responsive yang dilengkapi dengan jumlah share dari DonReach.

Menurut aku tampilan default dari share button ini masih kurang rapih. Ketika tombol expand di-klik maka terlihat tampilannya yang kurang rapih sebab tombolnya masih menjorok ke sisi kiri melebihi garis batas yang dibuat.

Sebenarnya pada postingan lalu, aku sudah mencoba merapihkan tampilannya semoga garis batas dan tombol sesudah expand tidak bentrok dengan merubah posisi absolute garis batasnya menjadi absolute terhadap total share sehingga meski tombol di-expand maka garis batasnya tidan ikut memanjang ke bawah. Bisa dilihat dari arahan CSS yang aku buat pada postingannya.

Namun aku masih kurang sreg sebab aku yakin konsep bahu-membahu saat tombol di-expand tidak ibarat itu. Garis batas kiri yang membatasi total share dan tombol akan mengikuti tinggi saat tombol di-expand namun tombol sesudah expand tidak melebihi garis batas kiri.

Mencoba mengutak-ngatik tampilannya lagi, alhasil tampilan share button ini menjadi lebih rapih. Bisa dilihat dari animasi gif di bawah ini yang membandingkan tombol aslinya dengan tombol yang sudah diperbaiki.


Live demonya dapat dicoba tombol share di halaman postingan ini atau DI SINI.

Bagaimana, lebih rapih bukan?

Jika Anda juga menggunakan tombol share ini dan tampilan expand-nya ingin rapih silahkan tambahkan CSS di bawah ini di atas arahan </head> (Jika sebelumnya menggunakan CSS dari postingan sebelumnya, silahkan ganti dengan arahan CSS di bawah.)

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>
 .don-share{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{line-height:20px!important}
 </style>
 </b:if>

Sumber https://www.kompiajaib.com/

Share this post