Kamis, 15 Maret 2012

Cara Membuat Kotak Banner Di Header Blog

Published : 01.32 Author :

 Bikin Space Iklan pada blog kita kayaknya seru nih supaya ada yang mau pasang, ukuran dan bentuknya bisa kita sesuaikan. Nah berikut ini langkah-langkahnya:

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/AVvXsEgyuySyZKKhIGFE5LTO4npjMoZKx5S_3UXvS92pqmJVykMpOoqBiqyXUxykYVXtnxOGMptXgVvPVfw220lf1wDSxcsPZekiA6jmcATYNqC8CpD0kPPv3Y0uwsKz6rnVfXJyIsQbVTtgEcE5/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;}

Label: |

0 komentar:

Posting Komentar

SILAKAN TINGGALKAN KOMENTAR KALIAN
TERIMAKASIH

Langganan: Posting Komentar (Atom)