Rabu, Oktober 13, 2010


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:
<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



  • Login : login ke blogger terlebih dahulu.
  • Setelah Dasboard/Dasbor terlihat, klik "Design/Rancangan".
  • Lanjutkan dengan klik "Edit HTML".
  • Cari kode ]]></b:skin>.
  • Copy-paste kode CSS letakkan persis di atas kode tersebut.
  • SAVE Templates/Simpan Template : klik, kemudian buka halaman posting dan cobalah untuk membuat sebuah posting!

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:

Related Posts

11 komentar:

  1. Trims, semior. atas infonya, sekarang Blog aku sudah pakai scroll box posting. sekali lagi, trims

    BalasHapus
  2. blog yang sangat rapi dan menarik...salud

    BalasHapus
  3. Salam 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

    BalasHapus
  4. udah dicoba mba
    keren.....

    punya widget tab yang gampang dimodif ga?
    hehe......

    BalasHapus
  5. minta kode biar tampilan komentarnay kaya mba

    BalasHapus
  6. Terima kasih banyak sob...ini adalah soulusi problem saya sealama ini. Mantabs :)

    BalasHapus
  7. wah postingnya banyak yg menarik :)

    dan blognya jg bagus neh..support aja deh n keep writing :D

    BalasHapus
  8. blog nya keren banget,,,,

    pingin dong blog saya kaya gini,,

    Rapih banget

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. saran bro..
    kasih dong fasilitas searching khusus untuk blog ini..
    jadi lebih gampang mencari sesuatu
    ok bro

    kunjungi balik blog ane di..

    BalasHapus

 
Tantytm | Edited by | Tanty Template Modification