» » Fungsi Scroll Pada Kolom Posting

Fungsi Scroll Pada Kolom Posting

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

Dan Selamat Mencoba!

5 Responses to "Fungsi Scroll Pada Kolom Posting"

  1. ferygib9/5/10

    kalau cara membuat scroll nya langsung gimana ?
    saya udah coba cara anda, tapi scrool nya hanya pada setiap postingan saja.

    ReplyDelete
  2. Blogger Blitar10/5/10

    Ferygib => Fungsi scroll tersebut memang untuk tiap postingan bukan untuk keseluruhan halaman. Jika untuk keseluruhan halaman saat ini saya sedang mencari caranya.

    ReplyDelete
  3. Blogger Blitar10/5/10

    Ferygib => udah ketemu caranya sob
    cari code pada template seperti di bawah ini:

    .main .widget{ margin:0 0 1em; padding:0 0 1.5em;}

    kalo sudah ketemu tambahkan code seperti dibawah ini:

    overflow: auto;
    height: 400px;

    Sehinggga codenya menjadi seperti ini:

    .main .widget{ margin:0 0 1em; padding:0 0 1.5em; overflow: auto; height: 400px;}

    selesai, simpan template dan lihat hasilnya

    ReplyDelete
  4. Resna Tazkiyatunnafs21/8/10

    Asyik dah langsung pake, thanks

    ReplyDelete
  5. Jany Suak24/3/11

    yes akhirnya jadi........thanks bro.....

    ReplyDelete

PERHATIAN !...
*. Baca dulu artikel dan komentar yang ada sebelum Anda menulis komentar
*. Harap berkomentar dengan bijak dan sopan
*. Jika mengajukan pertanyaan, beri centang pada kotak disamping tulisan "Beri tahu saya" untuk mendapatkan jawaban melalui email
*. Dilarang menyertakan "LINK HIDUP", "IKLAN" "SPAM" dalam komentar karena akan dihapus atau dimasukkan ke dalam Comment Spam