Membuat Widget Resize Font / Text Size

Diposkan oleh Hery Prasetyo Wednesday, January 20, 2010
بسم الله الرحمن الرحيم

Hanya ingin sekedar sharing. berikut adalah cara membuat widget resize font pada blog. simple, mudah, dan sederhana, dan yang jelas tidak menambah berat blog. widget resize font berguna untuk memperkecil atau memperbesar font pada blog. seperti ini :



Berikut adalah caranya membuat dan memasang widget resize font atau font size :

- Login keBlogger.
- Masuk ke"Tata Letak" kemudian "Edit HTML".
- Cari code </head> dan copy paste code JQuery berikut diatasnya :

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>


- Simpan Template.

# Meletakkan widget pada sidebar :
- Masuk ke"Elemen Laman" tambah gadget "HTML/JavaScript".
- Copy paste CSS berikut didalamnya :

<style>
html {
font-size:13px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}

.post-body {
font-size:12px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}

</style>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('.post-body').css('font-size');
$(".resetFont").click(function(){
$('.post-body').css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $('.post-body').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('.post-body').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $('.post-body').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('.post-body').css('font-size', newFontSize);
return false;
});
});
</script>
<div id="sidebar">
<a href="#" class="increaseFont"><img src="http://sites.google.com/site/hapiamesir/javascript/plus.gif" title="Increase Font"></a>
<a href="#" class="decreaseFont"><img src="http://sites.google.com/site/hapiamesir/javascript/minus.gif" title="Decrease Font"></a><a href="#" class="resetFont"><img src="http://sites.google.com/site/hapiamesir/javascript/reset.gif" title="Reset Font"></a>
</div>


- Simpan.

# Meletakkan widget dibawah judul postingan :
- Masuk ke"Edit HTML" dan centang "Expand Template Widget".
- Copy paste code CSS diatas tadi dan letakkan dibawah code seperti dibawah ini :

<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

* CSS berwarna merah adalah ukuran asli font dan jika direset.

Selamat berkreasi. Jika postingan ini dirasa berguna bagi yang lain. silahkan share diLintasberita.com atau yang lainnya.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

18 Responses to Membuat Widget Resize Font / Text Size

  1. Yan futaki Says:
  2. keren banget...
    pertamaxxxx..
    keep post aja ya sob......

     
  3. Seberapa berat dengan cara Resize Font tersebut sob,hehe....
    Mantab tutorialnya sob

     
  4. HAPIA Mesir Says:
  5. sob amuys@ g berat sob.. yg penting g bebani blog...

     
  6. Jaka Utama Says:
  7. wah udah ada tutorialnya

     
  8. fajardesign Says:
  9. lama gak maen, nambah keren aja nih blognya :D

     
  10. den-adnan Says:
  11. berkunjung di tempat sahabatku yang lama tidak ketemu, berharap ada kunjungan balik + komen. salam sahabat....

     
  12. Rock Says:
  13. Mantabs nich... makasih untuk tutorialnya sobat...

     
  14. LL Says:
  15. Langsung ijin copy scriptnya sob...

     
  16. TRIK BLOG Says:
  17. Pasti selalu ada yang bisa dipelajari disini. Makasih sobat untuk ilmunya...

     
  18. E-BOOK Says:
  19. Coba dulu ahhh... thanks sob

     
  20. itu gunanya supaya apa sob??

     
  21. iswady Says:
  22. layak untuk dicoba

     
  23. HAPIA Mesir Says:
  24. Ahmad Ramadani@ tu untuk memperkecil dan memperbesar font postingan sob.

     
  25. Adrie Says:
  26. Waah...makin mantep aja tutorialnya Mas..!
    TengKyu ya...

     
  27. nice info sob...langsung ditest

     
  28. Rizky2009 Says:
  29. kalau yg aq pasang di blog q bisa diganti dengan pilihan font yg tersedia selain itu ukurannya juga bisa dirubah sesuai yg tersedia

     
  30. Syam Oby Says:
  31. hohoh namabah ilmu nih
    thx kak.. ilmu nambah font nya

    di tunggu kunjungan baliknya yah
    http://zona-ketawa-kita.blogspot.com/

     
  32. Makasih tutornya...

     

Post a Comment