Perbesar Perkecil Ukuran Huruf dengan jQuery
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 4:
.post-body {font-size:13px;font-family :"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;}
.changefont{padding:0; margin:0;}
.changefont img {border:1px solid #fff;padding:0;height:15px;width:15px;}
.changefont a {text-decoration:none;}
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var $jnoc = jQuery.noConflict();
$jnoc(document).ready(function(){
$jnoc(".changefont a").click(function(){
size = $jnoc(this).attr('rel');
switch(size) {
case 'reset' :
$jnoc(".post-body").css("font-size", "13px");
break;
case 'small' :
px = parseInt($jnoc(".post-body").css("font-size") != null ? $jnoc(".post-body").css("font-size") : "13");
if(px > 8) px--;
$jnoc(".post-body").css("font-size", px+"px");
break;
case 'large' :
px = parseInt($jnoc(".post-body").css("font-size") != null ? $jnoc(".post-body").css("font-size") : "13");
if(px < 24) px++;
$jnoc(".post-body").css("font-size", px+"px");
break;
}
return false;
});
});
//]]>
</script>
Langkah 8
Cari kode dibawah ini:
<data:post.body/>
Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:
<b:if cond='data:blog.pageType == "item"'>
<div align='right' class='changefont'>
<a rel='small' href='#'><img alt='Perkecil' src='http://lh6.ggpht.com/_xcD4JK_dIjU/S-WMoStLo0I/AAAAAAAAEDI/5UWDZLN92sQ/d/tekskec.jpg' title='Smaller'/></a> 
<a rel='reset' href='#'><img alt='Reset' src='http://lh5.ggpht.com/_xcD4JK_dIjU/S-WMohydu6I/AAAAAAAAEDM/roODP05nadQ/d/teksres.jpg' title='Reset'/></a> 
<a rel='large' href='#'><img alt='Perbesar' src='http://lh3.ggpht.com/_xcD4JK_dIjU/S-WMo8AmY2I/AAAAAAAAEDQ/H8Bz6PrwYvc/d/textbes.jpg' title='Larger'/></a> 
<a href='http://modification-blog.blogspot.com/' target='_blank' title="Blogger Tune-Up"><img src='http://lh4.ggpht.com/_xcD4JK_dIjU/S-WMoY89-yI/AAAAAAAAEDE/jfFuTdoOa3s/d/teksicon.gif'/></a>
</div>
</b:if>
Langkah 10
Simpan Template dan preview...
Diterbitkan pada hari : Jumat, Juli 02, 2010
Dalam kategori : JQUARY
Telah dibaca sebanyak kali, 0 komentar
0 komentar:
Posting Komentar
Jangan lupa komentar nya yahh...Select Profil dan pilih tipe log in untuk memberi komentar, atau pilih 'Anonymous' jika belum punya akun