Membuat Font Text Resizer Di Blog

Mungkin anda telah menemukan banyak halaman Blog atau Website dengan tombol teks resizer. Elemen ini biasanya bisa berupa huruf seperti AAA ataupun tombol kecil, dimana tombol ini berfungsi untuk memperbesar dan memperkecil huruf pada sebuah artikel postingan.
Berikut langkah-langkah cara membuat Text Resizer.
1. Masukan kode dibawah ini diatas ]]></b:skin> atau </style> di bagian bawah <head>.
Kode CSS untuk tombol dapat dimodifikasi tampilannya sesuai keinginan, isilah yang dalam kurung .text-resizer, jika dikosongkan akan menampilkan tombol standar.

button { 
padding: 3px 15px; 
float: right; cursor:pointer; 
margin:0 5px; }
.text-resizer { }

2. Masukan kode JqueryScript di berikut diatas </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

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>

<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.

<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.

5. Terakhir Save Template dan lihat hasilnya, semoga bermanfaat.

Sumber : http://www.aura-ilmu.com

Membuat Font Text Resizer Di Blog

Apradiz Renfaan

0 Comment

Membuat Font Text Resizer Di Blog

Apradiz Renfaan

comment 0 Comment

0 Comment