Cara Menambahkan Background Gambar Di Blog Archive Pada Blogspot

Archive merupakan widget yang penting di blog, dengan adanya archive pengunjung dapat dengan mudah mencari konten yang di cari, maka dari itu saya berfikir bagaimana cara membuat tampilan archive tersebut bisa lebih menarik. untuk itulah kali ini saya akan share bagaimana cara membuat background pada archive, yang tentunya akan membuat tampilan archive lebih menarik. Oke, berikut trik-nya.

Gambar

Ikuti langkah-langkah berikut ini :

1. Seperti biasa, Login ke blogger sobat
2. klik Tata Letak dan pilih Edit HTML
3. Kalau sudah, klik Expand Template Widget
4. Lalu cari kode berikut (Ctrl + F) : <div id='ArchiveList'>
5. Bila sudah simpan kode berikut tepat di atas kode <div id='ArchiveList'>

<div style='overflow:auto; height:300px; background:url(http://i865.photobucket.com/albums/ab218/1rd3/Gununges.jpg); background-repeat:no-repeat;'> 

Dan jangan lupa beri kode penutupnya, yaitu :

</div>

6. Perhatikan kode script dibawah ini (ini kode html blog saya) :

<div class='widget-content'>
<div style='overflow:auto; height:300px; background:url(http://i865.photobucket.com/albums/ab218/1rd3/Gununges.jpg); background-repeat:no-repeat;'> 
<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'/>

Keterangan :
Perhatikan kode yang bercetak warna biru, itulah kode yang harus sobat tambahkan di kode html sobat.
300px adalah lebar dari archive.
http://i865.photobucket.com/albums/ab218/1rd3/Gununges.jpg adalah url gambar, yang bisa sobat ganti dengan url gambar sobat sendiri.

7. Bila sudah, klik Simpan template, dan lihat hasilnya.


OKe.. selamat mencoba, semoga sukses !!