Membuat kode postingan anda bergaya tanpa javascript

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() { //mouse in
$(this).animate({ opacity: &#39;0.3&#39; } , 1000);
}, function() { //mouse out
$(this).animate({ opacity: &#39;1&#39; }, 1000);
});
});
</script>

<!-- end effectlink -->

Ini adalah trik sederhana membuat kode pada postingan anda sedikit berbeda,
tanpa menggunakan javascript, layaknya sintax highlighter, yaitu hanya dengan menggunakan kode CSS.

Jika anda tertarik membuat tampilan berbeda seperti contoh diatas, demikian caranya:

1. Masuk ke edit HTML
2. masukkan kode berikut di script CSS anda diatas kode berikut ]]></b:skin> :

/*code*/
.code {
display:block;
font-family:Courier New;
font-size:9pt;
width:360px;
overflow:auto;
repeat-y;
max-height:200px;
margin:5px 10px;
padding: 2px 15px 2px 25px;
background:url(http://i583.photobucket.com/albums/ss279/negativa/code.png) no-repeat left top; }

background image diatas dapat anda rubah sesuai selera anda.

3. Klik save template
4. Masuk ke postingan anda dan masukan kode berikut ditiap anda memposting kode:

<span class="code">
....ini tempat kode yang anda ingin posting
</span>

5. Selesai.

Posted in: Blogger,CSS / HTML,Tutorial