Cara Membuat Scroll Bok Di Widget "Archive"

Setelah kemarin bagi-bagi tips Cara membuat scroll tanpa pakai box di "archive", sekarang DCC akan share cara membuat scroll plus boxnya di widget "archive".

Contohnya seperti gambar di bawah ini :

Kegunaannya :

• Meringankan loading blog
• Penghematan tempat
• Tampilannya terlihat rapih

Cara membuatnya :

1. Login ke blogger
2. Masuk ke dasbor
3. Klik "template"
4. Klik "edit HTML"
5. Klik "expand template widget"
6. Cari kode ini :
<div class='widget-content'>
atau kode ini :
<div id='ArchiveList'>

ket: biasanya 2 kode di atas letaknya berurutan tanpa ada pemisah.


7. Kalau sudah ketemu salah satu 2 kode di atas, copaslah kode di bawah ini lalu simpan di antara 2 kode di atas.
<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 250px; background-color: none;'>

Lihat contoh di bawah ini :
<div class='widget-content'>
<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 250px; background-color: none;'>
<div id='ArchiveList'>


8. Yang terakhir masukan kode ini </div> dan simpan di atas kode :
<b:include name='quickedit'/>
</div>

Seperti inilah hasil semuanya :
<h2><data:title/></h2>
  </b:if>
<div class='widget-content'>
<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 250px; background-color: none;'>
<div id='ArchiveList'>
<divexpr: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>
keterangan :
- kode yang di kasih warna merah adalah kode yang anda tambahkan ke script tersebut
- kode yang di kasih warna biru adalah kode yang anda cari
- kode yang di kasih warna kuning adalah kode untuk mengukur ukuran tinggi widget


9. Selesai.... Klik "simpan template".

Jangan Lewatkan :