Cara Membuat Widget Arsip Blog/Recent Post Dengan Fungsi Scroll

Membuat Arsip Blog/Blog Archive Dengan Fungsi Scroll - Arsip Blog/Blog Archive adalah salah satu widget yang wajib dipasang pada Blog Anda. Dengan tujuan agar pengunjung blog dapat mengetahui update-an terbaru pada postingan blog Anda. Jika Anda salah satu Blogger yang rutin menulis artikel sampai 10 postingan/hari tentu Arsip Blog akan memanjang kebawah. Dan ini akan berdampak pada tampilan blog Anda. Untuk mengatasinya adalah membuat Arsip Blog/Blog Archive dengan fungsi scroll. Maka tampilannya akan seperti gambar dibawah ini.

Arsip Blog Dengan Fungsi Scroll

Dengan membuat widget arsip blog/blog archive dengan fungsi scroll akan membuat tampilan blog Anda sedikit lebih rapi (Seperti Blog saya :v). Jika Anda berminat untuk mengubah tampilan arsip blog/blog archive dengan fungsi scroll, Berikut caranya:

1. Login pada akun Blogger sobat.
2. Klik Template kemudian masuk Edit HTML.
3. Cari kode widget Arsip Blog Anda. Jika Anda menamai Arsip Blog "Recent Post". Maka tekan CTRL+F kemudian ketik Recent Post.
4. Jika sudah ketemu maka Anda akan menemukan kode seperti berikut.
   

   <b:widget id='BlogArchive1' locked='false' title='Recent Post' type='BlogArchive'>

5. Kemudian tambahkan kode berikut tepat dibawah kode tadi.
   

   <div style='overflow:auto; width:ancho; height:400px;'>

6. Dan diatas kode <b:include name='quickedit'/> tambahkan kode </div>, maka hasilnya akan seperti ini.
   

     <div class='widget-content'>
   <div style='overflow:auto; width:ancho; height:400px;'>  <div expr:class='data:blog.languageDirection' 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'/>

   Catatan: Kode yang berwarna Biru adalah kode yang ditambahkan, sedangkan kode yang berwarna Merah adalah panjang dari widget Arsip Blog sobat.
7. Simpan Template Anda.

Share this post