Merapihkan Tampilan DonReach Share Buttons With Counts

Merapihkan Tampilan DonReach Share Buttons With Counts

Bola Hero Gawai

Merapihkan Tampilan DonReach Share Buttons With Counts

Merapihkan Tampilan DonReach Share Buttons With Counts
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.

DonReach Share Buttons With Counts

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 == &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>


Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

1 Comment

Thank you so much :-bd
|o|

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×