Cara Membuat Text Sizer Menggunakan Javascript

Text Sizer ini mempunyai kemampuan optimal dalam memperbesar dan memperkecil seluruh teks blog. Akan sangat menolong bagi pengunjung yang mempunyai keterbatasan melihat teks karena berbagai sebab. Dengan teks sizer ini akan memungkinkan pula bagi blogger untuk menggunakan teks berukuran kecil karena ketika pengunjung akan menikmati posting tinggal klik saja untuk memperbesar teks. Anda bisa mencobanya dengan klik button smaller dan larger yang terletak di kanan-bawah halaman ini!

Agar mudah dalam pemasangan sekaligus mudah dilihat pengunjung, teks sizer kita posisikan di pojok kanan-bawah. Pengaturan dilakukan melalui kode css dengan memanfaatkan kode position:fixed;. Kode ini akan membuat teks sizer selalu pada posisinya (terlihat) sekalipun halaman digulung ke atas dan kebawah.

Kode CSS Text Sizer :

<style type="text/css">
#GRdocsizer{
        position:fixed;
        bottom:0px;
        right:10px;
        z-index:9;
}
a.GRsmallerdoc,a.GRlargerdoc{
        width:120px;
        height:16px;
        display:inline-block;
        background:#666 url(https://lh4.googleusercontent.com/-J9r40P1EQ0I/T1zUcuXx4NI/AAAAAAAAAVY/Tw5NmyhzNtg/s128/larger-doc.gif) center no-repeat;
        padding:4px;
        float:right;
        border:2px solid #930;
}
a.GRlargerdoc{
        background:#666 url(https://lh4.googleusercontent.com/-k7gcwGiLP6U/T1zUdx74xtI/AAAAAAAAAVg/zUUWMXfkxtI/s128/smaller-doc.gif) center no-repeat;
        border-right:0 solid;
}
a.GRsmallerdoc:active,a.GRlargerdoc:active{outline:none;}
</style>

Javascript Text Sizer :

<script type="text/javascript">
/* gubhugreyot */ //<![CDATA[
var tgs = new Array('div', 'td', 'tr');
var szs = new Array('xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large');
var startSz = 2;

function ts(trgt, inc) {
    if (!document.getElementById) return
    var d = document,
        cEl = null,
        sz = startSz,
        i, j, cTags;
    sz += inc;
    if (sz < 0) sz = 0;
    if (sz > 6) sz = 6;
    startSz = sz;
    if (!(cEl = d.getElementById(trgt))) cEl = d.getElementsByTagName(trgt)[0];
    cEl.style.fontSize = szs[sz];
    for (i = 0; i < tgs.length; i++) {
        cTags = cEl.getElementsByTagName(tgs[i]);
        for (j = 0; j < cTags.length; j++) cTags[j].style.fontSize = szs[sz];
    }
}
//]]>
</script>

xHTML Text Sizer :

<div id="GRdocsizer">
<a class="GRsmallerdoc" href="javascript:ts('body',1)"></a><a class="GRlargerdoc" href="javascript:ts('body',-1)"></a>
</div>

Cara Menggunakan text sizer :

Anda dapat menyimpan seluruh kode dalam box gadget HTML/Javascript atau dalam box Edit Template. Agar lebih mudah simpan saja dalam box gadget "HTML Javascript".

1. Login ke Blogger.
2. Setelah halaman Dasbor (Dasboard) terbuka, klik "Rancangan (Design)".
3. Selanjutnya anda akan masuk di "Rancangan | Elemen Laman" atau "Design | Page Element". Pada halaman "Add and Arrange Page Elements (Tambah dan Susun Elemen Laman)"ini akan terlihat beberapa box dengan garis terputus-putus yang bertuliskan "Add a Gadget" atau "Tambah Gadget". Klik salah satu "Add a Gadget" tersebut (yang manapun). Tunggu hingga sebuah window baru terlihat.
4. Tambahkan Gadget (Add a Gadget):
   
   • Cari dan klik "HTML/Javascript.
   • Setelah box penyimpanan kode terlihat, copy dan pastekan seluruh kode (kode CSS, Javascript dan xHTML) ke dalam box "HTML/Javascript.
5. Klik "SIMPAN (SAVE)"
6. Buka blog dan coba untuk memperbesar dan memperkecil teks dengan "klik" button yang terlihat di kanan-bawah halaman blog.

Catatan :

1. Panduan detail tentang cara menambah gadget bisa nada baca di sini.
2. Sebaiknya image yang digunakan anda upload sendiri di halaman blog agar loading blog tak terganggu.
3. Untuk merubah posisi text-sizer silahkan rubah pada right:10px; dan bottom:0;