Cara Membuat Kolom Baru di bagian Header: Tutorial BloGGeR Modifikasi Blog

Menambah teks atau image di bagian header memang tak bisa dilakukan tanpa mengadakan renovasi ruang header. Desain template dari blogger memang hanya menyertakan ruang untuk judul blog dan ruang deskripsi blog. Membangun kolom baru di bagian ini perlu untuk melakukan penambahan KODE HTML. Cara termudah merupakan satu solusi yang banyak diharapkan karena yang jelas tidak bikin pusing bagi yang belum begitu memahami tentang per"KODE"an (seperti juga aku! Baru latihan dan ternyata sangat asyik !). Penambahan kolom akan kita lakukan di bagian sebelah kanan. Untuk lebar kolom atau tingginya dapat kita atur sesuai kebutuhan, begitupun jumlah kolom yang diinginkan. Satu persyaratan yang harus dilakukan supaya tidak terlalu banyak KODE asli bawaan blogger yang harus di rubah, kamu harus masuk dulu di halaman "Elemen Laman" untuk "memurnikan" kolom header terlebih dahulu. Apabila kolom header sudah dalam kondisi normal, maka perubahan untuk penambahan kolom langsung dapat kita lakukan.

Langkah-langkah yang diperlukan untuk menambah kolom di bagian header :

1. Login ke Blogger.
2. KLIK Tata Letak (Layout).
3. Tampak Susunan Elemen Laman. Cari kolom header (sebelah atas).
4. KLIK Edit pada Header.
5. Hapus gambar yang ada jika kamu menggunakan background image pada header.
6. KLIK Simpan (SAVE).
7. KLIK Edit HTML.
8. Amankan template. Lihat di sini !.
9. Tetap di Edit HTML.
10. Cari KODE #header h1 --> Cara cari KODE lihat di sini !.
11. Bentuk KODE pada #header h1

#header h1{
        background:url("http://www1.blogblog.com/no897/bg_header.gif") no-repeat left top;
        margin:0;
        padding:70px 0 30px;
        line-height: 97px;
        font: normal bold 200% Helvetica, Arial, Verdana, Sans-serif;
        text-transform:lowercase;
        _height: 0px;
}

Keterangan/Catatan :

Tidak semua KODE seperti KODE di atas. KODE CSS tersebut hanya salah satu contoh yang digunakan oleh template Blogger.

Tambahkan KODE berikut persis di bawahnya :

.boksheaderbaru{
        background:yellow;
        border:1px solid blue;
        float:right;
        margin:5px 5px 0 20px;
        width:300px;
}
.boksheaderbaru .atas{
        background:blue;
        border:1px solid orange;
        margin:5px;
        font:14px Arial;
        font-weight:bold;
        color:red;
        height:40px;
}
.boksheaderbaru .tengah{
        background:red;
        border:1px solid blue;
        margin:5px;
        font:16px Arial;
        font-weight:bold;
        color:yellow;
        height:40px;
}
.boksheaderbaru .bawah{
        background:green;
        border:1px solid red;
        margin:5px;
        font:18px Arial;
        font-weight:bold;
        color:#CC99FF;
        height:auto;
        float:right;
}

12. Tambahkan tinggi pada KODE -->

#header{
        height: ...;
        width: ...;
        ...
        ...
        ...
}

dengan menambahkan KODE :

min-height:180px;

bila sudah ada height:...; ganti dengan KODE di atas !

13. KLIK Simpan Template (SAVE template).
14. Setelah tersimpan dengan baik lanjutkan dengan KLIK Expand Template Widget.
15. Cari KODE : --> posisinya di bawah tag <head>

<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>

16. Selipkan KODE berikut di antara <div class='titlewrapper'> dan <h1 class='title'>

17. KODE Tambahan :

<div class='boksheaderbaru'>
<div class='atas'>Kolom Header Baru Bagian Atas</div>
<div class='tengah'>Kolom Header Baru Bagian Tengah</div>
<div class='bawah'>Kolom Header Baru Bagian Bawah</div>
</div>

Sehingga KODE yang baru berbentuk seperti ini :

<div class='titlewrapper'>
<div class='boksheaderbaru'>
<div class='atas'>Kolom Header Baru Bagian Atas</div>
<div class='tengah'>Kolom Header Baru Bagian Tengah</div>
<div class='bawah'>Kolom Header Baru Bagian Bawah</div>
</div>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>

18. KLIK Simpan Template (SAVE Template)!

Keterangan/Catatan :

1. Ganti teks "Kolom Header Baru ...." dengan teks baru.
2. Untuk merubah ukuran teks, rubah KODE --> font: ..px Arial; dengan ukuran yang sesuai.
3. Untuk merubah warna teks, ganti KODE --> color: ..; dengan warna baru.
4. Border bisa diganti warna atau dihilangkan total dengan tidak menyertakan KODE border:1px solid ...;
5. Untuk mengganti warna background, ganti KODE --> background: ..; dengan warna baru.
6. background bisa juga diberikan warna "transparent".
7. Untuk menambahkan background image (gambar) rubah KODE:

background:red; --> sebagai contoh, menjadi :
background:transparent url(image.gif);

Selamat menikmati penampilan baru blog anda !

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :