Pada kesempatan yang lalu saya pernah membuat postingan tentang labels/kategory yang diberi fungsi scroll/menggulung yang ada di sini, dan kali ini saya akan menerapkan fungsi scroll ini pada kolom postingan/blog post yang tentunya tidak banyak memerlukan kode-kode yang membuat kepala pusing. Fungsi scroll pada kolom posting ini pada prinsipnya sama saja dengan yang ada pada labels bedanya kalau di kolom posting, sobat hanya perlu menambahkan dua baris kode css saja dan selain itu juga untuk penampilan dari blog sobat yaitu antara lebar dan tinggi kolom posting bisa sama antara yang satu dengan yang lain dan tentunya lebih hemat tempat selain itu kalau sobat menggunakan fungsi scroll ini sobat tidak perlu lagi memakai fungsi Read More, sekarang tergantung dari sobat sendiri mau memakai fungsi scroll atau Read More tinggal pilih saja, mau pakai keduanya juga tidak apa-apa.
Untuk cara membuat fungsi scroll ini seperti biasa sobat tinggal mengikuti langkah berikut ini :
1. Login ke Blogger.com dengan id sobat tentunya.
2. Klik Tata Letak.
3. Klik Edit Html dan jangan memberi centang pada kotak kecil disamping tulisan Expand Template Widget.
4. Seperti biasa juga download template lengkap dulu untuk berjaga-jaga bila ada kesalahan dalam editing kode template sobat bisa mengembalikannya seperti semula.
5. Langkah selanjutnya cari code CSS seperti ini :
.post {
bla bla bla
bla bla bla
bla bla bla
}
Kenapa saya tulis seperti itu? Karena pada tiap template kodenya berbeda-beda tapi yang paling penting sobat cari kode (.Post {) ini saja sudah cukup.
6. Selanjutnya sisipkan kode di bawah ini di antara kode-kode tersebut.
overflow: auto;
height : 200px; /* Ini adalah ukuran tinggi scroll */
sebagai contoh penambahan kode di atas seperti ini:
.post {
background:#F2F2F2;
width: 540px;
float: $startSide;
margin: 0 10px 10px;
padding: 10px;
border: 1px solid $bordercolor;
overflow: auto;
height: 200px; /* Ini adalah ukuran tinggi scroll */
}
7. Klik tombol Simpan Template
8. Selesai
Untuk cara membuat fungsi scroll ini seperti biasa sobat tinggal mengikuti langkah berikut ini :
1. Login ke Blogger.com dengan id sobat tentunya.
2. Klik Tata Letak.
3. Klik Edit Html dan jangan memberi centang pada kotak kecil disamping tulisan Expand Template Widget.
4. Seperti biasa juga download template lengkap dulu untuk berjaga-jaga bila ada kesalahan dalam editing kode template sobat bisa mengembalikannya seperti semula.
5. Langkah selanjutnya cari code CSS seperti ini :
.post {
bla bla bla
bla bla bla
bla bla bla
}
Kenapa saya tulis seperti itu? Karena pada tiap template kodenya berbeda-beda tapi yang paling penting sobat cari kode (.Post {) ini saja sudah cukup.
6. Selanjutnya sisipkan kode di bawah ini di antara kode-kode tersebut.
overflow: auto;
height : 200px; /* Ini adalah ukuran tinggi scroll */
sebagai contoh penambahan kode di atas seperti ini:
.post {
background:#F2F2F2;
width: 540px;
float: $startSide;
margin: 0 10px 10px;
padding: 10px;
border: 1px solid $bordercolor;
overflow: auto;
height: 200px; /* Ini adalah ukuran tinggi scroll */
}
7. Klik tombol Simpan Template
8. Selesai
