Posted byTeacher's MessageMenambah 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.
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 :
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
9. Tetap di Edit HTML.
10. Cari KODE #header h1
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;
}
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
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)!
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);
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)!
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);
The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :
» Selamat Berkreasi - E F A «
pusing gan :D
ReplyDelete