Anak

pada tanggal
AAA 1
0

Cara Mudah Membuat Text Resizer Di Blog

pada tanggal
Aura Ilmu » Blog » Cara Mudah Membuat Text Resizer Di Blog
Oleh: Tatang Gunawan | Update Terakhir: 17 May 2017 | 0 Comment
Cara Membuat Text Resizer Di Blog. Text Resizer, mungkin anda telah menemukan banyak halaman Blog atau Website dengan tombol teks resizer. Elemen ini biasanya bisa berupa huruf seperti “A+” “A-” ataupun tombol kecil “AAA”, dimana tombol ini berfungsi untuk memperbesar dan memperkecil huruf pada sebuah artikel postingan. Dengan begitu setiap huruf yang tampil sifatnya dinamis bisa dirubah sesuai keinginan pembaca.
Menurut saya tombol ini sangat berguna bagi beberapa pengunjung, karena kebutuhan setiap pengunjung berbeda-beda, dari bagaimana mereka membaca artikel berupa teks dengan sebaik-baiknya atau senyaman mungkin dipandang.
Begitu pula dengan screen resolution setiap pengunjung pasti berbeda, karena jika menggunakan besar huruf yang standar akan terlihat berbeda di layar yang lain.
magnifying text
Image: magnifying text
Text Resizer Di Blog. Untuk membuatnya tidak terlalu sulit hanya beberapa kombinasi baris kode JavaScript dan CSS, ukurannya pun kecil sehingga tidak akan memberatkan loading blog. Anda dapat menyesuaikan ukuran huruf minimum dan maksimum dalam peningkatan atau penurunan, apakah dalam unit em atau pixel.
Tombol ini akan berfungsi setelah kode scriptnya terloading, menyesuaikan ukuran huruf manual pada bagian atau target tertentu di halaman blog. Contohnya bisa difungsikan hanya diwilayah posting utama, hanya di sidebar, di beberapa bagian tertentu, bahkan untuk seluruh halaman.
Berikut langkah-langkah cara membuat Text Resizer:
1. Masukan kode dibawah ini diatas ]]></b:skin> or </style> di bagian head.
Kode CSS untuk tombol dapat dimodifikasi tampilannya sesuai keinginan, isilah yang dalam kurung .text-resizer, jika dikosongkan akan menampilkan tombol standar.
1234567button { 
    padding: 3px 15px; 
    float: right; 
    cursor:pointer; 
    margin:0 5px;
    }
.text-resizer { }
2. Masukan kode JqueryScript di berikut diatas </head>
JQuery
1<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Catatan: Lewati langkah ini, jika sudah menerapkan kode Jqueryscript meskipun dalam versi yang lain.
3. Masih di bagian head, masukan kode JavaScript berikut diatas </head>
Javascript
1234567891011121314<script type="text/javascript">
  $('').ready(function() { 
  $('#incfont').click(function(){    
        curSize= parseInt($('.post-body').css('font-size')) + 2;
  if(curSize<=22)
        $('.post-body').css('font-size', curSize);
        });  
  $('#decfont').click(function(){    
        curSize= parseInt($('.post-body').css('font-size')) - 2;
  if(curSize>=12)
        $('.post-body').css('font-size', curSize);
        }); 
 });
</script>
Warna biru adalah contoh dari bagian yang ingin Anda ubah ukuran teksnya, Anda harus mengubah ini karena setiap halaman blog memiliki struktur yang berbeda, contoh bisa juga #post-body atau .sidebar Anda dapat menyesuaikan ukuran minimum dan maksimum, syukur kalo sama kode postingnya sama diatas, di sini dalam pixel (px) 12 dan 22, tetapi juga bekerja dengan baik dengan satuan em.
4. Masukan kode dibawah ini dimana saja ingin ditempatkan, misalnya di bagian atas posting, biasanya setelah/dibawah kode <div class="main-wrapper"> dan jika di sidebar bisanya setelah / dibawah kode <div class="sidebar-wrapper"> sedangkan untuk blog saya sendiri, memasukan kode berikut diatas <div class="post-body entry-content">
Catatan: mungkin kode main-wrapper atau sidebar berbeda-beda, jadi tinggal dicari saja.
HTML
1234<b:if cond='data:blog.pageType == "item"'>
<button class="text-resizer" id="incfont"><b>A+</b></button>
<button class="text-resizer" id="decfont"><b>A-</b></button>
</b:if>
Warna Hijau (mungkin diperlukan atau bisa dihapus) adalah baris kode tambahan supaya tombol hanya tampil di halaman posting saja, pelajari lebih lanjut trik menampilkan dan menyembunyikan elemen.
5. Terakhir Save Template dan lihat hasilnya, semoga bermanfaat.

Komentar

Posting Komentar