Modifikasi untuk header

Seiring dengan perkembangan blogger, semakin banyak bermunculan template blogger dengan meodifikasi yang sangat menarik. Dengan kebebasan merubah tampilan yang diberikan oleh Blogger, apalagi dengan adanya peningkatan kualitas widget pada blogger maka perkembangan template blogger semakin tampak berkelas.

Ini juga tidak lepas dari kebiasaan saya yang sering merubah tampilan template, kali ini saya mencoba memodifikasi template minima agar nampak minimalist. Pada pembasahan kali ini, saya mencoba membahas bagaimana trik merubah tampilan header yang diterapkan pada blog ini.

Pada pembuatan background dari header, kita harus tahu berapa ukuran lebar dari template yang telah kita modifikasi. Setelah kita tahu ukuran lebar dan tinggi, dengan bantuan Adobe Photoshop kita akan membuat modifikasi background. Setelah proses pembuatan background selesai, kemudian kita upload pada photobucket. Dari upload ini kita akan mendapatkan URL untuk ditambahkan pada template.

Penambahan URL image yang telah dilakukan akan nampak seperti dibawah ini :

#header-wrapper {
width:970px;
border-bottom:0px solid $bordercolor;
margin:0;
padding:0 0 0px 0;
clear: both;
word-wrap: break-word;
overflow: hidden;
background: url(http://i288.photobucket.com/albums/ll179/ahnning/background-headear-loedinsblog4.gif) no-repeat;
}

Biasanya kendala yang dihadapi bagi pemula adalah jika kita tidak ingin menampilkan judul maupun diskripsi dari blog mengingat keduanya sudah menyatu dengan background yang telah kita buat. Untuk mengatasi hal ini ada beberapa cara termasuk dampak dari perubahan yang telah kita buat.

Langkah pertama :

Adakan perubahan nilai value pada variable, lihat contoh dibawah ini :

<Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 0% Georgia, Serif" value="normal normal 0% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 0% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 0% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

Dari contoh di atas nampak nilai variable adalah 0%, yang pada awal sebelumnya adalah 200% pada Blog Title Font dan 78% pada Blog Description Font.

Langkah ini untuk browser Firefox akan tampak sesuai keinginan, namun apabila kita menggunakan browser Opera atau Google Chrome maka akan muncul Blog title meski dengan ukuran yang sangat kecil sehingga akan menggangu keindahan dari blog kita.

Langkah Kedua.

Dengan menambahkan display:none; pada #header h1 dan #header .description. Lihat contoh setelah ditambahkan.

#header h1 {
display:none;
padding:10px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:-.1em;
}

#header .description {display:none;}

Langkah ini terkadang membuat bagian Main-Wapper dan Sidebar akan ikut naik ke atas.
Untuk mengatasi hal ini, maka kita perlu menambahkan nilai Margin-TOp pada #header-wrapper.