Periksa Selidiki Analisis

search
Night Mode

Zoom text with CSS only

Jika dulu zoom text menggunakan jquery, sekarang mbah membuat zoom text yang hanya menggunakan CSS. Karena AMP HTML memiliki batasan,  seperti tidak boleh menambahkan javascript sendiri.

Mbah mencoba memanfaatkan CSS semaksimal mungkin, sehingga fitur yang biasanya menggunakan javascript tetap bisa digunakan hanya dengan CSS, tentunya dengan kelebihan & kekurangan jika dibandingkan dengan menggunakan javascript.

Fungsi dari Zoom text sendiri adalah untuk memperbesar ukuran font. Jadi jika pembaca kesulitan membaca dengan ukuran font yang kecil, pembaca dapat menggunakan fitur ini untuk memperbesar ukuran font sehingga lebih mudah untuk dibaca.

Berikut kode CSS beserta HTML :

CSS

/* Zoom Text by.MBahas.com */

:target {
font-size:20px;
}
.zoomr a{
float:right;
padding:10px;
white-space:nowrap;
text-decoration:none;
}


HTML

<div class='zoomr'>
<a href='#zoom' title='Zoom in Text'>+</a>
<a href='#' title='Normal Text'>-</a>
</div>

<div id='zoom'>

Konten

</div>


Letakkan kode HTML diarea Posting. Seperti di blog Mbahas.com id='zoom' diletakkan di <div class='post-inner' id='zoom'> Demo ada di sebelah area social share.

Dengan sedikit modifikasi cucu bisa memperbesar atau memperkecil ukuran font sesuai yang cucu inginkan. Selamat mencoba & berinovasi.