Sebenarnya membuat scroll pada widget blog sangatlah mudah sekali.Hanya butuh waktu kurang dari 5 menit dan hanya perlu teliti saja dalam melakukan tips dan trik blog atau tutorial blogger ini.Fungsi dari scroll disini adalah untuk membuat tampilan lebih praktis dan terkesan rapi pada widget yang lebar dan panjang.Jadi, bagaimana Cara Membuat Scroll Pada Widget Blog ?Silahkan ikuti tutorial berikut.
1. Login ke Acount Blogger, lalu pergi ke Dashboard Blog
2. Pilih Layout ( jangan lupa backup layout )
3. Klik Edit HTML
4. Lalu jangan lupa Centang dulu Expand Widget Templates
6. Kemudian tekan CTRL + F pada keyboard untuk memudahkan pencarian kemudian pastekan kode ini <b:widget id=
7. Setelah ketemu pasti akan lebih dari satu kode " <b:widget id= " pada halaman HTML blog anda
8. Cari kode <b:widget id= dengan title widget yang ingin anda beri Scroll.Di dalam Tutorial Cara Membuat Scroll Pada Widget Blog ini saya akan memberi Scroll pada widget dengan title " Link Sahabat " dengan kode fullnya sebagai berikut
</b:includable>Keterangan kode :
</b:widget>
<b:widget id='BlogList1' locked='false' title='Link Sahabat' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
- title='Link Sahabat merupakan title dari widget yang akan saya beri Scroll
9. Tambahkan kode <div style='overflow:auto; width:ancho; height:150px; width: 300px; '> diatas kode <div class='widget-content'>
</b:includable>Keterangan Kode :
</b:widget>
<b:widget id='BlogList1' locked='false' title='Link Sahabat' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div style='overflow:auto; width:ancho; height:150px; width: 300px; '> <div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
- Width: 300px merupakan lebar kotak Scroll dari lebar widget
- Ganti sesuai dengan ukuran widget anda
10. Jika sudah meletakan kode diatas, saatnya meletakan tag </div> sebagai penutup kode supaya bisa work 100%. Sisipkan kode ini diatas atau sebelum kode </b:includable> </b:widget> kode ini masih dalam area Widget " Link Sahabat "
11. Yang terakhir klik pratinjau dan jika berhasil maka akan tampak widget yang kita pilih akan ada Scrollnya.Selamat mencoba semoga berhasil kawan.oh ya setelah berhasil di pratinjau jangan lupa klik save template ya kawan :D
Tutorial ini bisa sobat Hereisanswer terapkan pada widget-widget blogger lainnya juga lho, seperti recent post, recent comment dll. Apabila sobat kesulitan dalam menerapkan tutorial Cara Membuat Scroll Pada Widget Blog ini bisa sobat tanyakan di kolom komentar, sebisa mungkin saya akan bantu sobat :D
Terimakasih telah membaca Tutorial Hereisanswer yang berjudul Cara Membuat Scroll Pada Widget Blog. Semoga tutorial yang blog ini berikan bermanfaat untuk anda. Jangan lupa membaca tutorial lainya di blog ini
10. Jika sudah meletakan kode diatas, saatnya meletakan tag </div> sebagai penutup kode supaya bisa work 100%. Sisipkan kode ini diatas atau sebelum kode </b:includable> </b:widget> kode ini masih dalam area Widget " Link Sahabat "
<b:widget id='BlogList1' locked='false' title='Link Sahabat' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div style='overflow:auto; width:ancho; height:150px; width: 300px; '>
<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
SKIP KODE BIAR NGGAK KEPANJANGAN
<b:include name='quickedit'/>
</div>
</div>
</div> </b:includable>
</b:widget>
11. Yang terakhir klik pratinjau dan jika berhasil maka akan tampak widget yang kita pilih akan ada Scrollnya.Selamat mencoba semoga berhasil kawan.oh ya setelah berhasil di pratinjau jangan lupa klik save template ya kawan :D
Tutorial ini bisa sobat Hereisanswer terapkan pada widget-widget blogger lainnya juga lho, seperti recent post, recent comment dll. Apabila sobat kesulitan dalam menerapkan tutorial Cara Membuat Scroll Pada Widget Blog ini bisa sobat tanyakan di kolom komentar, sebisa mungkin saya akan bantu sobat :D
Terimakasih telah membaca Tutorial Hereisanswer yang berjudul Cara Membuat Scroll Pada Widget Blog. Semoga tutorial yang blog ini berikan bermanfaat untuk anda. Jangan lupa membaca tutorial lainya di blog ini