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!
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'>7. Kemudian, cari kode <data:post.body/> lalu letakkan kode dibawah ini diatasnya.
/*----- 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'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: "sizecontroldiv", //id of special div containing your resize controls. Enter "" if not definedtargets: ["body"], //target elements to resize text within: ["selector1", "selector2", etc]levels: 10, //number of levels users can magnify (or shrink) textpersist: "session", //enter "session" or "none"animate: 200 //animation duration of text resize. Enter 0 to disable})</script>
Notes : Jika ada 2 kode, cari yang bekerja.
<b:if cond='data:blog.pageType == "item"'>9. Save template dan kamu berhasil!
<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'/> </a> <a class='mbt-text-resizer' href='#bigger'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYLdoGM2frHWW-fDJnia-wUhDe8wAlTP27r0uxS4T5WmDVQY2d4cO7oUzh6ySJZPJJwPsUtmBHUQkrB6ak0bnlgF0aq4D8rzqfo7_qssF63LvuCyXeIHCLmyzUi9wbPRsNWDdGVnciqI/s400/orangei.png'/>  </a><a class='mbt-text-resizer' href='javascript:mytextsizer.setFontLevel(0)' rel='nofollow'>Reset ↕</a></div></div></b:if>
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.
Comments :
0 komentar to “ Membuat widget pengatur besar kecil font pada blog ”
Posting Komentar
Aturan Berkomentar
1. No spam!
2. No live link!
3. No maho :D