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:
Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:
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
Tutorial Menarik Lain
Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:
trims ats infrmsinya?
BalasHapusTrims, semior. atas infonya, sekarang Blog aku sudah pakai scroll box posting. sekali lagi, trims
BalasHapusblog yang sangat rapi dan menarik...salud
BalasHapusSalam Kenal Mba Tanti, mnta bantuannya dong…bisa di bilang saya baru belajar ngeblog, yang mau sy tanyakan, gmana sih cara menghilangkan Widget Posting Blog di elemen laman, alnya posting blog di elemen lamannya ada 2 jadi kelihatanya numpuk, bisa dilihat di Blog sy. Tolong dibantu Ya. Thank’s Mba
BalasHapusudah dicoba mba
BalasHapuskeren.....
punya widget tab yang gampang dimodif ga?
hehe......
minta kode biar tampilan komentarnay kaya mba
BalasHapusTerima kasih banyak sob...ini adalah soulusi problem saya sealama ini. Mantabs :)
BalasHapuswah postingnya banyak yg menarik :)
BalasHapusdan blognya jg bagus neh..support aja deh n keep writing :D
blog nya keren banget,,,,
BalasHapuspingin dong blog saya kaya gini,,
Rapih banget
Komentar ini telah dihapus oleh pengarang.
BalasHapussaran bro..
BalasHapuskasih dong fasilitas searching khusus untuk blog ini..
jadi lebih gampang mencari sesuatu
ok bro
kunjungi balik blog ane di..