Ditulis oleh: Ditulis pada: 6/20/2016
Beberapa waktu yang lalu saya memposting cara menggunakan social share buttons yang ringan dan responsive yang dilengkapi dengan jumlah share dari DonReach.Menurut saya tampilan default dari share button ini masih kurang rapih. Ketika tombol expand di-klik maka terlihat tampilannya yang kurang rapih karena tombolnya masih menjorok ke sisi kiri melebihi garis batas yang dibuat.
Sebenarnya pada postingan lalu, saya sudah mencoba merapihkan tampilannya agar garis batas dan tombol setelah 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 kode CSS yang saya buat pada postingannya.
Namun saya masih kurang sreg karena saya yakin konsep sebenarnya ketika tombol di-expand tidak seperti itu. Garis batas kiri yang membatasi total share dan tombol akan mengikuti tinggi ketika tombol di-expand namun tombol setelah expand tidak melebihi garis batas kiri.
Mencoba mengutak-ngatik tampilannya lagi, akhirnya 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 bisa 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 kode
</head> (Jika sebelumnya memakai CSS dari postingan sebelumnya, silahkan ganti dengan kode CSS di bawah.)
<b:if cond='data:blog.pageType == "item"'>
<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>