Cara Membuat Widget Font Sizing Automatic Pada Post Blog Anda dengan Mudah dan Cepat

Satria Perwira    9/29/2012    Trixs Blogging   

Cara Membuat Widget Font Sizing Automatic Pada Post Blog Anda dengan Mudah dan Cepat

Rafi Orilya Groups, wah.. lama yah, saya tidak update blog ini. Mungkin gara-gara kegiatan sekolah yang lagi numpuk-numpuknya nih, maklum murid baru. Yaa.. masih kaya gitu deh. Tapi kali ini saya sempatkan waktu buat tulis post tentang Cara Membuat Widget Font Sizing, jadi Font Sizing maksudnya tuh, pengunjung dapat dengan mudah mengatur font tulisan pada artikel blog anda. Hanya dengan mengekliknya maka akan otomatis bertambah besar/kecil.

Berikut langkah-langkahnya :

1.  Login blogger anda
2.  Masuk pada Template => Edit HTML
3.  Kemudian cari code ]]></b:skin>
4. Selanjutnya copas script dibawah ini tepat diatas code tadi :

#resizeFontbtn{<br /> text-align:right;<br /> margin-right:10px;<br /> }

5. Kemudian cari code </head>

6. Lalu copas script dibawah ini tepat diatas code tadi :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#content-wrapper&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

7. Kemudian kembali cari code <div class='post-header'>
8. Copas script dibawah, lalu pastekan diatas code tadi :

<div id='resizeFontbtn' style='width:99.5%; height:20px;'><div style='background:#FFBD00; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px; padding:2px; width:99.5%; height:20px; font-weight:bold; text-align:center; font-size: 12px; font-family: &quot;Trebuchet MS&quot;,sans-serif;'><input id='small' style='font-family: Arial,Helvetica,sans-serif; border:0px solid #fff; cursor:pointer; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px; ' type='button' value='-'/> <input id='reset' style='font-family: Arial,Helvetica,sans-serif; font-size:normal; border:0px solid #fff; cursor:pointer; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px; ' type='button' value='N'/> <input id='large' style='font-family: Arial,Helvetica,sans-serif; border:0px solid #fff; cursor:pointer; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px; ' type='button' value='+'/></div></div><br/>

9. Save Template

Gimana mudah bukan, cara membuat widget font sizing-? Semoga bermanfaat, yaah. Mohon maaf jika ada kesalah tulisan dari saya.

Artikel Dilindungi
Sertakan alamat blog ini jika mengcopy paste
Hak Cipta Dilindungi

Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin