Tampilkan Posting dg Scroll Bar dan Scroll Box

10.22.2011

Scroll Bar tidak hanya bisa digunakan di widget sidebar blog seperti yang biasa kita lihat. Bila kita mau, halaman posting bisa dibuat dalam bentuk scroll. Ada dua kemungkinan menempatkan sebuah scroll bar di posting blog.

Membuat seluruh posting dalam sebuah bingkai scroll box.
Hanya satu atau beberapa bagian posting yang terwadahi dalam scroll box.

Kedua model di atas, kedua-duanya harus dibuat dengan bantuan kode CSS supaya lebih mudah dan cepat dalam penulisan kode di halaman posting (di Mode Posting Edit HTML). Sekalipun demikian jika anda mau sedikit repot bisa juga kode HTMLnya dituliskan di halaman posting.

Pada model Scroll Bar yang pertama, seluruh posting akan terwadahi dalam scroll box. Tentu saja hanya pada artikelnya saja. Untuk judul posting, dia akan tetap pada posisi semula. Penggunaan model ini mengharuskan kita untuk membatasi tinggi scroll box supaya scroller dapat dibuat dan difungsikan. Ketinggian box sebaiknya dibuat dengan ketinggian minimal 400px agar halaman posting tidak terlalu pendek. Keuntungan posting dengan memanfaatkan scroll bar terutama akan terasakan bagi blogger yang sering membuat posting dengan artikel panjang lebar. Dengan pembatasan ketinggian scroll bar ini maka pengunjung atau pembaca blog tidak perlu menggulung halaman posting hingga ujung terbawah.

Model yang ke dua lebih fleksibel karena kita bisa memilih beberapa bagian tertentu dari posting untuk dimasukkan dalam scroll box. Beberapa "bagian posting yang khusus/special" mungkin bisa terwadahi di sini.

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:

Tempatkan Posting di sini!

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

Tempatkan Posting di sini!

Jika sobat ingin menggunakan cara yang lebih praktis, silahkan gunakan kode CSS dan simpan di atas kode ]]>

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:

Tempatkan posting yang akan di masukkan scroll box di sini!

Cara Menyimpan Kode CSS