Document Text Sizer-1

Rasa syukur mestinya harus selalu kita panjatkan kepada Tuhan yang maha mengasihi karena hingga detik ini kamu masih dikarunia mata yang sehat. Tapi pernahkah kamu berpikir bahwa beberapa di antara kita banyak juga yang mempunyai kemampuan melihat tidak lagi normal. Terlebih para orang tua yang sekalipun sudah pakai kacamata tebal tapi terasa masih susah juga untuk meniti huruf demi huruf. Document Text Sizer merupakan satu fungsi layanan bagi mereka yang kesulitan untuk membaca huruf-huruf dengan ukuran kecil. Kemampuannya untuk memperbesar teks dengan beberapa variasi ukuran pastilah akan sangat menolong.Sebelum mencoba , kamu bisa melihatnya dengan KLIK DEMO dan melihat bagaimana semuanya bekerja.

D E M O

Cara membuat Document Text Sizer-1 :

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.

Kode CSS, Javascript dan xHTML

<style type="text/css">
#GRdocsizer{position:fixed;bottom:0px;right:2px;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>

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

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

Catatan/Keterangan :

1. Untuk merubah posisi anda bisa merubah kode css :
   right:2px; dan bottom:0;
   Posisi di kanan = right, di kiri = left
   Posisi di atas = top, di bawah = bottom
   nilai 0 dan 2px untuk mengatur jarak dari atas atau bawah dan kanan atau kiri.
2. Saat anda gunakan di blog, sebaiknya gunakan gambar/image sendiri dengan cara mengupload image text sizer di blogger melalui halaman posting. Hal seperti ini sangat penting untuk menjaga agar loading blog tetap terjaga.

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

Update » Senen    KLIWON, Maret, 12, 2012

» Happy Blogging - gubhugreyot «