Cara Membuat Kotak Banner Di Header Blog

Written By Adsloko on Senin, 20 Februari 2012 | Senin, Februari 20, 2012

Posting Cara Membuat Kotak Banner Di Header Blog ditujukan untuk menjawab pertanyaan saudara Andre Nafilata pada posting membuat kotak banner sponsor blog. Sebenarnya cara ini adalah sebagian kecil cara untuk membuat sebuah kotak banner di bagian header. Perlu dicatat bahwa tipe header sebuah blog beraneka ragam ada sebuah header yang kemudian dibagi lagi menjadi dua bagian yaitu kanan dan kiri atau tidak dibagi lagi seperti yang akan saya sampaikan pada kesempatan kali ini.

Untuk membuat kotak banner tipe ini, saya akan menggunakan cara menempelkan kode kotak banner pada bagian kode HTML-nya. Untuk lebih ringkasnya ikuti saja langkah-langkah berikut ini:

1. Buka Dasbor blog

2. Klik tab Rancangan -> Edit HTML

3. Cari kode <b:skin><![CDATA[/*
4. Letakkan kode CSS berikut setelah kode <b:skin><![CDATA[/*

div.adblock#ads125 A {
    BORDER-RIGHT: #ccc 1px solid;
    BORDER-TOP: #ccc 1px solid;
    BORDER-BOTTOM: #ccc 1px solid;
    BORDER-LEFT: #ccc 1px solid;
    WIDTH: 125px;
    COLOR: #666;
    HEIGHT: 125px;
    DISPLAY: block;
    FLOAT: left;
    MARGIN: 0px 0px 10px 0px;
    COLOR: #888;
    FONT-FAMILY: verdana,sans-serif;
    TEXT-DECORATION: none;
    FONT-WEIGHT: 700;
    FONT-SIZE: 12px;
    BACKGROUND: #e7e7e7;
    LINE-HEIGHT: 1000%;
    TEXT-ALIGN: center
}

div.adblock#ads125 {
    DISPLAY: block; WIDTH: 100%
}

div.adblock#ads125 A:hover {
    BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #999 1px solid; COLOR: #333; BORDER-BOTTOM: #999 1px solid
}

5. Cari kode header "<div id='header-wrapper'></div>" yang biasanya diletakkan setelah kode <body>
6. Copy dan paste kode di bawah ini setelah kode <div id='header-wrapper'>

<table cellpadding='0' cellspacing='1'>
<tr>

<td>
<div class='adblock' id='ads125'>
     <a href='alamat tujuan' title='Advertise Here 125 x 125 px'>Advertise Here</a>
</div>
</td>

<td>
<div class='adblock' id='ads125'>
     <a href='alamat tujuan' title='Advertise Here 125 x 125 px'>Advertise Here</a>
</div>
</td>

<td>
<div class='adblock' id='ads125'>
     <a href='alamat tujuan' title='Advertise Here 125 x 125 px'>Advertise Here</a>
</div>
</td>

<td>
<div class='adblock' id='ads125'>
     <a href='alamat tujuan' title='Advertise Here 125 x 125 px'>Advertise Here</a>
</div>
</td>

<td>
<div class='adblock' id='ads125'>
     <a href='alamat tujuan' title='Advertise Here 125 x 125 px'>Advertise Here</a>
</div>
</td>

</tr>
</table>

7. Klik tombol Simpan Templates untuk menyimpan perubahan

8. Selesai, sebagai contoh lihat blog berikut

Perlu diingat bahwa kode header <div id='header-wrapper'> kode </div> dapat berisi berbagai macam kode. Jika header hanya ingin diisi oleh kotak banner maka hapus saja semua kode yang berwarna merah (kode).

Dan yang perlu diperhatikan bahwa tinggi dan lebar header untuk setiap blog berbeda-beda maka oleh sebab itu lakukan perubahan, jika tinggi header lebih kecil dari tinggi banner yang diinginkan melalui kode CSS-nya.

Kode CSS

#header-wrapper{width:960px;margin:30px auto 15px;height:80px;padding:15px 0px 15px 0px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZZLDFN-WqK_u98iQeeOtRzQx28YZIU1G9lkY8AwiRt3aMG_jX26xgyOU81S7-RJWgrVxuYr-em-vYtoP8c-g5qWi2Zuf6D1zHyGv89eFqjtqP1lG2EKxKIgWNkhi-fH3mG99xgVeXTqed/s1600/header-bg.png) left top repeat-x;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;overflow:hidden;}

Share this article :