Cara Membuat Tampilan Menu Scroll Pada Arsip Blog

Cara Membuat Tampilan Menu Scroll Pada Arsip Blog

Cara Membuat Tampilan Menu Scroll Pada Arsip Blog - Arsip blog merupakan salah satu menu penting yang harus anda pasang di blog, karena dengan adanya arsip blog tersebut akan memudahkan pengunjung menemukan semua artikel yang ada di blog tersebut.

Tapi meskipun begitu banyak para blogger yag enggan untuk memasangnya dikarenakan ekan memakan banyak tempat apalagi jika jumlah artikelnya sudah banyak tentuk membutuhkan tempat yang luas.

Nah, kali ini ane dapat solusi untuk masalah tersebut yaitu dengan cara membuat tampilan menu scroll. Cara ini ane dapat setelah dari search di mbah google dan setelah ane coba ternyata berhasil.

Berikut langkah bagaimana cara merubah tampilan arsip blog dengan menu scroll :

• Seperti biasa masuk dulu ke akun blog anda
• Pilih menu design -- > Seting elemen widget arsip anda pake gaya Hierarki
• Setelah selesai, pindah kemenu 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. Yang penting anda teliti pasti bisa. Semoga bermanfaat.
sumber