Cara membuat menu scroll pada arsip blog - Arsip blog adalah salah satu bagian terpenting dalam sebuah blog, dimana dengan adalanya mbagian itu maka pengunjung dapat mengetahui semua artikel yang kita tulis di blog. Meskipun penting, banyak juga para blogger yang enggan memasangnya dengan alasan tampilanya yang panjang ke bawah sehingga banyak memakan space di sidebar blog.

membuat menu scroll

Karena itulah saya ingin mencoba berbagi trik bagaimana cara agar arsip blog yang kita pasang tidak terlalu panjang dan supaya lebih enak di pandang mata. Trik yang akan saya pakai disini adalah dengan membuat kolom scroll. Langsung saja kita bahas yuk,..

Berikut langkah bagaimana cara merubah tampilan arsip blog dengan menu scroll :
  • Seperti biasa masuk dulu ke akun blog anda
  • Pilih menu Layout -- > Seting elemen widget arsip anda pake gaya Hierarki
  • Setelah selesai, pindah kemenu Template lalu klik Edit Html -- > Centang kotak expand widget
  • Cari kode seperti dibawah ini (Tekan keyboard tombol Ctrl + F untuk mempermudah pencarian dengan memasukan kata yang dicari di dalamnya)
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
  <b:includable id='main'>
  <b:if cond='data:title'>
  <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <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>
  <b:include name='quickedit'/>
  • Sisipkan kode dibawah ini tepat diatas kode <div id='ArchiveList'>
<div style='overflow:auto; width:ancho; height:100px;'>
  • Tambahkan kode </div> diatas <b:include name='quickedit'/>
  • Tampilan keseluruhan kode menjadi
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
  <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:100px;'>
  <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'/>
  • Terakhir klik Save. Selasai.
Keterangan :

  • Sebelum melakukan edit HTML template blog, selalu back up dengan cara download terlebih dahulu template blog kita untuk mengantisipasi kegagalan saat proses edit HTML berlangsung.
  • Pada kode yang ditambahkan berikut ini, <div style='overflow:auto; width:ancho; height:100px;'>, angka 100px pada height menunjukan tinggi dari scroll sebagai pembungkus yang kita buat. Atur sesuai selera.
  • Sebelum melakukan edit HTML untuk merubah tampilan arsip blog dengan model scroll, pastikan kita telah merubah model arsip blog kita menjadi model hierarki terlebih dahulu. Untuk tampilannya apakah dimuat perbulan atau perminggu tidak masalah.

Bagaimana, mudah bukan Cara membuat menu scroll pada arsip blog. Yang penting anda teliti pasti bisa. Semoga bermanfaat.