Jumat, 17 Mei 2013

Cara Membuat Kolom Scroll Pada Blog Archive



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 rapi dan tidak terlalu memanjang ke bawah, kita buat Kolom Scrollnya.


Untuk membuatnya ikuti jurus-jurusnya di bawah ini: (tarik nafas dalam-dalam dan konsentrasi)

1. Login ke akun blogspot, 

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

3. Cari kode berikut <div id='ArchiveList'> (Untuk memudahkan pencarian tekan Ctrl + F copaskan code tersebut kemudian tekan enter).

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.

4. Selanjutnya tambahkan kode yang berwarna merah di bawah ini di atas kode nomor 3 (lagsung dicopas saja, yang merah lho) : 
<div class='widget-content'>

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

<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>
5. Sesuaikan kodenya, karena tidak semua templates sama,
6. Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height: 200px,
7. 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.

1 komentar: