Membuat Wadah (Container) dengan Background

Sesuai permintaan pembaca setia Blogger TuneUp mengenai pembuatan wadah atau container dengan berlatar belakang gambar seperti kotak Blogroll dibawah ini. Maka pada artikel kali ini mari kita bongkar "behind the scene of container image background" (lebay mode on) hehehe... Tanpa basa basi mari kita kuak misteri blogger hack tersebut...

Contoh Wadah (Container) Miyabi

Membuat Wadah (Container) dengan Background Maria Ozawa
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:

#wadah {padding: 5px;overflow: auto;width: 96%;height: 250px;margin-bottom: 10px;background-attachment: absolute;background:#fff url(http://lh6.ggpht.com/_xcD4JK_dIjU/Sofer2ZD7pI/AAAAAAAADTo/Pm1KhugFWwE/d/maria_ozawa.gif) no-repeat right top;border: 1px solid rgb(204, 204, 204);}
#wadah ul{list-style-type: none;margin: 0px;padding: 2px;}
#wadah ul li{display:block;line-height:2em;border-bottom:1px dotted #ccc;background: url(http://lh5.ggpht.com/_xcD4JK_dIjU/SoferzemgGI/AAAAAAAADTk/AHLpvar3C5Q/d/indonesia.png) no-repeat 0px 4px;padding: 0 1px 0 19px;}
#wadah li {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;}
#wadah li a:link{text-decoration:none;color:#00F;}
#wadah li a:visited{text-decoration:none;color:#000;}
#wadah li a:hover{text-decoration:underline;}

Langkah 5
Simpan Template dan lanjutkan membaca
Langkah 6
Masuk ke "Tata Letak - Elemen Laman"
Langkah 7
Tambahkan sebuah gadget dengan tipe HTML/JavaScript
Langkah 8
Masukan kode dibawah ini pada konten/isi:

<div id="wadah">
<ul>
<li><a href="http://modification-blog.blogspot.com/" target="_blank">Blogger TuneUp</a></li>
<li><a href="URL Link Anda" target="">Nama Link Anda</a></li>
...dan seterusnya
</ul>
</div>

Langkah 9
Simpan Gadget
Langkah 10
Preview Blog anda

Keterangan:

• Untuk mengubah background silahkan ubah link http://.../maria_ozawa.gif pada kode CSS yang ada pada langkah 4
• Ubah nilai 250px untuk menentukan tinggi container (lihat kode CSS langkah 4)
• Untuk mengubah bentuk bullet silahkan ganti link http://.../indonesia.png (lihak kode CSS langkah 4)
• Tambah jumlah List pada ...seterusnya dengan kode yang terdapat diantara kode <li><a href="URL Link Anda" target="">Nama Link Anda</a></li> dan ubahlah URL Link Anda dengan URL yang dituju dan Nama Link Anda adalah nama link yang dituju

Selamat mencoba dan semoga berhasil... happy blogging ... :)