Teknik ini sebenarnya mirip dengan postingan saya sebelumnya tentang membuat area postingan dan sidebar sama tinggi, bedanya kalau script yang ini akan menambahkan scrollbar otomatis pada area postingan berdasarkan tinggi sidebar... :D
Terkadang blog anda tentu memiliki postingan yang sangat panjang sehingga tidak bisa mengimbangi tinggi sidebar. Hal ini tentu membuat blog menjadi kurang bagus dilihat. Dengan script ini maka postingan yang panjang itu bisa dijadikan scrollbar sehingga sidebar tetap kelihatan.
Langsung saja berikut cara menempatkan script ini di template blogger anda:
1. Buka menu edit HTML di blog anda, centang expand widget template
2. Paste script ini tepat diatas </body>:
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
var x = document.getElementById("sidebar-wrapper").offsetHeight-900;
var y = document.getElementById("postingan");
y.setAttribute("style","padding-right: 10px;overflow:auto; width:100%;height:"+x+"px;");
//]]>
</script>
</b:if>
3. Sebelum di save, anda harus sesuaikan dulu parameter-parameter berikut di blog anda:
- sidebar-wrapper = Sesuaikan dengan ID sidebar di blog anda
- 900 = Bisa anda ubah-ubah untuk menyesuaikan tinggi DIV postingan
- postingan = sesuaikan dengan div ID pada <data:post.body/>. jika post body tersebut belum diapit oleh div, maka cari <data:post.body/>, kemudian tambahkan div apit sehingga menjadi
<div id='postingan'>
<data:post.body/>
</div>
Save template anda dan lihat hasilnya.
Apa keuntungan menggunakan script ini?
Yang pastinya area sidebar tetap akan berada di jangkauan view pengunjung, sepanjang apapun postingannya.
Script ini hanya akan berjalan di halaman postingan. Kalau ada yang mau ditanyakan, silakan.. :D
Terkadang blog anda tentu memiliki postingan yang sangat panjang sehingga tidak bisa mengimbangi tinggi sidebar. Hal ini tentu membuat blog menjadi kurang bagus dilihat. Dengan script ini maka postingan yang panjang itu bisa dijadikan scrollbar sehingga sidebar tetap kelihatan.
Langsung saja berikut cara menempatkan script ini di template blogger anda:
1. Buka menu edit HTML di blog anda, centang expand widget template
2. Paste script ini tepat diatas </body>:
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
var x = document.getElementById("sidebar-wrapper").offsetHeight-900;
var y = document.getElementById("postingan");
y.setAttribute("style","padding-right: 10px;overflow:auto; width:100%;height:"+x+"px;");
//]]>
</script>
</b:if>
3. Sebelum di save, anda harus sesuaikan dulu parameter-parameter berikut di blog anda:
- sidebar-wrapper = Sesuaikan dengan ID sidebar di blog anda
- 900 = Bisa anda ubah-ubah untuk menyesuaikan tinggi DIV postingan
- postingan = sesuaikan dengan div ID pada <data:post.body/>. jika post body tersebut belum diapit oleh div, maka cari <data:post.body/>, kemudian tambahkan div apit sehingga menjadi
<div id='postingan'>
<data:post.body/>
</div>
Save template anda dan lihat hasilnya.
Apa keuntungan menggunakan script ini?
Yang pastinya area sidebar tetap akan berada di jangkauan view pengunjung, sepanjang apapun postingannya.
Script ini hanya akan berjalan di halaman postingan. Kalau ada yang mau ditanyakan, silakan.. :D
SHARE THIS POST:
Untuk langsung menjalankan kode-kode HTML atau javascript, anda bisa menggunakan TryIt editor.
0 comments:
Post a Comment