Cara Buat Scroller Bar Blog Posts (Posting)

Bukan hanya di sidebar widget saja sebuah scroller bar dapat dibuat. Seluruh halaman posting (judul berikut artikel) atau sebagian halaman posting (hanya di artikel tidak termasuk judul) juga bisa dibuatkan sebuah scroller bar. Hanya dengan menambahkan beberapa kode CSS yang teramat sederhana maka jadilah sebuah posting dalam scroller box. Penggunaan scroller bar blog posts ini akan membuat halaman posting dapat diatur ketinggiannya (height) dan dalam bentuk yang seragam (sama) di semua posting. Apabila cara ini digunakan, halaman blog akan terlihat manis saat halaman utama di set menampilkan cukup banyak posting (lebih dari satu posting di halaman utama), karena semua posting akan tampak dengan ketinggian yang sama dan semuanya dalam bentuk scroller box. Dari 2 macam scroller bar blog posts, pilihan yang kedua (hanya artikel) menjadi alternatif terbaik karena judul posting (posts title) tidak terwadahi dalam scroller bar, sehingga akan selalu tetap terlihat. Sampeyan bisa mencoba membandingkan hasil dari 2 macam scroller bar blog posts kemudian menentukan pilihan yang terbaik.

Cara Membuat Scroller Bar Blog Posts

1. Login to BloGGeR (Login ke BloGGeR : Tuliskan User Name (Nama Pengguna) atau Email Address, kemudian tuliskan juga Password (Sandi) di box yang telah disediakan. Lanjutkan dengan KLIK Login.
2. Dasboard (Dasbor) : Setelah halaman Dasbor terbuka, KLIK Layout/Tata Letak atau Design/Rancangan. Tunggu beberapa saat hingga halaman baru terbuka.
3. Layout/Tata Letak (Design/Rancangan) : KLIK Edit HTML supaya kita dapat melakukan penambahan kode CSS baru.
4. Cari kode]]></b:skin>, kemudian letakkan kode CSS di atasnya. Lihat contoh di bawah ini :

.post{
     max-height:500px;
     overflow:auto;
     }
]]></b:skin>

5. KLIK SAVE Template (Simpan Template) kemudian Buka blog (open your blog) untuk melihat hasilnya.

Kode CSS yang digunakan untuk membuat scroller bar blog posts

Seluruh halaman posting dalam scroller box (termasuk judul) :

.post{
     max-height:500px;
     overflow:auto;
     }

Hanya Artikel yang terwadahi Sroller Box (judul tidak termasuk) :

.post-body{
     max-height:500px;
     overflow:auto;
     }

Keterangan/Catatan :

1. Gunakan Ctrl+F saat mencari kode di halaman Edit HTML supaya lebih mudah dan lebih cepat. Untuk membaca panduan penggunaan Ctrl+F di ketiga browser yang paling banyak digunakan saat ini, silahkan KLIK link di bawah ini :
   Panduan Cara Cepat Mencari Kode HTML Blog.
2. Tinggi scroller bisa disesuaikan dengan merubah nilai height (300px), pada kode max-height:300px;.
3. Agar tampilan scroller blog posts bertambah cantik dapat juga ditambahkan beberapa kode css yang lain seperti efek lengkung (rounded corner), box shadow, background image dan beberapa yang lain seperti misalnya hover.
4. Contoh bentuk penambahan kode CSS :

.post-body{
     max-height:500px;
     overflow:auto;
     border:2px solid #555;
     padding:10px 5px;
     border-radius:10px;
     -moz-border-radius:10px;
     -webkit-border-radius:10px;
     -goog-ms-border-radius;10px;
     -background:#fff url(http://s3.tinypic.com/29asgwl/gubhugreyot/images/bgPost.gif) top center repeat;
     }

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «

Panduan dan tutorial blogger tentang membuat scroller bar atau scroller box di halaman posting melalui penambahan kode CSS ini adalah bagian dari cara memodifikasi blog dan sebagai upaya untuk lebih mengenal kode html dan kode CSS yang dipergunakan untuk membangun sebuah desain dasar blog (template) di BlogSPOT.