Membuat Kotak Iklan di Sidebar

Assalamualikum,
Kali ini saya akan membuat artikel tentang Cara Membuat Kotak Iklan di Sidebar Blog
kotak iklan ini terdapat 4 kotak iklan, dan tidak banyak juga CSS yang digunakan,
kita langsung saja ke intinya.

kotak-iklan

Sebelum ke inti artikel ini. Baca dulu ini.
Buat kalian yang menggunakan template buatanya Arlina Design, biasanya CSSnya sudah ada, jadi kalian bisa langsung ke point no. 5


ok, berikut caranya.

Cara Membuat Kotak Iklan pada Sidebar


1. Login ke Blogger kalian
2. klik Template > Edit HTML
3. Tambhakan Script CSS dibawah ini, tambahkan sebelum kode </style>

.kotak_iklan {margin:auto;transition:all 1s ease-out;}
.kotak_iklan .sidebar .widget-content,.kotak_iklan .sidebar-two .widget-content{padding:0;border:0;}
.kotak_iklan .sidebar .widget {margin-bottom:0;padding:0;}
.kotak_iklan img{background:#fff;text-align:center;margin:5px 2.5px;padding:2.5px;border:1px solid #ddd!important;transition:all .6s ease-out}
.kotak_iklan  img:hover {background:#fff;border-color:#bbb!important;}
.kotak_iklan2 {text-align:center;margin:0 auto;transition:all 1s ease-out;}
.kotak_iklan2 .sidebar .widget-content,.kotak_iklan2 .sidebar-two .widget-content{padding:0;background:#f2f6f7;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);border:0;}
.kotak_iklan2 .sidebar .widget,.kotak_iklan2 .sidebar-two .widget {margin-bottom:0;padding:0;}
.kotak_iklan2  img {text-align:center;transition:all 1s ease-out;}
.kotak_iklan2  img:hover {transition:all .5s ease-out;}
.kotak_iklan3 {position:relative;margin:0 auto;}

4. jika sudah, Simpan > Tata Letak > Tambahkan Widget > HTML/Javascript
5. Masukkan Script dibawah ini. Simpan

<div class="kotak_iklan">
<a href="http://abdurrahim-id.blogspot.com/" title="Abdurrahim ID" target="_blank"><img class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKsvIBKUvlfs9foTo49GVpfQVPnoum39c8atZ3G5I4qbyd0veraL2TFVYpN20sCX3uhpxcsJC79dYvi3TPIABLf7jADPw59K4trMegrkxahirWR5IrNl-yuBj3fcUu8h711gj8cjg7om4/s1600/Abdurrahim+ID.png" alt="3xploi7" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="http://1.bp.blogspot.com/-AzY4b7aWefY/VXoZ6aD1m3I/AAAAAAAACac/jY9906KnHSs/s1600/125x125.jpg" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="http://1.bp.blogspot.com/-AzY4b7aWefY/VXoZ6aD1m3I/AAAAAAAACac/jY9906KnHSs/s1600/125x125.jpg" alt="alt gambar" width="125" height="125" /></a> 
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="http://1.bp.blogspot.com/-AzY4b7aWefY/VXoZ6aD1m3I/AAAAAAAACac/jY9906KnHSs/s1600/125x125.jpg" alt="alt gambar" width="125" height="125" /></a> 
</div>

Jika, kalian mengalami masalah silahkan komen dibawah.

Personal Blog.

9 komentar:

Berikan komentar anda sesuai Topik yang ada.