Mengubah Dan Menambah Image Header Dengan Desain Sendiri

Browse » Home » CSS dan Javascript » Mengubah Dan Menambah Image Header Dengan Desain Sendiri

Mengubah Dan Menambah Image Header Dengan Desain Sendiri

Ditulis oleh Kang eNeS Minggu, 04 Juli 2010. 07.30
Label: CSS dan Javascript komentar (57)

Mungkin banyak di antara sobat yang merasa tampilan header blognya terlihat biasa dan tulisan judul blognya hanya sebatas text dengan jenis dan warna huruf yang terkesan monoton. Jika kamu kreatif dan cukup menguasai aplikasi gambar, baik itu Corel, Photoshop, atau yang lainnya, header tersebut bisa kamu ubah dengan desain yang kamu sukai.

Untuk mengubah tampilan header ini ada dua cara, tergantung dari template yang digunakan. Pertama, mengubah gambar header jika template yang digunakan sudah memakai gambar header. Kedua, menambah gambar header jika template yang digunakan belum memakai gambar header.

Mengubah Gambar Header Pada Blogspot

Sebagai contoh pada cara ini saya menggunakan template Art Template.

Dari dasbor, pilih Rancangan - Edit HTML.
Lakukan duplikasi template untuk jaga-jaga jika bermasalah.

Carilah kode CSS untuk header (dalam beberapa template yang lain menggunakan kode header-wrapper), misalnya seperti ini:

#header {
width: 1000px;
height: 176px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRd9SKAV_OQTfE-XAsJ3l_BeSwoLDxynKJh9ipUX3O9VItANLjwLG9dCJyOpwrfg1JH7D77T9iyV23OGL_aegCE_BerO0bUXMbRhrBuqptFLM7vYiPY7pNX2P8KMGPAze3CkH48x7rrkSM/s1600/header_bg.jpg) no-repeat;
}

Copy-paste URL gambar header template kamu pada address bar, lalu simpan gambar ke harddisk.
Misalnya URL gambar header pada CSS Art Template di atas seperti ini:
Edit gambar tersebut dengan aplikasi gambar, misalnya jadi seperti ini:
Setelah itu upload gambar hasil edit kedalam image hosting kamu.
Kemudian ubahlah URL gambar pada CSS tadi dengan URL gambar dari image hosting kamu.

Selanjutnya carilah kode berikut (supaya mudah, cari id='Header1'):

<b:widget id='Header1' locked='true' title='Judul Blog Kamu (Header)' type='Header'/>

Hapus kode tersebut lalu Simpan Template.

Sebagai contoh dari hasil editing gambar header Art Template di atas dapat dilihat pada blog ini.

Menambah Gambar Header Pada Blogspot

Untuk template yang tidak ada gambar header-nya saya mengambil contoh dari template Amoebaneo.

Langkah 1 dan 2 sama dengan di atas.
Carilah kode CSS untuk header (dalam beberapa template yang lain menggunakan kode header-wrapper), misalnya seperti ini:
```
#header-wrapper {
width: 980px;
height: 70px;
padding-top:20px;  
}
```
Dengan melihat ukuran pada CSS tersebut, buatlah gambar berukuran lebar=980px dan tinggi sesuai keinginan.
Misal gambarnya seperti ini, dengan ukuran 980 x 200:
Setelah itu upload gambar hasil buatan kedalam image hosting kamu.

Kemudian ubah CSS header-wrapper tersebut dan tambahkan perintah background kedalamnya. Misal seperti ini:

#header-wrapper {
width: 980px;
height: 200px;
padding-top:0px; 
background: url(URL gambar dari image hosting kamu) no-repeat;
}

Selanjutnya carilah kode berikut (supaya mudah, cari id='Header1'):

<b:widget id='Header1' locked='true' title='Judul Blog Kamu (Header)' type='Header'/>

Hapus kode tersebut lalu Simpan Template.

Sebagai contoh dari hasil penambahan gambar header Amoebaneo di atas dapat dilihat pada blog ini.

Ok, segitu aja sob. Semoga bermanfaat dan dapat dimengerti .....

Mengubah Dan Menambah Image Header Dengan Desain Sendiri

Artikel Terkait Dengan CSS dan Javascript

57 komentar Posting Komentar

Tambahkan Komentar

10 Artikel Terbaru

10 Artikel Terpopuler

Blog Tutorials

Seputar SEO

HTML Tutorials

CSS dan Javascript

Komputer dan Internet

Agama

Politik

Sosial Budaya

Sekedar Coretan

Yang Baru Dari Sastra Culun

Direkomendasikan Teman Facebook

57 komentar
Posting Komentar