Cara Menambahkan Fungsi Text Resizer

Kita 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:

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.
```
button { 
    padding: 3px 15px; 
    float: right; 
    cursor:pointer; 
    margin:0 5px;
    }
.text-resizer { }
```
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'/>
```
Catatan: Lewati langkah ini, jika sudah menerapkan kode Jqueryscript meskipun dalam versi yang lain.

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 kita ubah ukuran teksnya, kita harus mengubah ini karena setiap halaman blog memiliki struktur yang berbeda, contoh bisa juga #post-body atau .sidebar kita 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.

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, pelajari lebih lanjut trik menampilkan dan menyembunyikan elemen.
Terakhir Save Template dan lihat hasilnya, semoga bermanfaat.

source

Cara Menambahkan Fungsi Text Resizer

0 comments:

Posting Komentar