Membuat widget untuk Merubah Fontsize Dengan Gambar ...!

Sebelumnya kita sudah membuat widget untuk merubah ukuran fontsize, namun masih ada kekurangan yaitu tampilannya yang masih biasa. nah.. kali ini saya akan membagikan rahasia bagaimana cara membuat winget merubah fontsize lebih menarik yaitu dengan tampilan gambar sendiri ( tombol sendiri ).
Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :



langsung aja ya ...

1. Login ke blog kalian
2. masuk Ke rancangan
3. Masuk ke EDIT HTML ( jangan lupa back up template )
4. Sekarang kalian cari kode ]]></b:skin>
5. Copy script berikut dan simpan diatas kode ]]></b:skin>

/* ---Merubah Huruf by Azis lamayuda---*/
#GantiUkuran {
width: auto;
}
#GantiUkuran ul {
width: auto;
overflow: hidden;
margin: 0 0 10px !important;
padding: 0 !important;
list-style; none !important;
}
#GantiUkuran ul li {
width: 13px !important;
height: 13px !important;
overflow: hidden;
margin: 0 5px 0 0 !important;
padding: 1px !important;
display: block !important;
float: right !important;
border: 1px solid #CCCCCC !important;
}
#GantiUkuran ul li a {
width: 13px !important;
height: 13px !important;
display: block !important;
line-height: 10px !important;
text-align: center !important;
color: #FFFFFF !important;
font-size: 8px !important;
font-family: Tahoma !important;
text-decoration: none !important;
outline: 0 !important;
}
#ukuranFont a { text-indent: 0 !important; background: #333333 !important; }

6. Kemudian kalian cari kode </head> dan simpan script berikut diatasnya.

<script type='text/javascript'>
var min=8; var max=18;
function perbesarHuruf() {
var p = $('#main-wrapper');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
}
else {
var s = 13; }
if(s!=max) { s += 1; }
p[i].style.fontSize = s+"px" }
}
function resethuruf(){
var p = $('#main-wrapper');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
}
else { var s = 13; }
if(s!=min) { s = 13; }
p[i].style.fontSize = s+"px" }
}

function perkecilHuruf() {
var p = $('#main-wrapper');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
}
else { var s = 12; }
if(s!=min) { s -= 1; }
p[i].style.fontSize = s+"px" }
}
</script>

7. sekarang cari kode <data:post.body/>, lalu simpan script berikut diatasnya.

<div id='GantiUkuran'>
<div class='tuw-fcw'>
<ul id='ukuranFont'>
<li><a href='javascript:perbesarHuruf();' title='Increase Font'>+</a></li>
<li><a href='javascript:resethuruf();' title='Reset Font'>=</a> </li>
<li><a href='javascript:perkecilHuruf();' title='Decrease Font'>-</a> </li>
</ul>
</div></div>

untuk merubah dengan tampilan tombol sendiri kalian Hapus Script Tahap No. 7 dan ganti dengan script berikut:

<a href='javascript:perbesarHuruf();' title='Increase Font'><img src='URL GAMBAR KALIAN'/></a>
<a href='javascript:resethuruf();' title='Reset Font'><img src='URL GAMBAR KALIAN'/></a>
<a href='javascript:perkecilHuruf();' title='Decrease Font'><img src='URL GAMBAR KALIAN'/></a>

Keterangan :
== Jika Template tidak bisa disimpan, cari kode <p.length dan ganti tanda < dengan & l t ; (tanpa spasi)
== Kode warna Biru bisa kalian ganti dengan URL gambar anda
== Untuk peletakan nya widget ini jangan terpaku diatas kode <data:post.body/> kalian bisa meletakannya dimana saja tergantung template kalian, mau disimpan dibawah postingan, mau diheader, dll.

Menarik bukan...? semoga tips ini akan membantu dalam proses ngeBlog kalian, dan jangan lupa klik tombol share dibawah atau berikan komentarnya untuk artikel ini ya ... Terima kasih.