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

Posted by : Unknown Kamis, 24 Oktober 2013

Keyword : Cara Membuat Tempat Iklan Keren Di Blog, Membuat Widget Iklan Di Blog Dengan Css, Membuat Banner Iklan 125x125 Pixel Di Blog.

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://accelerator-bunshin.blogspot.com/"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghn_1tg5FXaotSOq5D9d2qcxlHnsf9WgEhqd-BnG3buFJY5wl2qR6RTgOQCGmJjZZBlOWXx8ru2a4WTajI803e4IhEU2OdVFE1jMkvgWBwFMXkUwAzl7JAYe6r8xjg83Q4z7NYUoONyWyQ/s1600/5828_596772373687754_574482138_n+(1).jpg" border="0"/></a>
<a target="_blank" href="http://accelerator-bunshin.blogspot.com/"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghn_1tg5FXaotSOq5D9d2qcxlHnsf9WgEhqd-BnG3buFJY5wl2qR6RTgOQCGmJjZZBlOWXx8ru2a4WTajI803e4IhEU2OdVFE1jMkvgWBwFMXkUwAzl7JAYe6r8xjg83Q4z7NYUoONyWyQ/s1600/5828_596772373687754_574482138_n+(1).jpg" border="0"/></a>
<a target="_blank" href="http://accelerator-bunshin.blogspot.com/"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghn_1tg5FXaotSOq5D9d2qcxlHnsf9WgEhqd-BnG3buFJY5wl2qR6RTgOQCGmJjZZBlOWXx8ru2a4WTajI803e4IhEU2OdVFE1jMkvgWBwFMXkUwAzl7JAYe6r8xjg83Q4z7NYUoONyWyQ/s1600/5828_596772373687754_574482138_n+(1).jpg" border="0"/></a>
<a target="_blank" href="http://accelerator-bunshin.blogspot.com/"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghn_1tg5FXaotSOq5D9d2qcxlHnsf9WgEhqd-BnG3buFJY5wl2qR6RTgOQCGmJjZZBlOWXx8ru2a4WTajI803e4IhEU2OdVFE1jMkvgWBwFMXkUwAzl7JAYe6r8xjg83Q4z7NYUoONyWyQ/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.

Ada 0 ibu ibu yg lagi gosip + Add a comment

Baca dulu sebelum berkomentar

-Not spam
-Bila komentar nya belum mucul tekan F5 untuk refresh ok??
-Yang sopan donk komentarnya,biar admin respon
-No sara/tidak kata kata kotor
-Komentar not gan/agan ini bukan kaskus
-Anda sopan kami segan
-Bertanya,dengan hal yg terkait dengan postingan
-Bila info nya bermanfaat silahkan di LIKE

Bloggdr Comments ☜-(─‿‿─) Facebook Comments

Followers

Site Info

Recent Comment