Hidden Text Sizer

Ini sedikit berbeda jika dibandingkan dengan Text Sizer-1 yang berfungsi untuk merubah ukuran teks di seluruh halaman blog. Hidden text sizer diarahkan untuk bagian bagian tertentu saja (dokumen tertentu). Dengan sebuah id (GRpost) anda bebas untuk menentukan dokumen yang mana yang akan diberi fungsi sizer.

Satu hal lain yang membuat "Hidden Rext Sizer" berbeda adalah pada kode css yang dipergunakan. Penambahan css3 transition membuat text sizer yang tersembunyi akan bergerak secara perlahan memperlihatkan diri ketika cursor diarahkan di atasnya. Anda bisa memahami lebih jelas dengan mencoba fungsi text sizer dan peranan css3 dengan mencoba menggunakan text sizer yang ada pada ujung bawah-kanan halaman.

Menggunakan "Hidden Text Sizer" sangat mudah karena anda tinggal memasukkan dokumen di antara tag pembuja dan penutup dari div dengan id "GRpost".

Contoh cara menggunakan dokumen sizer:

Contoh xHTML :

<div id="GRpost">
Tuliskan teks di sini di antara tag pembuka dan penutup div
</div>

Kode yang digunakan membuat Hidden Text Sizer:

Kode CSS :

<style type="text/css">
.GRsizerfix{
        position:fixed;
        right:-250px;
        bottom:0;
        opacity:0.5;
        filter:alpha(opacity=50);
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.8s;
        -webkit-transition:0.8s;
        -ms-transition:0.8s;
}
.GRsizerfix:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        z-index:10;right:0;
}
.GRsizecontroll{
        background:#555;
        padding:6px 0;
        width:385px;
        margin:0 auto;
}
.GRsizecontroll span{
        padding:7px 8px 7px 12px;
        margin:0 8px;
        background:#aaa;
        font-size:18px;
        font-weight:bold;
        color:#000;
        text-shadow:2px 2px 2px #888;
}
a.GRsizer_controll{
        font-size:14px;
        font-weight:bold;
        display:inline-block;
        padding:4px 6px;
        margin:0;
        background:#aaa;
        border:5px solid #900;
        border-right-width:1px;
        background:#666;
        color:#fff;
        box-shadow:0 0 4px #eee;
}
a.GRright{
        border-right-width:5px;
}
a.GRsizer_controll:active{color:#888;outline:none;outline:0 solid;}
</style>

Javascript :

<script type="text/javascript">
//<![CDATA[
var tgs = new Array('div', 'td', 'tr', 'a');
var szs = new Array('9pt', '10pt', '11pt', '12pt', '14pt', '16pt', '18pt');
var startSz = 1;

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.GRtext_sizer = 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]
    }
}
function tsz(trgt, sz) {
    if (!document.getElementById) return
    var d = document,
        cEl = null,
        i, j, cTags;
    if (!(cEl = d.getElementById(trgt))) cEl = d.getElementsByTagName(trgt)[0];
    cEl.style.fontSize = sz;
    for (i = 0; i < tgs.length; i++) {
        cTags = cEl.getElementsByTagName(tgs[i]);
        for (j = 0; j < cTags.length; j++) cTags[j].style.fontSize = sz
    }
}
function resizeShort(short, summary) {
    short.setStyle({
        overflow: 'hidden'
    });
    if (summary) {
        var i = 0;
        var text = summary.innerHTML.stripTags();
        summary.update(text);
        while (short.scrollHeight > short.offsetHeight) {
            i++;
            if (i > 100) break;
            var text = summary.innerHTML;
            summary.update(text.replace(/\W*\w+\W*$/, ''))
        }
    }
}
//]]>
</script>

Cara menyimpan javascript dan kode CSS

1. Copy dan pastekan javascript dan kode css "Hidden Text Sizer" melalui Add a Gadget yang dapat di akses melalui:
   Dasbor » Rancangan (Design) » Elemen Laman (Page Elements).
2. Panduan cara menyimpan javascript dan kode css melalui Add a Gadget dapat anda baca melalui link di bawah ini:
   Panduan : Detail cara tambah gadget, kode css & javascript
3. Atau anda juga bisa melihat cara membuat Text Sizer-1 :
   Panduan Lengkap membuat Text Sizer - 1
4. Untuk merubah posisi Text Sizer lakukan pada kode CSS:
   
   • right:-250px;
     Untuk mengatur posisi ke kanan dan kiri.
   • bottom:0;
     Untuk mengatur jarak dari bawah.
   • Gunakan kode seperti pada Contoh xHTML di atas untuk menempatkan dokumen yang akan diperbesar atau diperkecil ukuran teks-nya.
5. Untuk merubah besaran perubahan font pada fungsi text sizer dapat dilakukan melalui javascript dan xHTML (9pt, 10pt ... dst).

Text Sizer »09101112141618