New !! Membuat Kotak dengan Background (Blogroll)

Sesuai permintaan pembaca setia Blogger engenai 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 kitakuak misteriblogger hack tersebut... 

Contoh Wadah (Container) Miyabi

Membuat Kotak 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://imdad-gresik.blogspot.com/" target="_blank">Gubuk Ilmu & Blogger</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 sob ... :)

sumber : blogger tuneup

New !! Membuat Kotak dengan Background (Blogroll) 9 out of 10 based on 10 ratings. 9 user reviews.

JQuery BlOg

• Memperbesar Gambar pada Artikel Blog Dengan jQuery Image Zoom 2.0
• Membuat Tab Vanilla Slick jQuery
• Page Peel Efek menggunakan jQuery & CSS
• Cara Membuat Back to Top Dengan jQuery
• Menampilkan Recent Post with Thumbnail Dengan JQuery
• Daftar Isi Memakai Efek jQuery Accordion

Tutorial Blog

• Cara mengganti background Kotak Komentar Blog 1
• Cara Mudah Membuat Random Background Color
• Memperbesar Gambar pada Artikel Blog Dengan jQuery Image Zoom 2.0
• Cara Simple Membuat Script Link Banner Pada Blog Plus Wadah Text Area
• Membuat Slide Gambar Efek Terjatuh Dengan jQuery
• Cara Mudah Auto Hide Dan Menghilangkan Navbar Blogger
• Cara Membuat Slide Gambar Berjalan Pada BLOG
• Cara Mudah Mendeteksi Blog Yang NoFollow atau DoFollow dengan AddOns Mozilla Firefox
• Cara Mencari Blogger Satu Kota atau Satu Daerah
• Cara Memasang Photo Dan Avatar di Kotak Komentar Blogger
• MEnambah Dan Memasang Gadget HTML Code Javascript Pada Sidebar
• Cara Cek Link Yang Rusak Di Blog
• Cara Membuat Kotak Wadah Kode HTML Dengan Warna Pada Postingan
• Cara simpel Membuat Spoiler (Tombol Hide Show Kotak Kode HTML Pada Posting)
• New !! Cara Membuat Related Post Keren Dengan Tampilan Image