earth

Guestbook

/* Iklan google ads */
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(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 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 .....
  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    63 komentar

    Ini dia tema yg ditunggu2..
    Coba aah..Thank's kang :)

    4 Juli 2010 08.44  

    Sangat menarik infonya, hatur nuhun pisan :)
    Maaf baru mampir lagi...

    4 Juli 2010 17.11  

    headernya memang cantik kang aku kalau pasang header sering kelebihan besarnya

    5 Juli 2010 13.36  

    Thanks bt share infonya...!!!
    Good blog and good post.

    5 Juli 2010 15.34  

    keren banget kang...header emang perlu buat kop...btw punyaku lagi ada problem neh...kolom komentarku gemblung...udah ada yang komen tapi ko komenya ga muncul yah..???
    mumet aku jan...

    7 Juli 2010 08.23  

    kunjungan gan .. ya emang keren klo bisa pake header sendiri... sukses ya kang ... oiya mau tukeran link boleh ya... ditunggu kunjungan dan saran-saran maklum lagi belajar ngeblog.. Linknya udah aku pasang kang ... matur nuwun

    7 Juli 2010 12.59  

    jiah.... blog kog helpful banget ya....??? jadi ngiri ne. hehehe. mantaf gan...

    12 Juli 2010 13.25  

    Wah... hebat si mas.... bikin header nya,
    bisi dibikinin header mas saya?!

    12 Juli 2010 21.29  

    Udah lama nih aku cari tutorial tentang ini.. dan baru ketemu disini.
    Thanks ya Kang, udah bagi2 ilmu. Ijin utk bookmark dulu deh dan akan dicoba nanti2 kalau ada waktu longgar... :D

    13 Juli 2010 23.15  

    wah, saya terkadang sedikit repot mengurus ini kang !!!
    Thnks tutornya yach kang, sukses selalu !!

    14 Juli 2010 21.43  

    wah kang emang keren juga ni,trus tu masalah headernya kita upload dmn kang?

    16 Juli 2010 20.56  

    memang jika pintar melakukan modifikasi, header akan menjadi lebih menarik tentu sesuai dengan selera kita ya kang
    Sukses Slalu!

    17 Juli 2010 02.09  

    mantap...hihihihi
    sae kang?

    17 Juli 2010 20.14  

    alhamdulillah mulai bisa ngeblog deui, dua bln kamari mah di-udag2 nyieun thesis + persiapan ujian. Ujian beres. Insya Allah wisuda tgl 29 juli di Taman Mini

    18 Juli 2010 15.34  

    mantap kawand..
    PERTAMAX..
    salam berkawand

    18 Juli 2010 23.27  

    kemana kang kok nggak update

    21 Juli 2010 12.27  

    Tok tok, Assalamu'alaikum...
    Kang... apa kabar ? Kok lama menghilang..?

    7 Agustus 2010 22.18  

    maaf lama tidak berkunjung...
    makasih banyak tutorialnya, sangat perlu agar tidak monoton....biar ngeblognya tetap bersemangat.

    selamat menyambut bulan suci ramadhan, mohon maaf lahir dan batin.

    9 Agustus 2010 10.22  

    salam sobat
    keren dan menarik ,setelah dirubah dan ditambah image header dengan desain sendiri.
    selamat menjalankan ibadah puasa.
    mohon maaf lahir dan batin bang Enes.

    10 Agustus 2010 11.11  

    salam persahabatan
    saya sudah pasang banner akang di blog saya
    mohon kiranya banner blog sys dpt di pasang di blog akang

    22 Agustus 2010 10.45  

    boleh juga niih tambahan ilmunya, izin tuk copas mau dipelajari lebih lanjut lagi, kalo sudah siap baru action

    7 September 2010 17.35  

    sob tukeran link yuk,.. thx

    11 September 2010 20.01  

    salamsobat
    lebih menarik dengan desain sendiri ,headernya.
    walau sudah telat,minal aidin walfaidzin bang Enes.
    maaf baru berkunjung kesini setelah mudik.

    26 September 2010 11.13  

    nice blog'
    Thanks for info n giving me ideas...



    jobs:diamonds.........

    17 Oktober 2010 04.11  

    Terima kasin bro bisa diterap di blog ku

    23 Oktober 2010 20.52  

    lami teu ngeblog alias vakum....kumaha kang damang?

    24 Oktober 2010 00.26  

    THANK FOR INFONYA
    http://endriagus.blogspot.com/

    28 Oktober 2010 10.06  

    Keren banget sobat...
    Kalau berkenan, Kita tukeran link yuk....Link anda dah kami pasang di link partner..
    Terima kasih.
    From: Chenk Rahman

    4 November 2010 01.51  

    Artikel dan blognya bagus juga, komentar juga ya ke blog saya www.infonotesharian.blogspot.com

    16 November 2010 13.21  

    saya udah coba cara ini kang..tapi masih beluam berhasil. ada kemungkinan lain gak kang??

    23 November 2010 00.48  

    nice kk tutorialnya :D
    udah dicobain

    kunjungi dan follow ya
    pabriktrick.co.cc

    7 Desember 2010 15.33  

    Link Back yea Sobat..sialnya..linknya udah aku masukin di blog aneeeee..

    17 Desember 2010 02.45  

    Udah dicoba kang tapi malah blog jadi berat ya..dihapus lagi.

    19 Desember 2010 10.46  

    baru ketemu nih yg dibutuhkan, makasih ya berguna bgt.

    22 Desember 2010 09.22  

    gan bkin header nya klo mo bikin online dmn yah?

    23 Desember 2010 08.44  

    Blog dan artikelnya bagus, komentar juga ya di web blog saya www.when-who-what.com

    29 Desember 2010 12.32  

    Wah thanks Infonya gan.........
    Sekalian Blogwalking nih ..
    Kalo sempet silahkan mampir ke blog saya . . . . .
    Terima Kasih

    31 Desember 2010 20.29  

    Nice, tapi aq mau nanya........
    gmn caranya biar judul blog itu berada di perataan tengah??

    4 Januari 2011 13.55  

    kunjungan malam sob.. oh ya, banner sudah aku pasang.. pasang balik yah??

    21 Januari 2011 02.33  

    assalamualaikum

    wah terima kasih sharingnya ni kawan.. sangat bermanfaat.. bisa ngerubah header..

    24 Januari 2011 13.34  

    makasih infonya...

    link tukar yuk kang??

    http://fandimin.blogspot.com

    3 Februari 2011 12.54  

    assalamualaikum
    ini kunjungan kesekian kali ke blog sahabat :)
    dan menyimak terus update postingan yang semakin menarik
    sekaligus memberi info bahwa kangmusa telah membuat ebook baru
    "Blog Monetization Options" yang bisa diunduh disini
    terima kasih, saya tunggu kunjungan Anda di kangmusa.com
    salam hangat
    kangmusa

    3 Maret 2011 12.40  

    Sangat bermanfaat... thank infonya
    izin copy ya gan

    13 Maret 2011 09.58  

    makasih info gan.

    www.wedung.com

    17 Maret 2011 18.29  

    follow no >> 908 <<
    visit ne follow me back pls....
    http://hotautoma.blogspot.com
    salam kenal dan sukses selalu...

    4 April 2011 22.38  

    blokwalking,. yaa,. tuker banner, baner sudah saya pasang di blog saya, cek di sini http://craazzmusic.blogspot.com/2011/01/welcome.html

    26 April 2011 17.22  

    trimaksih ya info nya http://bisnisfacebooker.com/?id=ariefb

    16 Mei 2011 17.31  

    BAgus sekali Infonya Kang...

    Kang Enes berkenan bertukar Link...?
    Link akang udah di ADD nih....
    Silahkan cek di www.sekolahpramugari.com

    Terima Kasih...

    19 Mei 2011 08.34  

    kerennnn.... makasih banget dah share....

    7 Juni 2011 13.05  

    dengan susah payah akhirnya bisa juga,,, tolong dilihat kang... masih dalam perbaikan sih

    13 Juni 2011 12.24  

    ambil ilmunya lagi bro,,,
    aku cari2 ketemu disini caranya,,
    thanks..

    1 Juli 2011 21.42  

    Mangstaafff Broo...rame sekali blognya. Ane mo nanya neh..apa semacam Jquery bisa diterapin di blogspot? thanks for sharing

    14 Oktober 2011 01.27  

    Menuju Natal 2017 Semoga anda sehat selalu dan di berikan rejeki yang banyak.

    Tidak lupa kami juga sampaikan kepada para member setia Aslibandar.net Terus bermain dan dapatkan Jackpot yang lebih besar menuju tahun baru 2017.

    Untuk Info lebih lanjut silahkan hubungi kami melalui :

    * Ym: Aslibandar_Cs
    * Phone: 855976375885
    * Fb: AsliBandar
    * Skype: AsliBandar
    * Whatsapp: 85569776588
    * BBM: 2B3C34F4

    Kami Segenap keluarga Besar Aslibandar.net Mengucapkan Selamat Hari Natal Dan Tahun Baru. !!!

    14 Desember 2016 17.55  

    Yang butuh transportasi Murah dari stasiun malang ke jatim park batu. Kami siap membantu.

    5 Juni 2017 12.19  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler