Cara Membuat Kotak Iklan 125x125 4 Kolom Dengan Css Di Blog

Kali ini saya akan mengshare tentang Cara Membuat Kotak Iklan 125x125 4 Kolom Di Blog Dengan Css. Saya mengsharenya karena sekali lagi ada orang yang request. Kalian pasti sudah tahukan apa itu kotak iklan? Kalau belum tahu, kalian bisa lihat contohnya di blog ini. Oke, langsung saja berikut ini caranya.

• Masuk ke Dasboard blog kalian
• Masuk ke Template, pilih Edit HTML
• Setelah itu, masukkan kode di bawah ini tepat di atas kode ]]></b:skin>

#kotak-iklan-125x125 {margin: 0px;padding: 5px;text-align: center;}
#kotak-iklan-125x125 img {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #000;-webkit-transition: all 0.45s ease-out;-moz-transition: all 0.45s ease-out;-o-transition: all 0.45s ease-out;transition: all 0.45s ease-out;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;}
#kotak-iklan-125x125 img:hover {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #eee;box-shadow:0 0 15px #ffffff;}

• Kemudian kalian simpan

Masih belum selesai. Setelah langkah di atas, sekarang kalian masuk ke Tata Letak, Add Gadget di tempat yang kalian inginkan (Saya anjurkan di tempat yang agak luas), pilih HTML/JavaScript. Kemudian kalian masukkan kode di bawah ini.

<div id="kotak-iklan-125x125">

<a target="_blank" href="http://uzumakiramadan.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT0o2GhzPIQoVjMe9ZnzdCNsc-L-YIjtiC-oemnT9VCMFOrF0FaPxa4EkdLB2Z7znjieOCJNcus25uQ0rT1Jgs-_ZLdoas4YEGOQDJ6w_vLOPRAILjvSiFvq8SfCMlwrygeqicQJEjhEnX/s1600/5828_596772373687754_574482138_n+(1).jpg" border="0"/></a> <a target="_blank" href="http://uzumakiramadan.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT0o2GhzPIQoVjMe9ZnzdCNsc-L-YIjtiC-oemnT9VCMFOrF0FaPxa4EkdLB2Z7znjieOCJNcus25uQ0rT1Jgs-_ZLdoas4YEGOQDJ6w_vLOPRAILjvSiFvq8SfCMlwrygeqicQJEjhEnX/s1600/5828_596772373687754_574482138_n+(1).jpg" border="0"/></a> <a target="_blank" href="http://uzumakiramadan.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT0o2GhzPIQoVjMe9ZnzdCNsc-L-YIjtiC-oemnT9VCMFOrF0FaPxa4EkdLB2Z7znjieOCJNcus25uQ0rT1Jgs-_ZLdoas4YEGOQDJ6w_vLOPRAILjvSiFvq8SfCMlwrygeqicQJEjhEnX/s1600/5828_596772373687754_574482138_n+(1).jpg" border="0"/></a> <a target="_blank" href="http://uzumakiramadan.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT0o2GhzPIQoVjMe9ZnzdCNsc-L-YIjtiC-oemnT9VCMFOrF0FaPxa4EkdLB2Z7znjieOCJNcus25uQ0rT1Jgs-_ZLdoas4YEGOQDJ6w_vLOPRAILjvSiFvq8SfCMlwrygeqicQJEjhEnX/s1600/5828_596772373687754_574482138_n+(1).jpg" border="0"/></a> </div>

Terakhir kalian simpan.

Keterangan :

Ganti kode yang berwarna MERAH dengan Url iklan kalian.

Ganti kode yang berwarna UNGU dengan Url gambar kalian.

Nah itu dia caranya. Jika terjadi masalah dalam penempatannya, kalian bisa otak atik sendiri kodenya. Sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas silakan tanyakan di komentar.

 

 

Sumber : Yondarkness