Jika anda ingin menggunakan cara yang lebih praktis, silahkan gunakan kode CSS dan simpan di atas kode]]></b:skin>
Kode CSS yang ke-2 ini digunakan apabila dihalaman posting kita buat dalam bentuk sebuah box seperti yang terlihat di halaman ini, atau seperti pada kode HTML yang ke-2 di bagian atas.
Untuk menggunakan scroll Box, gunakan kode berikut di halaman posting:
Kode CSS Scroll Bar Posting Blog
.post-body {
height: 400px;
overflow: auto;
overflow-x: hidden;
margin: 0;
padding: 0 10px 0 0;
}
Kode CSS Scroll Box Posting Blog
Kode CSS yang ke-2 ini digunakan apabila dihalaman posting kita buat dalam bentuk sebuah box seperti yang terlihat di halaman ini, atau seperti pada kode HTML yang ke-2 di bagian atas.
.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;
}
Keterangan
- Jika anda menggunakan kode CSS yang ke-2, warna background yang digunakan harus mendekati warna background halaman posting agar tampilan teks tidak kacau balau!
- Anda tidak perlu menambahkan lagi kode baru yang berkaitan dengan scroll bar atau scroll box. Posting tinggal dilakukan seperti biasa.
- Jika menghendaki perubahan tinggi scroll bar atau scroll box, rubahlah nilai height:400px; dengan nilai yang lain!
Scroll Box untuk beberapa bagian tertentu dari posting
.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;
}
Keterangan
Untuk menggunakan scroll Box, gunakan kode berikut di halaman posting:
<div class="scrollpost"> Tempatkan posting yang akan di masukkan scroll box di sini! </div>
Cara Menyimpan Kode CSS
Salam buat sobat blogger ... ...
Aku hanyalah seorang blogger yang kebetulan suka nulis, suka ngenet dan terutama suka uothak-uathik template blogspot. Bila sampeyan menyukai semua yang telah aku coba tulis dan terbitkan, aku hanya berharap bahwa semuanya bisa memberi manfaat dan mungkin juga bisa memberi dorongan untuk terus nglembur, nulis dan selalu memeras otak menuangkan hal-hal baru yang bermanfaat bagi pembaca. O, ....ya ..., Orang-orang atau tetangga sebelah biasa memanggil ku dengan sebutan si gubhug reyo gila, "yang suka melek malam dengan asap lintingan tak pernah telat". Yah ... moga-moga saja sampeyan semua nggak ikutan memanggil ku seperti para tetangga sebelah! Makacih, ya, atas kunjungannya. Maap nggak bisa kasih wedang kopi ma roti bolu!
Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
http://Iyan Bjm.blogspot.com
Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
http://Iyan Bjm.blogspot.com
Berhasil sob,
BalasHapusthx ya,
:D
mantap infonya boss..
BalasHapustapi kalo biar boxnya bisa variasi temanya itu gimana caranya??
wah mantap ni gan psostingannya, dah lama cari kayak gene, baru ne ketemu. . .makasih ya.
BalasHapus