Trik Mengubah Ukuran Goresan Pena Content Sesuai Harapan User
- Mengubah ukuran tulisan atau font dalam blog atau website aku rasa sangat dibutuhkan dan bermanfaat, sebab mempermudah user untuk memperbesar atau pemperkecil goresan pena sesuai keinginan.
Bagi yang pernah memakai CMS Joomla, niscaya tahu salah satu akomodasi yang disediakan oleh joomla, yaitu akomodasi untuk mengubah ukuran font atau tulisan.
Belajar JQuery: Mengubah Ukuran Tulisan atau Font Konten Sesuai Keinginan User
Salah satu website yang memakai trik ini ialah okezone, di okezone font goresan pena sanggup kita atur sesuai keinginan, ada 3 ukuran yang sanggup kita atur besar kecilnya.
 |
| Pengaturan Font Okezone |
Nah tak perlu cemas, sebab tanpa CMS pun kita sanggup membuatnya, yaitu dengan memanfaatkan jQuery.
Yuuk kita buat scriptnya:
<!DOCTYPE html> <html> <head> <title>Mengubah ukuran font</title> <style type="text/css"> #content{ padding: 10px; width: 400px; border: 1px solid #ccc; } #perbesar, #perkecil{ padding: 5px; margin: 10px 5px 0 0; background: #eee; border: 1px solid #ccc; text-decoration: none; } </style> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#perbesar').click(function() { var ukuran=parseInt($('.paragraf').css('font-size'))+1; if(ukuran<20) { $('.paragraf').css('font-size',ukuran); } }); $('#perkecil').click(function() { var ukuran=parseInt($('.paragraf').css('font-size'))-1; if(ukuran>10) { $('.paragraf').css('font-size',ukuran); } }); }); </script> </head> <body> <div id="content"> <a href="#" id="perkecil">A-</a> <a href="#" id="perbesar">A+</a> <p class="paragraf">Klika pada A+ atau A- Untuk merubah ukuran size font pada paragraf ini. Ukuran minimal font ialah 10px sedangkan ukuran maksimal font ialah 20px. Jika ukuran size font mencapai batas minimal, maka font tidak sanggup dikurangi lagi. Begitu juga sebaliknya, kalau font mencapai batas maksimal maka font tidak sanggup diperbesar lagi. </div> </body> </html> Penjelasannya:
Pada script diatas, tombol untuk mengubah ukuran font diberi id "perbesar" dan "perkecil". Ketika salah satu tombol tersebut diklik, script akan mengambil nilai CSS font-size dari paragraf dan dijadikan integer dengan perintah javascript parseInt().
Jika yang diklik ialah tombol dengan id "perbesar", maka nilai font-size ditambah satu px hingga nilainya kurang dari 20px. Begitu pun sebaliknya, kalau yang diklik ialah id "perkecil", sehingga nilainya dikurangi satu px hingga nilainya diatas 10px.
Mengubah Ukuran Tulisan atau Font Konten Sesuai Keinginan User
Ayo kita coba, Trik Mengubah Ukuran Tulisan Sesuai Keinginan User caranya:
- Ketik script diatas dengan editor menyerupai notepad++ , sublime text atau yang lainnya.
- Save ke dalam folder latihan sobat.
- Jangan lupa file jQuerynya jquery-3.1.1.min.js.
- Jika sudah buka file latihan ini.
 |
Mengubah Ukuran Tulisan |
Terima kasih sudah membaca artikel aku berjudul Trik Mengubah Ukuran Tulisan Content Sesuai Keinginan User, biar bermanfaat, nantikan artikel-artikel yang menarik lainnya :)
- salam -