Cara Menambahkan Efek Scroll Pada Widget Bloglist

Cara Menambahkan Efek Scroll Pada Widget Bloglist  -  Hallo sobat blogger?? pada postingan kali ini saya akan berbagi kepada kalian yaitu Cara Menambahkan Efek Scroll Pada Widget Bloglist . Memang banyak orang yang menggunakan widget bloglist dari dari gadget blogger. Dengan memanfaatkan widget bloglist ini, kita bisa melihat artikel - artikel terbaru dari blog yang terdapat didalamnya, sehingga kita dapat mengetahui setiap topik bahasan dalam blog-blog tersebut.

     Sayangnya, jika isi dari widget bloglist ini terlalu banyak maka akan terlihat memanjang dan akan memenuhi halaman blog. Nah, maka dari itu fungsi scroll pada widget bloglist ini sangat berguna. Memang kelihatan sulit untuk menambahkan fungsi scroll, karena widget ini bukan merupakan HTML/JavaScript. Cara menambahkannya pun cukup mudah, hanya menambahkan perintah overflow, lalu atur tinggi dan fungsi scroll pun sudah jadi. Dan seperti yang kamu lihat, widget bloglist milik saya juga menggunakan fungsi scroll (pada sidebar yang berjudul Friend's link)

Mari kita simak Tutorialnya :

1. Langkah pertama, harus Login ke Account Blogger terlebih dahulu

2. Langkah kedua,  Bagi yang belum membuat widget bloglist, dapat lihat tutorialnya disini (bagi yang sudah punya tidak usah ikuti langkah kedua)

3. Masuk ke Template lalu Edit HTML

4. Jangan lupa untuk mencentang "Expand Template Widget"

5. Cari kode 'BlogList'

6. Perhatikan baik-baik kode dibawah ini :

<b:widget id='BlogList1' locked='false' title='Friend links' type='BlogList'>
<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' Sisipkan kode>

7. Tambahkan/sisipkan perintah style='overflow:auto; height:200px' pada kode yang berwarna biru

 sehingga menjadi seperti dibawah ini.

 <b:widget id='BlogList1' locked='false' title='Friend links' type='BlogList'>
<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'> 

Keterangan : Atur ukuran tinggi (height) sesuai kebutuhan

8. Sebelum Menyimpan Template, sebaiknya di pratinjau/preview terlebih dahulu untuk melihat apakah widget bloglistnya udah ditambahkan fungsi scroll atau belum

9. Bila sudah benar, Klik Simpan Template

Mudahkan ?? kita hanya perlu menambahkan perintah overflow, dan widget bloglistnya sudah mempunyai fungsi scroll. 

Kalau sobat masih tidak mengerti, sobat dapat bertanya pada kolom komentar di bawah ini.

Semoga bermanfaat :D

Share this post