Membuat widget pengatur besar kecil font pada blog

 
   Halo semua! Lama rasanya saya tidak posting di blog yang saya unggulkan ini. Saya mohon maaf karna tidak update posting selama 4 hari, karena saya sedang terjangkit virus. Sebut saja, virus 'bloging'. Maksudnya, beberapa hari ini saya lagi malas ngeblog. Malah, liat anime - anime keren. Hehehe. Oke, kembali ke tema. Posting kali ini saya akan bahas tentang Membuat widget pengatur besar kecil pada blog. Seperti apa widgetnya? Berikut screenshootnya!


Cara Pembuatan Widget
1. Login Blogspot
2. Menuju ke Template -> Edit HTML.
3. Klik Lanjutkan.
4. Centang Expand Template Widget, lalu pada keyboard komputer anda, klik CTRL dan F.
5. Setelah persiapan awal selesai, cari tag ]]></b:skin>
6. Copas kode berikut diatasnya.

<style type='text/css'>

/*----- Pengukur Font by Www.infoiki.blogspot.coM ------*/

.controlstyle a{ /*links inside DIV sizecontroldiv*/ 

outline:none; 

}

.controlstyle a img{ /*image links inside DIV sizecontroldiv*/ 

border-width:0; 

}

.controlstyle a.selectedcontrol img{ /*selected control&#39;s image*/ 

border-bottom:4px solid darkred; 

}

.mbt-text-resizer{ 

font-weight:bold!important; color:#F07727!important; text-decoration:none!important; font-family:arial,tahoma !important; font-size:16px!important; 

}

#mbt-text-resizer-container { 

margin:4px 0px; 

padding:4px; 

border-top:1px solid #ddd; 

border-bottom:1px solid #ddd; width:100%; 

} 

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script src='http://mybloggertricks.googlecode.com/files/text%20resizer.js' type='text/javascript'>

</script>

<script type='text/javascript'>

var mytextsizer=new fluidtextresizer({ 

    controlsdiv: &quot;sizecontroldiv&quot;, //id of special div containing your resize controls. Enter &quot;&quot; if not defined 

    targets: [&quot;body&quot;], //target elements to resize text within: [&quot;selector1&quot;, &quot;selector2&quot;, etc] 

    levels: 10, //number of levels users can magnify (or shrink) text 

    persist: &quot;session&quot;, //enter &quot;session&quot; or &quot;none&quot; 

    animate: 200 //animation duration of text resize. Enter 0 to disable 

})

</script>

7. Kemudian, cari kode <data:post.body/> lalu letakkan kode dibawah ini diatasnya.
Notes : Jika ada 2 kode, cari yang bekerja.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='mbt-text-resizer-container'> 

<div class='controlstyle' id='sizecontroldiv'> 

<font style='color:#666; font-weight:bold;'>Costumize Font Size : </font>  <a class='mbt-text-resizer' href='#smaller'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOo5C_UNqE4ULtIfv5GytKnYv3K4KMVoQldMQVuDO9wsH8QtAjF0UMRV2LHd_iKx3bNMSemgQRyubCVY3at_L8jV95AWktSfqQp1AUomULjEVUKXbmBxihELzlVcvkjCfoa0jxcWRlNVM/s400/oranged.png'/>&#160;</a>  <a class='mbt-text-resizer' href='#bigger'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYLdoGM2frHWW-fDJnia-wUhDe8wAlTP27r0uxS4T5WmDVQY2d4cO7oUzh6ySJZPJJwPsUtmBHUQkrB6ak0bnlgF0aq4D8rzqfo7_qssF63LvuCyXeIHCLmyzUi9wbPRsNWDdGVnciqI/s400/orangei.png'/>&#160;&#160;</a><a class='mbt-text-resizer' href='javascript:mytextsizer.setFontLevel(0)' rel='nofollow'>Reset &#8597;</a> 

</div> 

</div>

</b:if>

9. Save template dan kamu berhasil!

  Keterangan :
a). Kode berwarna merah, hapus kode tersebut jika anda menginginkan widget tampil di homepage dan posting saja.
b). Kode bercetak tebal, bisa anda ganti dengan teks kesukaan anda.