Mengganti Ukuran Font Blogger Dengan Widget J-Query ~ Beda orang, beda selera. Itupun juga terjadi dalam mebaca. Setiap orang menginginkan Font yang berbeda beda, Right ?? maka dari itu kali ini hanif's blog akan memberikan tips mengenai masalah ini . Gimana caranya ?? Simak aja !!
1. Login Ke akun Blogger Sobat.
2. Design >> Edit Template
3. Temukan kode <head> (pake ctrl+F)
4. Taruh kode dibawah ini diatas kode <head>
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent('domready', function(){
var el = $('myElement'),
font = $('fontSize');
new Slider(el, el.getElement('.knob'), {
steps: 35, // Tamaño máximo de la letra
range: [8], // El 8 es el tamaño mÃnimo
onChange: function(value){
font.setStyle('font-size', value);
}
}).set(font.getStyle('font-size').toInt());
});
</script>
<style type='text/css'>
div.slider {
width: 97%;
height: 26px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKc6bkIx7NsMXRJ_5dd7xjU0uAU3q0hfaS5SlK7o1dy17pH93mIXLPloBGR5XUdAfMBvgPVCDJDijCU5E8Ht2PskqzqhoUt4dMWew3rSa1x9hOC5_01FqkJJDB33eVeMMSm5ipw8V5imc/) no-repeat right top;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #708B95;
margin-top:40px;
}
div.slider div.knob {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN2YyPOkbHQ6uY4uQysIQiGQWtgxjkzMauxg5U2i5rsdqfRJ3LSWMdO6ALry47emNrfzbKTDp-3IJH3Ka-IBCjAcWKAk_alFc-cLCkOHGB91u1q4GJKPIVegm5Sji6MnHTwBQVpT8XFTI/s400/allblogtools-pin.png) no-repeat;
width: 32px;
height: 47px;
margin:-35px 0 0 0;
cursor: move;
}
div#fontSize {
height: 40px;
}
</style>
5. Cari kode dibawahh ini / yang mirip dengan yang ada dibawah ini :
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
6. Dah ?? Jika udah taruh kode dan akan berubah seperti ini :
<span id='fontSize'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</span>
7. Jika udah, kita masuk ke intinya.
8. Klik Tata Letak >> Add New Gadget >> HTML / Javascript
9. Masukkan kode dibawah ini :
<div id="myElement" class="slider"><div class="knob">/div></div><p style="font-size:10px;
float:right; margin:3px;">Widget By <a href="http://www.hanifadzkiy.blogspot.com/" title="Blogger Templates" target="_blank">hanifadzkiy.blogspot.com</a> |
<a href="http://hanifadzkiy.blogspot.com/2013/06/mengganti-ukuran-font-blogger-dengan.html" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p>
10. SImpan Template.
No comments:
Post a Comment