Subscribe:

Selasa, 12 Juli 2011

Cara Membuat Scroll Pada Daftar Blog (Bloglist) Blogspot

Banyak sobat yang menggunakan gadget Bloglist (Daftar Blog) dari fasilitas blogger/blogspot pada sidebar blognya. Memang ada keuntungan disana. Dengan memamfaatkan gadget Bloglist ini kita bisa melihat setiap artikel-artikel terbaru dari blog-blog yang terdapat di dalamnya, sehingga kita dapat dengan mudah mengetahui setiap perkembangan dan topik bahasan artikel dari blog-blog tersebut.

Sayangnya, jika isi Bloglist ini terlalu banyak maka akan terlihat memanjang sehingga memenuhi halaman blog, dan kadang melebihi panjang halaman artikel yang dimuat. Bahkan sekalipun kita memilih opsi terpendek (5 blog yang ditampilkan), tetap saja apabila kita klik "selengkapnya" (Show all) padaBloglist tersebut maka akan memanjang memenuhi halaman blog. Tentu saja hal ini terlihat kurang rapih dan menarik.

Untuk mengatasi hal itu kamu bisa menambahkan perintah scroll. Sepintas memang kelihatan sulit untuk menambahkannya karena gadget-nya bukan berupa HTML/JavaSript. Tapi sebenarnya cukup mudah dan simpel, kamu hanya cukup menambahkan perintah overflow dan mengatur ukuran tinggi(height)-nya, seperti terlihat pada blog Sastra Culun.

Untuk mengetahui lebih jelas cara membuatnya kamu dapat mengikuti langkah-langkah berikut:

  • Dari halaman dasbor, klik Tata Letak - Edit HTML.
  • Beri tanda centrang pada Expand Template Widget.
  • Kemudian cari kode type='BlogList' (gunakan Control F atau F3).
  • Perhatikan kode yang ada di bawahnya, seperti ini: 
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>

    <div class='widget-content'>
  • Tambahkan perintah style='overflow:auto; height:200px' pada kode yangberwarna biru, sehingga menjadi seperti ini:
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>

    <div class='widget-content' style='overflow:auto; height:200px'>
  • Atur ukuran tinggi (height)-nya sesuai kebutuhan.
  • Simpan hasil editing ini dan ucapkan Alhamdulillah.....
Catatan:
Jika muncul bullets selain logo blogger pada Bloglist tersebut, itu karena CSS untuk widget pada blog kamu diatur seperti itu. Untuk menghilangkannya, cukup kamu hapus kode class='widget-content'pada script di atas.


Nah, segitu aja sob, semoga bermanfaat dan bisa dimengerti. 
Selamat mencoba....

0 komentar:

Mohon Berkomentarlah dengan Baik dan Sopan
Maaf, jika ingin menyertakan url mohon di LINK saja ya (NO http://) atau komentar hanya sekedar promosi akan di hapus. Thank's ^_^

Posting Komentar