- Back to Home »
- Tutorial Blog »
- Cara Membuat Scroll Pada Blog Archive
Posted by : Unknown
Senin, 06 Mei 2013
Kali ini saya akan memberikan cara agar pada blog archive terdapat Scroll, tujuannya agar lebih ringkas dan rapi. Langsung sob caranya :
Cara 1
1. Login ke Blogger
2. Di halaman Dasbor, kita pilih Rancangan Blogger
3. Kemudian pilih Edit HTML
4. Kemudian sobat Cari kode berikut <div id='ArchiveList'> atau ArchiveList agar lebih mudah gunakan ctrl+F.
5. Jika sudah ketemu Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:
<div class='widget-content'>Keterangan :
<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>
- Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka anda harus memasang Blog Archive nya terlebih dahulu dengan cara : klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika anda 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 2
2. Klik Design/Rancangan >> Edit HTML
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'>5. Kode warna Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut.
<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>
200px adalah tingginya, dan anda dapat merubah seseuai ke inginann anda.
Semoga Bermanfaat