Belajar Nge-Blog: Membuat Efek List Menjorok di Blog

Membuat Efek List Menjorok di Blog

Greenwolf82 Sunday, May 8, 2011

Membuat Efek List Menjorok di Blog:
"Apakah anda sudah pernah melihat sebuah list yang menjorok. List ini akan menjorok ke dalam apabila cursor mouse berada disekitar posisi list tersebut. Oke mungkin kalian penasaran apa itu list yang menjorok. Blog Trik dan Tips akan memberikan trik bagaimana membuat list yang menjorok.

Berikut ini adalah langkah untuk membuatnya:
1. Login ke blogger
2. Klik Tata Letak dan Klik Edit HTML
3. Cari kode ini: </b:skin>
4. Paste kode dibawah ini setelah kode pada langkah 3

<script type='text/javascript'>
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + 5).toString() + 'px';
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + 'px';
}
</script>

Keterangan: Anda dapat mengatur seberapa jauh list tersebut menjorok ke dalam dengan mengubah angka kode berwarna merah

5. Untuk membuat list dalam postingan maka jangan lupa untuk memasang atribut ini:

<li onmouseover='lm_toRight(this)' onmouseout='lm_restore(this)'>

6. Jika anda ingin membuat semua list menjorok maka sisipkan kode berwarna biru pada kode di langkah 4

<script type='text/javascript'>
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + <span style="color: rgb(255, 0, 0);">5</span>).toString() + "px";
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + 'px';
}
</script>

function lm_loadBehavior() {
var lis = document.getElementsByTagName('li');
for(var i=0; i < lis.length; i++) {
var li = lis[i];
li.onmouseover = function(){lm_toRight(this);}
li.onmouseout = function(){lm_restore(this);}
}
}
var lm_window_onload = window.onload;
window.onload = function() {
if(lm_window_onload) {lm_window_onload();}
lm_loadBehavior();
}