Kang Sofi

Knowledge Sharing is fun

Cara Mengubah Dan Menambah Image Header Dengan Buatan Sendiri


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(http://3.bp.blogspot.com/_XByc9SCisZM/SctihhjPieI/AAAAAAAABuw/pPPra-ik1Ig/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 perintahbackground 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.


Selamat Mencoba !


Anda baru saja membaca artikel yang berkategori Tutorial Blog dengan judul Cara Mengubah Dan Menambah Image Header Dengan Buatan Sendiri. Anda bisa bookmark halaman ini dengan URL http://laser-ijo.blogspot.com/2012/02/cara-mengubah-dan-menambah-image-header.html. Terima kasih!
Ditulis oleh: Ahmad Sofihudin - 23 February 2012

Belum ada komentar untuk "Cara Mengubah Dan Menambah Image Header Dengan Buatan Sendiri"

Post a Comment

Rule Komentar :
1. Berkomentarlah dengan sopan
2. Tidak boleh berkomentar yang mengandung SARA
3. Komentar dengan livelink akan di hapus

Contact Form

Name

Email *

Message *