Mengganti gambar pada header blog

Agar tampilan blog anda sesuai dengan topik yang diusung, tentunya peran template sebagai antarmuka turut menjadi perhatian anda. Pada kesempatan kali ini saya mencoba mengestafetkan pengetahuan yang saya ketahui yang sumbernya juga dari internet:

1. Sebagai langkah awal silahkan masuk ke blog anda kemudia pilih tab "design"-"page element"-"edit header" yang umumnya terletak dibawah navbar

2. Up-load gambar anda: Pada bagian image terdapat dua opsi/ pilihan; jika gambar anda ambil dari komputer lokal milik anda maka pilih bulet "from your computer", namun jika gambar diambil dari sumber lain yaitu web silahkan pilih opsi ke dua yaitu "from the web".

3. Selanjutnya untuk penempatan lokasi/ placement anda akan dihadapkan kembali pada beberapa pilihan, namun kali ini anda cukup memilih "behind title and description"

4. Sebagai langkah akhir tekan tombol "save"

Jika gambar yang anda gunakan kurang pas tata letaknya, antara gambar header dengan body template tampak terpisah alias kurang sinkron, anda bisa atur gradasinya melalui "edit HTML Template". Caranya cukup simpel; Kasih tanda centang "Expand Template Widget" lalu Cari kode #header-wrapper biasanya kode tersebut berada sebelum kode </head>. Jika tidak ada maka silahkan cari yang mendekati kode tersebut. Selanjutnya sisipkan kode di bawah ini tepat setelah kode tersebut di atas. Jika kode template bawaan ada yang susunannya mirip silahkan di hapus salah satu.

/* Header-----------------------------------------------*/
#header-wrapper{width:950px;margin:0 auto 0px;height:60px;padding:34px 0;margin-bottom:5px;background: url(http://i1120.photobucket.com/albums/l487/taekwondosmaven/Taekwondo/banner2.jpg) center top no-repeat;}
#header-inner{background-position:center;margin-left:auto;margin-right:auto} #header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:47%;height:72px;overflow:hidden;} #header h1{margin:0 5px 0;padding:5px 0 0 10px;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;font-size:40px;line-height:40px;color:#312B27;}
#header .description{padding-left:17px;color:#312B27;line-height:14px;font-size:14px;padding-top:0px;margin-top:0px;}
#header h1 a,#header h1 a:visited{color:#FF8000;text-decoration:none}

Jika kode dalam kotak diatas sudah ada seluruhnya dlm susunan kode template blog anda, selanjutnya yang perlu anda lakukan hanyalah mengganti kode: (http://i1120.photobucket.com/albums/l487/taekwondosmaven/Taekwondo/banner2.jpg) dengan alamat gambar latar pilihan anda. Kalau gambar yang anda kehendaki masih tersimpan di laptop/ PC silahkan di upload terlebih dahulu ke hosting gambar (bisa yang gratisan). Untuk pengaturan selebihnya (Ukuran, warna, fonts, dll) silahkan di uji-cobakan sendiri dari kode di atas.

untuk lebih jelasnya anda bisa klik link berikut:
http://www.youtube.com/watch?v=374i1QK8pOs&feature=related

Posted by Zuhry D'Explorer