Trik Mengubah Ukuran Tulisan Content Sesuai Keinginan User

cara mengubah font sesuai keinginan user

SeniKoding.com - Mengubah ukuran tulisan atau font dalam blog atau website saya rasa sangat diperlukan dan bermanfaat, karena mempermudah user untuk memperbesar atau pemperkecil tulisan sesuai keinginan.
Bagi yang pernah menggunakan CMS Joomla, pasti tahu salah satu fasilitas yang disediakan oleh joomla, yaitu fasilitas untuk mengubah ukuran font atau tulisan.

Belajar JQuery: Mengubah Ukuran Tulisan atau Font Konten Sesuai Keinginan User


Salah satu website yang menggunakan trik ini adalah okezone, di okezone font tulisan bisa kita atur sesuai keinginan, ada 3 ukuran yang dapat kita atur besar kecilnya.

mengatur font ukuran content
Pengaturan Font Okezone

Nah tak perlu cemas, karena tanpa CMS pun kita bisa 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 adalah 10px sedangkan ukuran maksimal font adalah 20px. Jika ukuran size font mencapai batas minimal, maka font tidak dapat dikurangi lagi. Begitu juga sebaliknya, jika font mencapai batas maksimal maka font tidak dapat 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 adalah tombol dengan id "perbesar", maka nilai font-size ditambah satu px sampai nilainya kurang dari 20px. Begitu pun sebaliknya, jika yang diklik adalah id "perkecil", sehingga nilainya dikurangi satu px sampai 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 seperti 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.
Jika berhasil maka tampil mirip seperti gambar dibawah ini

Mengubah Ukuran Font Sesuai Keinginan User

Mengubah Ukuran Tulisan


Terima kasih sudah membaca artikel saya berjudul Trik Mengubah Ukuran Tulisan Content Sesuai Keinginan User, semoga bermanfaat, nantikan artikel-artikel yang menarik lainnya :)

- salam -

Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "Trik Mengubah Ukuran Tulisan Content Sesuai Keinginan User"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -