Cara membuat scroll di widget, widget adalah sebuah salah satu bagian dari yang ada dalam keseluruhan tampilan website atau blog.
Yang di sebut dengan widget ini contohnya seperti Popular Post , Random Post , Label , arsip , iklan , atau yang lainya yang letaknya di samping kanan atau kiri atau di atas dan di bawah dari kolom utama sebuah website ( kolom utama dari website adalah kolom artikel/postingan).
Lalu yang di maksud dengan Scroll adalah alat untuk memberikan ruangan yang nantinya bisa di geser keatas dan kebawah sehingga hal ini bisa untuk menghemat ruang website anda, (keseluruhan tapilan widget masih lengkap namun hanya di berikan alat untuk menggeser keatas dan kebawah).
Lalu keseluruhan dari arti Cara membuat Scroll Widget ini maksudnya cara untuk membuat scroll di dalam widget dan widget yang ingin diberikan fitur scroll nya ini terserah anda masing-masing , karena hampir semua widget bisa di berikan alat scroll contohnya widget entri popular , label , arsip dan yang lainya, dan sebagai contohnya bisa di lihat widget yang sudah diberikan alat scroll seperti gambar di bawah ini
Saya kira penjelasan di atas sudah cukup lengkap namun jika masih ada yang belum di mengerti silahkan bertanya saja di kotak komentar di bawah postingan ini, dan selanjutnya Cara pembuatan scroll widget seperti di bawah ini :
Cara Membuat Scroll Widget
1.Pertama buka blog anda bisa melalui alamat blogger.com
2.Kemudian login ke akun blog masing-masing
3.klik desain untuk menuju dashboard blogger
4.Pada menu di dashboard blog pilih Template , kemudian pilih lagi/klik Edit Html , contohnya seperti gambar di bawah ini
5.selanjutnya Cari kode widgetnya yang ingin diberi alat scroll , disini saya berikan contoh untuk widged Archive Blog , dan kodenya seperti di bawah ini
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄ 
<b:else/>
► 
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='flat' var='data'>
<ul class='flat'>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
6.selanjutnya anda hanya menambahkan dua (2) baris kode di dalam susunan kode widged tersebut , yang pertama tambahkan kode di bawah ini dan pastekan di bawah kode <div class='widget-content'>
<div style='overflow:auto; width:230px; height:300px;'>
7.yang kedua tambahkan kode </div> di samping kode </div> yang sudah ada (jadi kode </div> nya ada 2, sehingga nantinya rangkaian kode widgetnya yang sudah jadi akan seperti di bawah ini
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄ 
<b:else/>
► 
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='flat' var='data'>
<ul class='flat'>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:230px; height:370px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
8.selanjutnya simpan template nya , dan perhatikan template tersimpan dengan benar/sukses
9.selesai.
keterangan :
Untuk ukuran tinggi dan lebar dari widgetnya nanti bisa anda sesuaikan dengan kondisi tempat di website anda masing-masing dengan cara menambah atau mengurangi ukuran angka tinggi dan lebarnya , untuk tinggi bisa di lihat ukuran height dan untuk lebarnya bisa di lihat ukuran width nya.
Demikian panduan blogger dari jasa desain webite Tentang Cara Membuat Scroll Widget , dan untuk panduan yang lainya bisa membuka daftar isi pada menu di atas.
Yang di sebut dengan widget ini contohnya seperti Popular Post , Random Post , Label , arsip , iklan , atau yang lainya yang letaknya di samping kanan atau kiri atau di atas dan di bawah dari kolom utama sebuah website ( kolom utama dari website adalah kolom artikel/postingan).
Lalu yang di maksud dengan Scroll adalah alat untuk memberikan ruangan yang nantinya bisa di geser keatas dan kebawah sehingga hal ini bisa untuk menghemat ruang website anda, (keseluruhan tapilan widget masih lengkap namun hanya di berikan alat untuk menggeser keatas dan kebawah).
Lalu keseluruhan dari arti Cara membuat Scroll Widget ini maksudnya cara untuk membuat scroll di dalam widget dan widget yang ingin diberikan fitur scroll nya ini terserah anda masing-masing , karena hampir semua widget bisa di berikan alat scroll contohnya widget entri popular , label , arsip dan yang lainya, dan sebagai contohnya bisa di lihat widget yang sudah diberikan alat scroll seperti gambar di bawah ini
Saya kira penjelasan di atas sudah cukup lengkap namun jika masih ada yang belum di mengerti silahkan bertanya saja di kotak komentar di bawah postingan ini, dan selanjutnya Cara pembuatan scroll widget seperti di bawah ini :
Cara Membuat Scroll Widget
1.Pertama buka blog anda bisa melalui alamat blogger.com
2.Kemudian login ke akun blog masing-masing
3.klik desain untuk menuju dashboard blogger
4.Pada menu di dashboard blog pilih Template , kemudian pilih lagi/klik Edit Html , contohnya seperti gambar di bawah ini
![]() |
Dashboard blogger |
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄ 
<b:else/>
► 
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='flat' var='data'>
<ul class='flat'>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
6.selanjutnya anda hanya menambahkan dua (2) baris kode di dalam susunan kode widged tersebut , yang pertama tambahkan kode di bawah ini dan pastekan di bawah kode <div class='widget-content'>
<div style='overflow:auto; width:230px; height:300px;'>
7.yang kedua tambahkan kode </div> di samping kode </div> yang sudah ada (jadi kode </div> nya ada 2, sehingga nantinya rangkaian kode widgetnya yang sudah jadi akan seperti di bawah ini
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄ 
<b:else/>
► 
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='flat' var='data'>
<ul class='flat'>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:230px; height:370px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
8.selanjutnya simpan template nya , dan perhatikan template tersimpan dengan benar/sukses
9.selesai.
keterangan :
Untuk ukuran tinggi dan lebar dari widgetnya nanti bisa anda sesuaikan dengan kondisi tempat di website anda masing-masing dengan cara menambah atau mengurangi ukuran angka tinggi dan lebarnya , untuk tinggi bisa di lihat ukuran height dan untuk lebarnya bisa di lihat ukuran width nya.
Demikian panduan blogger dari jasa desain webite Tentang Cara Membuat Scroll Widget , dan untuk panduan yang lainya bisa membuka daftar isi pada menu di atas.