Cara buat scroll di blog archive

Ini cara membuat kolom scroll pada blog archive, sobat ikuti tutorialnya. OK !!! cekidot......

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. 

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 + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<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 + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
    <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
    <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
    <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..

Posted in: Trik Blog