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

Sekarang saya akan mengshare sebuah tutorial cara membuat kotak iklan 125x125 berjumlah 4 kolom di blog dengan menggunakan sentuhan css keren. Kalian pasti sudah tahukan apa itu kotak iklan 125x125? Saya anggap saja sudah. Kalau belum tahu, kalian coba cari tahu di Google. Oke langsung saja, berikut ini adalah caranya :

• Pertama, masuk ke dasboard blog kalian
• Masuk ke Template, pilih HTML
• Kemudian masukkan kode css 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 simpan

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

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

<a target="_blank" href="http://akatsuki-bunshin.blogspot.com/"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtcaXGRTWoeGF8hCTV92hV0BOLZqOFkVFNXb36kBLgNCbjAMQWsPzaqHSBTy71VB5XI-1JUvffXxwcJaq8Y2FOSz7bdTDy22ke-IGQGuMyadVOkX8PfJN0mB7cbo69VgBVZPbbrLTdX__y/s1600/5828_596772373687754_574482138_n+(1).jpg" border="0"/></a>

<a target="_blank" href="http://akatsuki-bunshin.blogspot.com/"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtcaXGRTWoeGF8hCTV92hV0BOLZqOFkVFNXb36kBLgNCbjAMQWsPzaqHSBTy71VB5XI-1JUvffXxwcJaq8Y2FOSz7bdTDy22ke-IGQGuMyadVOkX8PfJN0mB7cbo69VgBVZPbbrLTdX__y/s1600/5828_596772373687754_574482138_n+(1).jpg" border="0"/></a>

<a target="_blank" href="http://akatsuki-bunshin.blogspot.com/"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtcaXGRTWoeGF8hCTV92hV0BOLZqOFkVFNXb36kBLgNCbjAMQWsPzaqHSBTy71VB5XI-1JUvffXxwcJaq8Y2FOSz7bdTDy22ke-IGQGuMyadVOkX8PfJN0mB7cbo69VgBVZPbbrLTdX__y/s1600/5828_596772373687754_574482138_n+(1).jpg" border="0"/></a>

<a target="_blank" href="http://akatsuki-bunshin.blogspot.com/"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtcaXGRTWoeGF8hCTV92hV0BOLZqOFkVFNXb36kBLgNCbjAMQWsPzaqHSBTy71VB5XI-1JUvffXxwcJaq8Y2FOSz7bdTDy22ke-IGQGuMyadVOkX8PfJN0mB7cbo69VgBVZPbbrLTdX__y/s1600/5828_596772373687754_574482138_n+(1).jpg" border="0"/></a> </div>

• Sekarang tinggal disimpan

Keterangan :

Ganti kode berwarna MERAH dengan url iklan kalian

Ganti kode berwarna UNGU dengan url gambar iklan kalian

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

Share :

Facebook Google+ Twitter