Seringkali kita menjumpai area wrapper postingan dan sidebar blog yang tidak sama tinggi. Kadang sidebarnya lebih tinggi dibanding postingan, kadang malah sebaliknya. Berikut saya share 1 script sederhana yang akan membuat wrapper postingan dan sidebar sama tinggi.
Javascript ini akan aktif ketika loading halaman telah selesai. Cara kerjanya cukup sederhana, script akan mendeteksi wrapper paling tinggi dan menambahkan selisih tingginya ke sidebar sehingga di hasil akhir, keduanya sama tinggi.
Script ini bekerja di template 2 kolom, untuk template 3 kolom sendiri belum pernah uji coba, mungkin anda bisa memodifikasi scriptnya sehingga memungkinkan untuk 3 kolom... :D
Langkah-langkah instalasinya mudah:
- Copas script ini dan letakkan di dalam <head>
<script type='text/javascript'>
//<![CDATA[
function Sama_Tinggi(){
var mainwrapper=document.getElementById("main-wrapper"),sidebarwrapper=document.getElementById("sidebar-wrapper");Tinggisidebarwrapper=sidebarwrapper.offsetHeight;Tinggimainwrapper=mainwrapper.offsetHeight;Tinggimainwrapper>Tinggisidebarwrapper?(TinggiSisa=Tinggimainwrapper-Tinggisidebarwrapper+1,TinggiSisa2=0):(TinggiSisa=0,TinggiSisa2=Tinggisidebarwrapper-Tinggimainwrapper-1);mainwrapper.style.paddingBottom=TinggiSisa2+"px";sidebarwrapper.style.paddingBottom=TinggiSisa+"px";
}
//]]>
</script>
- Temukan tag <body>, kemudian tambahkan javascript onload event. Jadi hasil akhirnya seperti ini:
<body onload='Sama_Tinggi();'>
- Simpan template anda dan uji coba.. :D
Note:
- Silakan anda ganti div id main-wrapper (div postingan) dan sidebar-wrapper (div sidebar) sesuai nama div yang anda pakai di template.
Umumnya jika anda memakai template bawaan blogger, tidak usah lagi mengubah nama div diatas.
Selamat mencoba
Javascript ini akan aktif ketika loading halaman telah selesai. Cara kerjanya cukup sederhana, script akan mendeteksi wrapper paling tinggi dan menambahkan selisih tingginya ke sidebar sehingga di hasil akhir, keduanya sama tinggi.
Script ini bekerja di template 2 kolom, untuk template 3 kolom sendiri belum pernah uji coba, mungkin anda bisa memodifikasi scriptnya sehingga memungkinkan untuk 3 kolom... :D
Langkah-langkah instalasinya mudah:
- Copas script ini dan letakkan di dalam <head>
<script type='text/javascript'>
//<![CDATA[
function Sama_Tinggi(){
var mainwrapper=document.getElementById("main-wrapper"),sidebarwrapper=document.getElementById("sidebar-wrapper");Tinggisidebarwrapper=sidebarwrapper.offsetHeight;Tinggimainwrapper=mainwrapper.offsetHeight;Tinggimainwrapper>Tinggisidebarwrapper?(TinggiSisa=Tinggimainwrapper-Tinggisidebarwrapper+1,TinggiSisa2=0):(TinggiSisa=0,TinggiSisa2=Tinggisidebarwrapper-Tinggimainwrapper-1);mainwrapper.style.paddingBottom=TinggiSisa2+"px";sidebarwrapper.style.paddingBottom=TinggiSisa+"px";
}
//]]>
</script>
- Temukan tag <body>, kemudian tambahkan javascript onload event. Jadi hasil akhirnya seperti ini:
<body onload='Sama_Tinggi();'>
- Simpan template anda dan uji coba.. :D
Note:
- Silakan anda ganti div id main-wrapper (div postingan) dan sidebar-wrapper (div sidebar) sesuai nama div yang anda pakai di template.
Umumnya jika anda memakai template bawaan blogger, tidak usah lagi mengubah nama div diatas.
Selamat mencoba
SHARE THIS POST:
Untuk langsung menjalankan kode-kode HTML atau javascript, anda bisa menggunakan TryIt editor.
0 comments:
Post a Comment