Cara Menambahkan Background Gambar Di Blog Archive Pada Blogspot

Viyan Pradita Jumat, September 03, 2010 ,

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 !!

Ditulis Oleh :

Artikel Cara Menambahkan Background Gambar Di Blog Archive Pada Blogspot ini dipublish pada hari: Jumat, September 03, 2010. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

4 komentar
Terjun Ke Kolom Komentar

  1. thankz ya bwt info.x. . .
    Nanti bru d coba. . .
    Tgas dulu diutamakan. . .

    BalasHapus
  2. siiip,,,, bntu aq
    lagy pemula ew,,

    BalasHapus
  3. thanks info nya,,mw berbagi lebih bsa mampir di blog saya^_^

    http://divisi4-05lebakbandung.blogspot.com/

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers