Document Text Sizer-2 » Adding CSS3 on Text Sizer

Sebenaranya Document Text Sizer-2 mempunyai fungsi yang sama dengan Document Text Sizer-1. Jika Document Text Sizer-1 bisa merubah ukuran teks di seluruh blog, Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya seluruh bagian text sizer akan terlihat secara penuh sekaligus transparansi juga hilang. Efek transparansi dicipatakan melalui opacity property sedang efek animasi "muncul dan hilangnya" sebagian Text Sizer Controll dikendalikan dengan css3 transition dan margin.

D E M O

Javascript dan kode CSS di bawah ini sudah disertai dengan posisi peletakkan kode di template. Perhatikan teks yang berkedip! Kode tersebut yang harus dicari dan kode CSS serta javascript disimpan dalam posisi seperti ini.

Kode CSS & Javascript :

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

]]></b:skin>

<script type="text/javascript">
/* gubhugreyot *  */ //<![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.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];
    }
}

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; //szs[ 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>

xHTML :

<div class="GRsizerfix">
<div class="GRsizecontroll"><span>Text Sizer »</span><a class="GRsizer_controll" href="javascript:tsz('GRpost','9pt')">09</a><a class="GRsizer_controll" href="javascript:tsz('GRpost','10pt')">10</a><a class="GRsizer_controll" href="javascript:tsz('GRpost','11pt')">11</a><a class="GRsizer_controll" href="javascript:tsz('GRpost','12pt')">12</a><a class="GRsizer_controll" href="javascript:tsz('GRpost','14pt')">14</a><a class="GRsizer_controll" href="javascript:tsz('GRpost','16pt')">16</a><a class="GRsizer_controll GRright" href="javascript:tsz('GRpost','18pt')">18</a>
</div>
</div>

Cara menyimpan kode CSS, javascript dan xHTML:

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard):
   Klik Design (Rancangan).
3. Klik Edit HTML.
4. Lakukan Backup Template.
5. Cari kode ]]></b:skin>.
6. Letakkan Kode CSS di atasnya dan javascript di bawahnya.
7. Cari kode </body> kemudian letakkan xHTML di atasnya.
8. Klik Save Template (Simpan Template).
9. Lanjutkan dengan menggunakan kode untuk dokumen posting dg text sizer

Kode posting :

Kode untuk Posting dg Text Sizer:

<div id="GRpost">
Letakkan teks atau xhtml lain di sini di dalam id » GRpost
</div>

Catatan/Keterangan:

1. Anda akan mendapatkan panduan cara menyimpan kode css, javascript dan xHTML dengan cara berbeda melalui link demo.
2. Untuk merubah posisi controll text sizer rubah nilai bottom:0; dan right:-250px; pada kode CSS.
3. Untuk merubah besar ukuran teks pada text sizer, rubah nilai 9pt, 10pt ...dst pada javascript dan xHTML.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Senen    KLIWON, Maret, 11, 2012

» Happy Blogging - gubhugreyot «