Topics :
Home » » Cara Membuat Banner di Header Blog

Cara Membuat Banner di Header Blog


Ungkit - Cara memasang Banner di Header Blog.Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :


Sign in di blogger

Klik menu Template

Klim menu Edit HTML

Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template

Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan


/* Header ----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(ISI DENGAN URL GAMBAR BANNER) no-repeat top center;
}
}


Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :


#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee; <-- hapus (delete)
border-width:1px 1px 0; <-- hapus (delete)
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}


#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee; <-- hapus (delete)
border-width:0 1px 1px; <-- hapus (delete)
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

Klik tombol Pratinjau untuk melihat perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.


Untuk template baru

Bagi sobat pengguna template baru, bisa menggunakan dua cara.

Cara pertama :

Sign in di blogger

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan


/* Header -----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(ISI DENGAN URL GAMBAR BANNER)no-repeat top center;
}
}

Klik tombol Pratinjau untuk melihat perubahan yang ada

Bila sudah OK, klik tombol SIMPAN TEMPLATE

Selesai.

Langkahnya diatas sama dengan yang di template klasik.


Cara kedua : 

Sign in di blogger

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

cari kode berikut pada template sobat :


<b:section class='header' id='header' maxwidgets='1'> 

pada kode maxwidgets='1'. Rubah angka satu menjadi angka 2, sehingga kodenya menjadi seperti ini :

<b:section class='header' id='header' maxwidgets='2'>

Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah : 

Klik menu Elemen Halaman

KLik tulisan Edit yang ada pada elemen Header

Tunggu beberapa saat

Pilih radio button yang ada di samping tulisan dari komputer Anda

Klik tombol Browse...

Pilih banner yang telah di buat yang ada pada komputer sobat

Tunggu beberapa saat sampai proses selesai.

Gambar banner sobat akan di tampilkan

Klik tombol SIMPAN PERUBAHAN

Selesai.

Selamat Mencoba dan Semoga Berhasil


Sumber : http://gariscerdas.com/

1 komentar :

  1. Numpang Promo ya Bos
    Welcome
    POKERVITA
    DAFTAR POKER
    POKER TERPERCAYA
    POKER TERBAIK
    POKER TERNYAMAN
    POKER TERBAIK
    POKER BANYAK BONUS
    Contact Us Person :
    LIVECHAT P`0`K`E`R`V`1`T`A .com
    BBM : D.8.E.B.7.E.6.B
    Salam Sejahtera untuk kita semua ^^

    BalasHapus