Cara Menampilkan Menu Scroll Pada Arsip Blog

Flamboyan68 - Pada postingan kali ini saya akan berbagi dengan sobat nubie semua yaitu bagaimana " Cara Menampilkan Menu Scroll Pada Arsip Blog ". Keberadaan dari widget arsip blog adalah menu penting yang harus sobat pasang di blog, karena eksistensi arsip blog ini akan memudahkan pengunjung menemukan semua artikel yang ada di blog kita.

Walaupun penting tapi tidak semua  para blogger enggan untuk memasangnya dikarenakan  memakan banyak tempat apalagi jika artikelnya sudah banyak tentuk membutuhkan tempat yang luas.

Di bawah ini ada cara dan langkah untuk menampilkan menu scroll pada arsip blog:

• Masuk / Login ke  Blog sobat
• Pilih Menu Design  > > Seting Elemen Widget Arsip Blog pakai model Hierarki
• Lalu Simpan / Save 
• Selanjutnya sobat masuk ke menu >> pilih  Edit HTML
• Kemudian cari kode seperti dibawah ini, untuk mempermudah pencarian gunakan Ctrl + F dengan memasukan salah satu kode <div id='ArchiveList'> ke dalam kotak pencarian.
  

<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'/>

• Setelah ketemu  kode tadi 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 setelah di sisipkan kode tambahan tadi 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'/>

• Klik Save / Simpan Template. 
• Selasai.

Tampilan Arsip Blog setelah di pasang kode model menu scroll, seperti dibawah ini:

arsip blog menu scroll

Catatan:

• Sebelum melakukan Edit HTML Template blog, selalu  membiasakan back up template dengan cara unduh template lengkap terlebih dahulu  untuk menjaga apabila terjadi  kegagalan pasang saat proses edit HTML berlangsung.
• Kode yang ditambahkan berikut ini, <div style='overflow:auto; width:ancho; height:100px;'>, angka 100px pada height menunjukan tinggi dari scroll. Silahkan atur sesuai selera sobat.
• 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.

Semoga bermanfaat dan sampai jumpa..

Sumber: http://panduansederhana.blogspot.com/2012/03/cara-membuat-tampilan-menu-scroll-pada.html