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 :
- Login keBlogger.
- Masuk ke"Tata Letak" kemudian "Edit HTML".
- Cari code </head> dan copy paste code JQuery berikut diatasnya :
- 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 :
# 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>
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 :
# 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>
</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.
keren banget...
pertamaxxxx..
keep post aja ya sob......
Seberapa berat dengan cara Resize Font tersebut sob,hehe....
Mantab tutorialnya sob
sob amuys@ g berat sob.. yg penting g bebani blog...
wah udah ada tutorialnya
lama gak maen, nambah keren aja nih blognya :D
berkunjung di tempat sahabatku yang lama tidak ketemu, berharap ada kunjungan balik + komen. salam sahabat....
Mantabs nich... makasih untuk tutorialnya sobat...
Langsung ijin copy scriptnya sob...
Pasti selalu ada yang bisa dipelajari disini. Makasih sobat untuk ilmunya...
Coba dulu ahhh... thanks sob
itu gunanya supaya apa sob??
layak untuk dicoba
Ahmad Ramadani@ tu untuk memperkecil dan memperbesar font postingan sob.
Waah...makin mantep aja tutorialnya Mas..!
TengKyu ya...
nice info sob...langsung ditest
kalau yg aq pasang di blog q bisa diganti dengan pilihan font yg tersedia selain itu ukurannya juga bisa dirubah sesuai yg tersedia
hohoh namabah ilmu nih
thx kak.. ilmu nambah font nya
di tunggu kunjungan baliknya yah
http://zona-ketawa-kita.blogspot.com/
Makasih tutornya...