You must enable Javascript in your browser to run or open this site.

Tombol Resize Text Webpage

Aduh sudah lama saya ingin sekali memposting artikel ini, tetapi apa boleh buat semua ini karna faktor kesibukan dan kelupaan ckckckck :D.

Sesuai judulnya, membuat tombol resize text pada webpage. Tombol resize text ini berguna untuk pengunjung yang tidak bisa membaca karna kekecilan dan kebesaran teks padahal kita sendiri bisa membacanya. Hehehe sama kayak saya ya ini? Maap maap saya gak pasang ini.. hehe. Dengan mengeklik tombol, otomatis tulisan teks pada blog akan membesar atau memperkecil Nah, cara atau trik ini tidak membuat masalah loading blog kok, tidak memperlambat lah. Contoh :


Nah, sudah melihat bukan kehebatan dari Resize Text ini. Mari kita simak liputan berikut untuk menjadikan Resize Text ini menjadi Widget :

• Pertama tama buka blogger.com dan login disitu

• Selanjutnya masuk ke Rancangan → Page Element → Add a Gadget → Javascript

Nah selanjutnya isi dengan kode berikut :
<script language="javascript">
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>
<center><a href="javascript:ts('body',1)"><img src="http://2.bp.blogspot.com/_wej_zr2VzN4/TR3MCN-az6I/AAAAAAAAA24/U9Yy2KYNKt4/s1600/format-font-size-more.png" title="Perbesar"/></a>
<a href="/"><img src="http://1.bp.blogspot.com/_wej_zr2VzN4/TR3NH6PO6YI/AAAAAAAAA3A/eeTsPlO4fwQ/s1600/normal.png" title="Normal"/></a>
<a href="javascript:ts('body',-1)"><img src="http://2.bp.blogspot.com/_wej_zr2VzN4/TR3MCAFOuZI/AAAAAAAAA2w/z6dlRMbLfWM/s400/format-font-size-less.png" title="Perkecil"/></a></center>
Kode Merah adalah kode icon memperbesar, kuning icon untuk normal, dan biru icon untuk memperkecil.

• Save dan lihat hasilnya menjadi dibawah.

17 comments

  1. oi...kasudnya gimana nih "berguna untuk pengunjung yang tidak membaca karna kekecilan dan kebesaran teks padahal kita sendiri bisa membacanya"

    BalasHapus
  2. coba di kasih contoh donk di blog kamu ris...saya mau coba,tapi gak sempet utak atik blog nih...

    BalasHapus
  3. wah.. bagus.. iya nnt tak coba luk da waktu.. hehehe.. :D
    HAPPY NEW YEAR YAW...

    BalasHapus
  4. @Dimas : Dengan mengeklik tombol, otomatis tulisan teks pada blog akan membesar atau memperkecil...
    Okelah saya taru diblog sebentar saja.. hehe

    BalasHapus
  5. wah mantaap nih , boleh di coba :D

    BalasHapus
  6. oke sy save dulu ya...nice post..

    BalasHapus
  7. Wah ternyata ini toh kodenya, makasih ya :)

    BalasHapus
  8. boleh juga nih sob, thanks ya

    knjung prdana...lam knal,

    BalasHapus
  9. @music terbaru : sama sama sob, thanks kunjungannya!

    BalasHapus
  10. istilahnya hover gitu ya???

    BalasHapus
  11. @dimas : kurangnya begitu, dicoba saja sob agar lebih mantaff..

    BalasHapus
  12. Nice post, dan ditunggu tutorial terbitan lainnya

    BalasHapus
  13. muantab sob, happy blogging

    BalasHapus