Cara Membuat Kolom Scroll Pada Blog Archive

Beberapa hari ini saya berusaha mencari bagaimana Cara Membuat Kolom Scroll Pada Blog Archive. Dalam hati, kok Arsip blog saya kok panjang banget ke bawah... terlihat tidak bagus jadinya. Pencarian pun tidak sia-sialah. Ketemu deh hasilnya. AB akan mencoba membagi pengalaman tentang tutorial Cara Membuat Kolom Scroll Pada Blog Archive.Mudah-mudah ini bisa digunakan oleh kawan-kawan semua.

 

Kali ini kita akan Membuat Kolom Scroll Pada Blog Archive. Kenapa memerlukan Scroll, karena tanpa scroll maka arsip blog yang banyak akan membuat blog panjang ke bawah, dan kelihatanya tidak menarik. Untuk itulah kolom scroll diperlukan.

Sewaktu teman-teman memposting suatu artikel dan di-archive-kan secara Hierarki dan Judul Artikelnya ditampilkan, maka semua artikel yang ada di Blog Archive tersebut akan tampil memanjang ke bawah. Nah untuk membuatnya terlihat sedikit rapi agar tidak memanjang terlalu ke bawah, maka kita akan membuat Kolom Scrollnya.

 

Untuk membuatnya silahkan ikuti langkah-langkah di bawah ini:

Login ke akun blogspot, 

Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates, 

Cari kode berikut <div id='ArchiveList'> atau ArchiveList

Catatan: Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka teman-teman harus memasang Blog Archive nya terlebih dahulu dengan cara, klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.

Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:

<div class='widget-content'>

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">

<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'/>
</div>
</b:includable>

Harap disesuaikan saja kodenya, karena tidak semua templates sama,

Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height: 200px,

Jika sudah klik Save templates dan lihat hasilnya.  

Seperti itulah Cara Membuat Kolom Scroll Pada Blog Archive, semoga bisa bermanfaat untuk teman-teman semua dan selamat mencoba. Salam Blogger.