Make post in a scrollbox » Membuat Posting dalam Scroll Box

ScreenshootKlik untuk perbesar gambar.

Memasang atau menggunakan scroll box di posting blog adalah sebuah cara untuk mensiasati agar ketinggian halaman posting bisa dibuat lebih pendek ketika posting yang dibuat sangat panjang. Ini akan sangat menguntungkan karena dengan bentuk posting pendek membuat anda lebih mudah menata seluruh bagian blog agar dengan mudah terlihat oleh pengunjung. Ada dua macam scroll box yang bisa digunakan.

1. Scroll box posting yang bersifat permanen.
   Difungsikan pada keseluruhan entri sehingga seluruh posting yang anda buat secara otomatis akan termuat dalam scroll box.
2. Scroll box posting yang bersifat temporer.
   Anda cukup menambahkan sebuah fungsi scroll box dalam bentuk kode html saat posting dilakukan. Dengan cara ini anda bisa menggunakan scroll box posting saat tertentu ketika posting yang dibuat dirasa perlu untuk dibatasi ketinggiannya karena materi posting yang sangat panjang.

Scroll box posting Permanen:

Untuk membuat scroll box posting yang bersifat permanen anda harus menggunakan kode css dan disimpan di template.

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Design (Rancangan).
4. Pilih dan klik Edit HTML.
5. Amankan template terlebih dahulu (backup template) dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC.
6. Cari kode ]]></b:skin>. Agar lebih mudah dan lebih cepat mencari kode di template gunakan Ctrl+F.
7. Copy-paste kode CSS dan letakkan di atas kode ]]></b:skin>.
8. Selesai! Silahkan klik Simpan Template (Save Template).
9. Lakukan posting dan buka blog untuk melihat hasilynya.

Kode CSS Scroll Box Permanen:

.entry-content{
        max-height:700px;
        overflow:auto;
        padding-right:10px;
        border-top:5px double #777;
        border-bottom:5px double #777;        
}

Scroll box posting Temporer:

Scroll box yang bersifat temporer hanya digunakan atau dibuat pada saat-saat tertentu saja. Anda bisa membuatnya dengan bantuan kode css atau seluruh kode htmlnya dibuat di box posting. Menggunakan bantuan kode css bertujuan agar kode yang digunakan di box posting menjadi lebih simpel.

Dengan bantuan kode CSS

Kode css disimpan di atas kode ]]></b:skin> dan cara yang digunakan sama dengan panduan di atas.

Kode CSS Scroll Box Temporer dg Kode CSS:

.GRscrollboxpost{
        max-height:700px;
        overflow:auto;
        padding-right:10px;
        border-top:5px double #777;
        border-bottom:5px double #777;        
}

xHTML yang diperlukan untuk posting

Anda harus menambahkan sedikit kode html saat posting dan kode tersebut diletakkan di awal dan akhir posting. Posting dapat dilakukan di mode Compose atau mode Edit HTML, namun di awal atau akhir posting harus masuk ke mode Edit HTML untuk menambahkan kode html scroll box posting.

Kode html posting:

<div class="GRscrollboxpost">
Letakkan posting anda di sini di antara kode <div class="GRscrollboxpost"> dan kode penutupnya </div>
</div>

Scroll box Temporer tanpa kode CSS

Buat posting dalam bentuk seperti di bawah ini. Letakkan kode HTML tambahan melalui mode Edit HTML.

Kode html posting:

<div style="max-height:700px;overflow:auto;padding-right:10px;border-top:5px double #777;border-bottom:5px double #777;">
Letakkan posting anda di sini!
</div>

Catatan/Keterangan:

• Seluruh panduan dilakukan setelah melalui percobaan di Blogger Template Designer (Perancang Template Blogger).
• Untuk merubah tinggi scroll box posting lakukan perubahan nilai pada kode :
  max-height:700px;. Semakin besar maka scroll box semakin tinggi.
• warna border atas dan bawah dapat dirubah dengan merubah kode :
  border-top:5px double #777; dan border-bottom:5px double #777;