membuat kolom scroll pada blog archive ini tergolong cara untuk mempercantik blog, pada umumnya arsip blog itu puanjang buanget. hehehe namun bisa dipendekkan tanpa merubah
subtansinya. ok dengan membuat efek scroll widget jadi ringkas dan
keren
Ini membuat kolom scroll pada blog archive, sobat ikuti tutorialnya. OK !!!
Cara/tutorial 1
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan Blogger.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Kemudian sobat Cari kode berikut <div id='ArchiveList'> atau ArchiveList agar lebih mudah gunakan ctrl+F.
2. Di halaman Dasbor, kita pilih Rancangan Blogger.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Kemudian sobat Cari kode berikut <div id='ArchiveList'> atau ArchiveList agar lebih mudah gunakan ctrl+F.
6. Jika sudah ketemu Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:
<div class='widget-content'>
<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">
<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>
Keterangan :
- Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka teman-teman harus memasang Blog Archive nya terlebih dahulu dengan cara : klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.
- Harap disesuaikan saja kodenya, karena tidak semua templates sama,
- 200px : Adalah Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height:
- Jika sudah klik Save templates dan lihat hasilnya.
Cara/tutorial 2
1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates,
3. Cari kode berikut :
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
4. Lalu Terapkan Seperti di bawah ini.....
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<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>
5. Kode warna Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut.
200px adalah tingginya, dan kalian bisa ubah seseuai ke inginann kalian..
Demikian membuat kolom scroll pada blog archive. ikuti selalu mashelmi akan selalu update dengan tutorial yang baru.
Referensi:
http://kumpulan-adsen.blogspot.com/2012/02/cara-membuat-kolom-scroll-pada-blog.html
http://tutorialblogx.blogspot.com/2013/02/cara-membuat-scroll-pada-blog-archive.html