Cara-Cara Menambahkan Efek scroll pada Widget Blog Supaya Keren

Kadang ketika kita ingin membuat penambahan fungsi scroll pada widget standar blogger yang kita pasang entah dihalaman sidebar dan footer seperti arsip blog, artikel populer dan atau lainnya, membuat kita bingung bagaimana cara memodifikasi setiap daftar widget tersebut? agar semua widget terdapat keseragaman dan sehingga tampilan halaman blog kita lebih terkesan menarik dipandang.

Selain itu juga dengan adanya fungsi scroll pada setiap widget akan menghemat ruang dihalaman sidebar atau pada halaman footer blog yang memanjang kebawah. Jadi untuk memodifikasi semua widget yang telah kita pasang sebelumnya, perlu dilakukan beberapa trik yang sangat sederhana. Oleh karenanya, untuk menerapkan trik tersebut, silahkan saudara mengikuti uraian singkat dibawah ini.

1. Masuk terlebih dulu ke blog blogger yang anda kelola, apabila sebelumnya sudah masuk, pada halaman draf blogger klik menu Template.

2. Backup template, untuk menjaga kemungkinan terjadi eror.

3. Lalu klik Edit HTML.

4. Beri tanda centang atau ceklis pada kotak Expand Template Widget.

5. Kemudian cari nama widget yang akan diberi fungsi scroll, caranya adalah sebagai berikut :

• Tekan Ctrl F pada keyboard, lalu ketik nama widget. Sebagai contoh : daftar widget Artikel Populer, maka lihat nama widget pada blog yang anda kelola untuk mencari pada editor template.

• Contoh struktur widget artikel populer pada editor template Krang Francisco adalah sebagai berikut :

<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content popular-posts'>

……………….Rangkaian Kode disini………………………

</div>

</b:includable>

</b:widget>

• Atau contoh widget Like, Follow & Review seperti pada halaman sidebar disamping, struktur rangkaian kode dalam editor template Kraeng Francisco adalah sebagai berikut :

<b:widget id='HTML3' locked='false' title='Like, Follow &amp;amp; Review' type='HTML'>

<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'>

<data:content/>

</div>

</b:includable>

</b:widget>

• Apabila telah menemukan nama widget yang ingin anda tambahkan fungsi scroll, letakkan kode berikut : <div style='overflow:auto; width:auto; height:250px;'> tepat dibawah kode <div class='widget-content popular-posts'> atau <div class='widget-content'>.

• Kemudian scroll kebawah cari lagi kode </b:includable> atau untuk mempermudah jika dalam editor template anda terdapat kode <b:include name='quickedit'/>, letakkan kode </div> tepat diatas kode tersebut, sehingga terbentuk seperti struktur kode dibawah.

<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content popular-posts'>   <<<<<<<<<perhatikan bagian ini.

<div style='overflow:auto; width:auto; height:250px;'>

……………….Rangkaian Kode disini………………………

</div>

</div>

</b:includable>  <<<<<<<<<perhatikan bagian ini.

</b:widget>

Atau seperti contoh dibawah

<b:widget id='HTML3' locked='false' title='Like, Follow &amp;amp; Review' type='HTML'>

<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'> <<<<<<<<<perhatikan bagian ini.

<div style='overflow:auto; width:auto; height:250px;'>

<data:content/>

</div>

</div>

</b:includable> <<<<<<<<<perhatikan bagian ini.

</b:widget>

6. Untuk melihat hasilnya klik tombol pritinjau, apabila berhasil maka sebagai contohnya perhatikan pada gambar berikut yang telah jadi.

7. Jika sudah, Simpan Template anda dan Tutup kembali editor template.

8. Selesai.

Keterangan :

• Untuk mempermudah cara mencari nama widget selalu gunakan Ctrl F, lalu ketik nama widget seperti pada contoh uraian diatas.

• 250px adalah tinggi scroll, anda bisa menyesuaikan dengan kebutuhan, misalnya menjadi 100px, 150px atau 200px.

• <div class='widget-content'>, sebagai kunci utama untuk meletakkan kode pembuka <div style='overflow:auto; width:auto; height:250px;'>, dibawahnya. Anda bisa melihat perbedaannya pada contoh struktur widget Artikel Populer dan Like, Follow & Review.

• </b:includable> dan <b:include name='quickedit'/> sebagai tempat penutup kode </div>, diatasnya.

• Jika sebelumnya anda pernah menghapus kode <b:include name='quickedit'/>, letakkan kode penutup </div> tepat diatas </b:includable>, seperti pada contoh diatas.

Selamat mencoba, sekian dan terima kasih.

Salam…