Tampilkan Posting dg Scroll Bar dan Scroll Box

Untuk membuatnya cukup sederhana karena hanya beberapa kode saja yang diperlukan, akan tetapi jika scroll bar akan dibuat dalam bentuk yang lebih bervariasi, anda bisa tambahkan beberapa kode CSS seperti background-color, background-image, border, border radius, padding serta beberapa kode yang lain.

Scroll bar untuk seluruh posting

Menggunakan Kode HTML di Halaman Posting

Apabila kita hanya akan menggunakan di saat-saat tertentu saja, kita dapat gunakan secara langsung kode HTML-nya di halaman posting. Kode HTML-nya seperti terlihat di bawah ini:

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

Anda juga bisa menambahkan beberapa kode CSS lain untuk membuat tampilan berbeda hingga akan terbentuk sebuah scroll box. Kodenya HTML-nya seperti berikut:

<div style="height:400px;overflow:auto;overflow-x:hidden;margin:4px;border:2px solid #888;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;padding:10px 8px;margin:3px;background:#111;">
Tempatkan Posting di sini!
</div>

Jika anda ingin menggunakan cara yang lebih praktis, silahkan gunakan kode CSS dan simpan di atas kode ]]></b:skin>

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

1.      Login : login ke blogger terlebih dahulu.

2.      Setelah Dasboard/Dasbor terlihat, klik "Design/Rancangan".

3.      Lanjutkan dengan klik "Edit HTML".

4.      Cari kode ]]></b:skin>

5.      Copy-paste kode CSS letakkan persis di atas kode tersebut.

6.      SAVE Templates/Simpan Template : klik, kemudian buka halaman posting dan cobalah untuk membuat sebuah posting!