Membuat Posting Blog Dengan Scroll

Kadang kita ingin menampilkan sebuah postingan yang panjang, namun dengan postingan yang panjang tersebut dapat terasa mengganggu dan membosankan. Nah, agar postingan kita tidak terlihat panjang, coba sekali – kali gunakan postingan dalam bentuk scroll box atau scroll bar.
Berikut caranya :


Membuat seluruh postingan dalam bentuk scroll box
1.Masuk blogger dan login
2.Edit HTML dan pilih Expand
3.Paste kode CSS berikut di atas kode ]]></b:skin> (Gunakan Ctrl + F untuk mencari)

Jika ingin menggunakan Scroll Bar, berikut kodenya

.post-body {
height: 400px;
overflow: auto;
overflow-x: hidden;
margin: 0;
padding: 0 10px 0 0;
}

Jika ingin menggunakan Scroll Box, berikut kodenya

.post-body {
height: 400px;
overflow: auto;
overflow-x: hidden;
margin: 0;
padding: 10px 8px;
border:2px solid #888;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background:#111;
box-shadow:-1px -1px 1px #eee, 1px 1px 10px #fff;
-moz-box-shadow:-2px -2px 2px #eee, 2px 2px #eee, 1px 1px 10px #fff;
-webkit-box-shadow:-2px -2px 2px #eee, 1px 1px 10px #fff;
}

4.Simpan template, dan setiap kali kita posting maka akan berbentuk scroll box / bar


Membuat seluruh postingan dalam bentuk scroll box hanya saat – saat tertentu saja
Untuk menggunakan scroll bar hanya pada saat saat tertentu saja, gunakan kode berikut

<div style="height:400px;overflow:auto;overflow-x:hidden;padding:0 10px 0 0;margin:0;">
Tempatkan Posting di sini!
</div>

Membuat sebagian postingan tertentu dalam bentuk scroll box
1.Masuk blogger dan login
2.Edit HTML dan pilih Expand
3.Paste kode CSS berikut di atas kode ]]></b:skin> (Gunakan Ctrl + F untuk mencari)

.scrollpost {
height: 200px;
overflow: auto;
overflow-x: hidden;
margin: 15px 0;
padding: 10px 8px;
border:2px solid #888;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background:#111;
box-shadow:-1px -1px 1px #eee, 1px 1px 10px #fff;
-moz-box-shadow:-2px -2px 2px #eee, 2px 2px #eee, 1px 1px 10px #fff;
-webkit-box-shadow:-2px -2px 2px #eee, 1px 1px 10px #fff;
}

4.Simpan template
5.Lalu, setiap kita akan posting, gunakan kode ini dalam postingan kita.

<div class="scrollpost">
Tempatkan posting yang akan di masukkan scroll box di sini!
</div>

Semoga bermanfaat

Artikel Terkait