Info 2aja - Cara Membuat Kotak Banner Di Header Blog - Kumpulan Berita AGC - Hallo semua selamat datang di blog 2 Aja Kumpulan Info unik, Pada Artikel yang anda baca kali ini dengan judul Info 2aja - Cara Membuat Kotak Banner Di Header Blog - Kumpulan Berita AGC, telah kami persiapkan dengan baik untuk anda baca dan ambil informasi bermanfaat didalamnya. Mudah-mudahan isi postingan Artikel Blogger, yang kami sajikan ini dapat anda pahami. Baiklah, selamat membaca.

Judul : Info 2aja - Cara Membuat Kotak Banner Di Header Blog - Kumpulan Berita AGC
link : Info 2aja - Cara Membuat Kotak Banner Di Header Blog - Kumpulan Berita AGC

Info 2aja - Cara Membuat Kotak Banner Di Header Blog - Kumpulan Berita AGC

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/AVvXsEg0T0XaB5a31Z7DEw8CE6ujGmodZuzRlOKLWBJiDpAPf4vEEkwbmAwmmXpPjz2juGV1toYCcaxb4nf_VQsO74SnvYOJn5cbf7UiThHeVVcvA1C7n-eEek4s22OO4ek6QIHSxwh4O_R4cLtu/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;}

Sampai di sini dulu Artikel Info 2aja - Cara Membuat Kotak Banner Di Header Blog - Kumpulan Berita AGC

Sekianlah artikel Info 2aja - Cara Membuat Kotak Banner Di Header Blog - Kumpulan Berita AGC kali ini, kami berharap bisa memberi manfaat untuk teman-teman semua. Terima kasih, jangan lupa baca postingan lainnya.

Anda saat ini sedang membaca artikel Info 2aja - Cara Membuat Kotak Banner Di Header Blog - Kumpulan Berita AGC dengan alamat link https://2aja.blogspot.com/2012/02/info-2aja-cara-membuat-kotak-banner-di.html

Info 2aja - Cara Membuat Kotak Banner Di Header Blog - Kumpulan Berita AGC

Baca juga

Info 2aja - Cara Membuat Kotak Banner Di Header Blog - Kumpulan Berita AGC

Sampai di sini dulu Artikel Info 2aja - Cara Membuat Kotak Banner Di Header Blog - Kumpulan Berita AGC