Cara Simpel Membuat Scroll Widget Blogspot
Scroll berfungsi untuk menyederhanakan tampilan sepaya lebih terlihat rapi dan menjadi tidak terlalu luas. Untuk membuat scroll widget blogspot ada beberapa cara, tergantung bagi anda ingin menggunakan cara mana yang paling simpel dan sederhana bagi anda. Disini saya akan menjabarkan 3 macam cara membuat scroll widget di blogspot.Yang menjadi code utama untuk membuat scroll ini adalah adanya code overflow. Jadi jika anda menemukan kode seperti ini, maka ini akan membentuk sebuah scroll. Kalau tidak percaya silahkan anda coba sendiri dengan menggunakan notepad. Berikut cara membuat scroll widget yang saya maksudkan.
Cara Pertama
1. Buka Pengaturan blogspot anda, Design, Page Element. Silahkan anda tambahkan widget baru dengan klik add a gadget, lalu pilih add html/javascript
2. Berikan judul dan pada pada bagian content letakkan kode seperti ini
<div style="overflow:auto; width:100%px;
height:200px; padding:10px; border:1px solid #999999;">
.......
</div>
.......
</div>
3. Letakkan kode anda diantara
kode div diatas,
Cara Kedua
1. Buka Pengaturan, Design, Edit Html. Lalu cari nama widget yang hendak anda jadikan scroll. Misalkan saja disini Archive blog, maka saya akan cari tulisan BlogArchive
2. Tambakahan kode CSS berikut ini diatas ]]></b:skin>
Cara Kedua
1. Buka Pengaturan, Design, Edit Html. Lalu cari nama widget yang hendak anda jadikan scroll. Misalkan saja disini Archive blog, maka saya akan cari tulisan BlogArchive
2. Tambakahan kode CSS berikut ini diatas ]]></b:skin>
#BlogArchive .widget-content{
height:200px;
width:auto;
overflow:auto;
}
height:200px;
width:auto;
overflow:auto;
}
3. Usahakan yang berwarna merah harus sama dengan nama widget yang hendak anda jadikan scroll
Cara Ketiga
1. Pada Edit html template blogspot, silahkan anda cari widget yang hendak anda berikan scroll. Lalu pada bagian bawah dari kode widget tersebut cari kode div class='widget-content'
2. Tambahkan kode style='overflow:auto; height:230px' disamping kode div class='widget-content' Sehingga menjadi
<div class='widget-content' style='overflow:auto;
height:230px'>
Bagaimana menurut anda? Cara membuat scroll widget blogspot yang manakah yang paling simpel dan mudah menurut anda? Saya lebih suka menggunakan cara yang ke 3. Lebih simpel dan praktis :)
Cara Simpel Membuat Scroll Widget Blogspot
1. Login ke Acount Blogger atau Dashboard
2. Pilih Layout
3. Llalu klik Edit HTML
4. Centang dulu Expand Widget Templates
5. Cari kode yang seperti ini : <div id='ArchiveList'> atau kata
Archive.
Untuk memudahkan mencarinya , pakai saja Ctrl +F , terus ketik kata yang dicari
dikotak yang disediakan, lalu klik next.atau tanda panah(di google chrome).
6. Kalau sudah, tambahkan kode warna merah itu sebagai scollnya
Lengkapnya kode tersebut seperti dibawah ini :
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:220px;'>
<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>
Nah anda apabila sudah ketemu kode yang mirip di atas
maka anda tinggal menambahkan kode yang di "BOLD" atau yang di
garis tebalkan saja. Untuk pengaturan tingginya bisa anda lihat di angka "220px"
sesuaikan dengan keinginan anda.
Cara Simpel Membuat Scroll Widget Blogspot
Kadang-kadang daftar link kita di bagian widget dalam
sebuah blog sangat banyak. Contohnya seperti daftar link sobat (blog list),
daftar recent post, daftar link artikel, dan sebagainya. Nah, untuk memendekkan
daftar link-link tersebut agar menjadi seperti sebuah "scrool",
caranya sangat mudah. Misalnya anda akan memendekkan daftar link sobat karena
sudah terlihat "mengular" di blogspot versi baru, caranya
adalah :
1. Login ke account blogspot anda, select menu tata letak.
2. Select menu Edit HTML, lalu pilih menu lanjutkan dan centang expand template widget.
3. Cari kode type='LinkList' dengan Ctrl F/F3.
4. Perhatikan kode dibawahnya karena biasanya terdapat beberapa kode, cari kode untuk Link List :
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
5. Tambahkan kode style='overflow:auto; height:200px' pada kode yang berwarna biru, sehingga akan menjadi seperti ini :
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content' style='overflow:auto; height:200px'>
Catatan : Perhatikan tanda tutup ">" nya dipindah ke paling akhir.
6. Silahkan atur ukuran ketinggian (height) nya sesuai kebutuhan. Simpan template, lalu cek hasilnya!
Semoga berhasil...
1. Login ke account blogspot anda, select menu tata letak.
2. Select menu Edit HTML, lalu pilih menu lanjutkan dan centang expand template widget.
3. Cari kode type='LinkList' dengan Ctrl F/F3.
4. Perhatikan kode dibawahnya karena biasanya terdapat beberapa kode, cari kode untuk Link List :
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
5. Tambahkan kode style='overflow:auto; height:200px' pada kode yang berwarna biru, sehingga akan menjadi seperti ini :
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content' style='overflow:auto; height:200px'>
Catatan : Perhatikan tanda tutup ">" nya dipindah ke paling akhir.
6. Silahkan atur ukuran ketinggian (height) nya sesuai kebutuhan. Simpan template, lalu cek hasilnya!
Semoga berhasil...