Cara Membuat Resizeable Font Menggunakan JQuery pada Blog

KURAZONE ~ Halo sahabat Kurazer, pernahkah kalian ketika berselancar di dunia maya untuk membaca berita dan tanpa sengaja berjumpa dengan 3 tombol resizeable font seperti dibawah ini?


Tiga tombol resizeable font tersebut saya jumpai pada situs okezone.com. Apakah kalian pernah menjumpai hal semacam itu? Jika pernah, maka topik pembahasan pada artikel kali ini adalah untuk membahas tentang 3 tombol resizeable font tersebut. Lebih tepat nya sih bukan tombol, tapi anchor. Karena setelah ditelusuri pembuatan resizeable font tersebut tidak menggunakan kode <button>, tetapi menggunakan <a> alias anchor yang dikombinasikan dengan JQuery.

Berikut adalah...

Cara Membuat Resizeable Font Menggunakan JQuery pada Blog

Memasang CSS Resizeable Font

1. Buka Akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode CSS ini dan letakkan diatas kode </style> atau ]]></b:skin> :
.kuraresizeable{display:inline-block;width:30%;float:right;text-align:right;height:30px;line-height:30px;}
.kuraresizeable a{color:#888888;padding:0 5px;}
.tambah{font-size:20px;}
.asli{font-size:15px;}
.kurang{font-size:12px;}
.kuracontent{font-size:15px;padding:10px 0;margin:40px 0 0 0;}
3. Simpan template dulu

Note :
  1. Jika menginginkan letak Resizeable Font berada disebelah kiri, maka ubah float:right; menjadi float:left;
  2. Ganti kode #888888 menjadi warna yang kalian inginkan. Ini untuk mengatur warna awal pada ketiga tombol
  3. Perhatikan class ".tambah", ".asli" dan ".kurang". Pada kode ini masing-masing dari mereka memiliki pengaturan font-size yang berbeda-beda. ".tambah" untuk mengatur font terbesar, ".asli" untuk mengatur font normal (sesuaikan dengan font-size yang digunakan pada template kalian, dikarenakan Kurazone menggunakan font 15px pada teks artikelnya, maka font-size pada settingan ".asli" juga menggunakan 15px. Nah, kalau di template kalian berapa nih? Silakan ditentukan sendiri). ".kurang" untuk mengatur font terkecil. Dalam tutor diatas ada font-size 20px, 15px dan 12px. Silakan disetting sesuai selera.
  4. Untuk bagian font-size pada kode ".kuracontent" sebaiknya font-size nya disamakan dengan font-size pada kode ".asli"
  5. Sisanya bisa kalian kembangkan sendiri
Darisini kalian sudah berhasil memasang CSS dari Resizeable Font, selanjutnya adalah meletakkan dimana Resizeable Font nya muncul

Meletakkan Resizeable Font

1. Copy kode HTML dibawah ini :
<div class="kuraresizeable">
<a href="javascript:void(0)" class="font-button tambah" title="Huruf besar">A</a><a href="javascript:void(0)" class="font-button asli" title="Huruf normal">A</a><a href="javascript:void(0)" class="font-button kurang" title="Huruf kecil">A</a>
</div>
2. Letakkan pada lokasi yang kalian inginkan, terserah deh mau diletakkan dimana.
3. Simpan template dulu
Darisini kalian sudah berhasil meletakkan Resizeable Font, namun Resizeable Font masih belum bisa digunakan karena belum ada perintah JQuerynya

Memasang JQuery Resizeable Font

1. Copy kode JQuery dibawah ini, lalu letakkan diatas kode < / body >:
<script>$(function () {
  $(".tambah").click(function(){
    $(".kuracontent").css("font-size","20px");
    $(this).css("color","red");
    $(".asli, .kurang").css("color","green");
  });
  $(".asli").click(function(){
    $(".kuracontent").css("font-size","15px");
    $(this).css("color","red");
    $(".tambah, .kurang").css("color","green");
  });
  $(".kurang").click(function(){
    $(".kuracontent").css("font-size","12px");
    $(this).css("color","red");
    $(".asli, .tambah").css("color","green");
  });
});</script>
2. Simpan template dulu

Note :
  1. Perhatikan kode "red" dan "green", kode ini digunakan untuk mengatur warna pada ketiga tombol A yang aktif dan non-aktif. Apabila tombolnya A nya aktif maka dia akan bewarna MERAH, sedangkan untuk tombol A yang tidak aktif akan bewarna HIJAU. Silakan kalian setting sesuai selera
  2. Untuk font-size kali ini harap nominal px nya disesuaikan dengan CSS yang ada diatas tadi (ada 20px, 15px dan 12px). Klik disini untuk menuju ke CSS yang dimaksud
Darisini kalian sudah berhasil memberikan fungsi JQuery Resizeable Font nya, selanjutnya mensetting bagian mana saja yang akan mendapatkan efek dari Resizeable Font tersebut.
Karena tujuan kita disini adalah memberikan efek Resizeable Font pada teks artikel, maka kita akan memberikan efek pada bagian <data:post.body/>

Mensetting bagian yang mendapatkan efek Resizeable Font

1. Cari kode ini :
<data:post.body/>
2. Kode tersebut biasanya lebih dari 1, silahkan kalian coba kode yang kedua atau ketiga (atau disesuaikan pada template blog kalian)
3. Ganti kode tersebut dengan kode dibawah ini :
<div class='kuracontent'><data:post.body/></div>
4. Simpan template dan lihat hasilnya

DEMO

Inilah adalah contoh atau demo dari fungsi Resizeable Font, silahkan klik salah satu dari ke-3 tombol A yang berada di atas kanan. Tulisan yang berada pada lingkup ini akan berubah-ubah ketika Resizeable Font nya dipilih sesuai selera. Pada demo ini tombol A yang aktif akan bewarna merah, sedangkan tombol yang tidak aktif akan bewarna hijau. Ini nanti bisa disetting sesuai selera kalian.

FYI :

Cara ini diperuntukkan untuk platform Blogger, apabila kalian menggunakan Wordpress mungkin bisa menggunakan plugin Accessibility Widget

Itulah informasi mengenai "Cara Membuat Resizeable Font Menggunakan JQuery pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck!!







أحدث أقدم