Home » » Cara Memasang Gambar Header

Cara Memasang Gambar Header

Cara Memasang Gambar Header

Cara Memasang Gambar Header. Gambar header adalah sebagai ciri khas suatu blog. Template boleh sama, tapi gambar header pastilah berbeda. Dan gambar header mampu menggambarkan akan suatu blog itu sendiri. Sebelum mengganti gambar header, siapkan dulu gambar yang akan di upload. Dan sesuaikan panjang ( umumnya sekitar 850 px) dan lebar gambar dengan kolom widget header gambar itu sendiri. Agar tampak lebih rapi sehingga tidak ada ruang kosong pada kolom widget header.

  • Klik Desain..
  • Klik Tata Letak.
  • Pilih dan Klik Edit pada widget header
Cara Memasang Gambar Header
  • Silahkan upload foto dan untuk penempatan gambar header silahkan sesuaikan sendiri.
Cara Memasang Gambar Header
  • Klik Simpan.
  • Untuk mengetahui lebar kolom pada gambar,silahkan lihat di edit pengaturan template sesuaian.
Cara Memasang Gambar Header

  • Klik gambar header untuk mengetahui linknya. caranya klik kanan mouse, pilih view background image.
Cara Memasang Gambar Header
  • Silahkan copy link yang ada di kota adddress bar browser.
Cara Memasang Gambar Header
  • Selanjutkan silahkan buka Edit HTML template
  • Silahkan paste kode tersebut pada kolom Find( Klik CTRL+F dan pastekan kode tersebut ) dan Klik Enter maka akan terlihat/terseleksi link tersebut.
Cara Memasang Gambar Header
  • Selanjutnya silahkan ganti link gambar tersebut dengan link gambar Sahabat.
  • Klik Pratinjau tempalte.
  • Dan Klik Simpan template.

Untuk menghapus atau menghilangkan judul agar tidak ganda dengan judul yang ada di link gambar baru, silahkan ubah font color judul blog ( Header) menjadi transparent.

Cara Memasang Gambar Header

 Misal Contoh kode font Header pada template yang menjadi percobaan dalam postingan ini :
Header
----------------------------------------------- */
#header-wrap {
background:url(http://3.bp.blogspot.com/-BMxkjAKhUdM/UblSbbH7oGI/AAAAAAAAHtU/8Qncsut14e0/s1600/Gambar+header11.jpg) no-repeat;
width:770px;
height:265px;
float:left;
}
#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
float:right;
width:500px;
color:transparent;
text-align:right;
padding:100px 20px 0 0;
}
#header h1 {
height:45px;
font:italic bold 30px georgia;
letter-spacing:0;
margin:0;
padding:10px 0px 0px 0px;
text-transform:none;
text-shadow: 2px 2px 2px color:transparent;
}
#header a {
color:transparent;
text-decoration:none;
text-shadow: 2px 2px 2px color:transparent;
}
#header a:hover {
color:transparent;
}
#header .description {
height:16px;
color:transparent;
font:bold 13px arial;
letter-spacing:0em;
margin:0;
padding:2px 0px 47px 0px;
text-transform:none;
text-shadow: 1px 1px 1px color:transparent;
}
#header img {
margin-left:auto;
margin-right:auto;
}

Ubah warna Font menjadi transparent, silahkan ubah sampai benar-benar judul tidak tampak lagi. Sehingga hasilnya seperti gambar paling atas dipostingan ini.

Cara Praktisnya adalah meletakan kode berikut diatas kode ]]></b:skin>
#header{
display: none !important;
}
Jika lupa cara hosting gambar silahkan kunjungi aritkel Cara Hosting Blogspot, Cara Membuat Site Google dan Cara Hosting Photobucket. Pilih salah satu cara yang menurut Sahabat paling mudah. Cukup sekian Cara Memasang Gambar Header. Semoga bermanfaat. Selamat berkreatif dan Salam ngeblog !

♥♥DjB♥♥

95 komentar:

  1. makasih tipsnya, mas..seneng bgt kalu mampir kemari, soalnya loading blognya cepet banget :)

    BalasHapus
  2. sekarang saya gk berani utak atik kode html, sejak perubahan terakhir, belum ngerti, kalo ngerti mungkin saya bisa coba cara ini pasang header!

    ganbatte :)

    BalasHapus
  3. trimakasih dh berbagi kak,,,,
    boleh d coba tu,,,
    kebetulan dumay lom pasang

    BalasHapus
    Balasan
    1. pasang dong biar makin keliatan dumaynya :)

      Hapus
    2. kak andes,,,,, masih pemula,,,, lagipun pke hp,,,
      hehehehe,,, susah otak atik

      Hapus
    3. blognya @ Maya Kayla tambah cantik

      Hapus
    4. awas mbak may, ada modus tersembunyi nih *hohoho..
      pak blangkon mau meluncurkan rayuan :D

      Hapus
    5. @ andes : sssttttttt.....jangan buka rahasia

      Hapus
  4. hehehe bisa dicoba nih .
    tapi kapan" bisa konsult ya klo akunya gagal . haha

    BalasHapus
    Balasan
    1. kapan aja bisa kok mbak tinggal hub hihi...

      Hapus
  5. sipp nih tutornya bang bumi cocok apalagi jika ingin membuat gambar header pas banget pake cara diatas dengan panduan yang lengkap

    BalasHapus
  6. tentunya biar makin keren yah mas ?? :D

    BalasHapus
  7. wuih, ini yang pengen saya coba....makasih Mas Dj

    BalasHapus
  8. Cocok nih utk pemula...hehehehhe padahal saya pemula juga kan? awalnya sih dulu saya bingung mau ganti background header, tp sekarang dah bisa :)

    BalasHapus
  9. wah mantab , aku belum ngerti kalau pasang header bentuk gambar gif , apa sama penyesuaian size nya

    BalasHapus
    Balasan
    1. iya sama, lebih bagusnya lewat cara atau tahap kedua. memang harus lebih teliti lagi.

      Hapus
    2. cara ke dua aku ga bisa karna template blogku bawaan blogppot

      Hapus
  10. sip dech sob... mudah tapi perlu juga di jelaskan.. biar para blogger yang belum tau bisa paham.. kadang memang ada yang asal tempel saja tanpa melihat ukuran.. biasanya di lakukan oleh blogger newbie.. bawah saya dikit... dikiiiiit bangeeett hehehhehehe

    BalasHapus
  11. Duh kirain ini blog mau berubah jadi warna pink hehehe..., cara pihak 3 dan lewat html belum pernah euy... sangat bermanfaat.

    BalasHapus
  12. makasih infonya gan, sama dengan mas Ndank Nabil, kirain mau dirubah warna pink, biar cucok dan rumpi ... wkwkwkwkwk

    BalasHapus
  13. Tutorialnya mudah dimengerti Mas,kalau bagi pengguna baru blogger ini jadi refrensi diblognya :)

    BalasHapus
  14. mantap tutornya,,,cocok and pas mudah difahami,,,

    BalasHapus
  15. contoh tampilannya kiyut banget :3

    BalasHapus
  16. keren om...
    selalu kepengen kalo liat blog keren kayak gini
    tapi malesnya itu lho yang ga sembuh sembuh :D

    BalasHapus
  17. tamplate dari gambar sendiri ukuran gambar diedit sebelum apa sesudah dipasang ya mas,

    BalasHapus
  18. ijin nyimak ya gan :)
    salam kenal dari kami outbond di malang :)
    jangan lupa kunjungi kami di website kami : http://www.nolimitadventure.com/

    BalasHapus
  19. wah kalau WS belum pernah coba sama sekali...nanti kapan2 mudah2an bisa nyoba mas..

    BalasHapus
  20. wach headernya terasa cantik sekali mas :)

    BalasHapus
  21. kemaren ane pasang lewat edit html kang, judul blognya ane display jadi none..

    BalasHapus
    Balasan
    1. itu cara yang lebih praktis. terimakasih atas tambahannya.

      Hapus
    2. itu cara lebih cepatnya dengan menambahkan [dot]heder{ display: none; } diatas ]]> skin

      Hapus
  22. jadi pengen ganti gbr header nih..
    kayak dulu sering gonta ganti..hehe

    BalasHapus
  23. coba gak ya. soalnya khawatir kalo blog jadi berat, makin sulit terbaca google. tapi ini tips yg menarik. salam sukses, mas bro

    BalasHapus
  24. informasi yang sangat bermnafaat pak tentang cara memasang header blog, cocok untuk blogger pemula seperti saya yang belum banyak tahu tentang blogging. terimakasih sudah mau berbagi. salam :)

    BalasHapus
  25. Warnanya cewek bgt Mas, kayaknya cocok buat mereka2 yg cewek nih

    BalasHapus
  26. keren bin mantep mas, saya bungkus dulu tutorialnya...

    BalasHapus
    Balasan
    1. Trus masukin ke dlm kulkas..biar awet ya mas.. :)

      Hapus
  27. akhirnya saya bisa juga bertandang kemari, setelah kemarin sempat ada gangguan. thks inffonya.

    BalasHapus
  28. Terima kasih Kang tutornya, salam silaturahmi dan happy Blogging!

    BalasHapus
  29. Hadir lagi...happy blogging juga ah...
    Cantik headernya mas..., ayo mas jangan berhenti berkreasi. Lanjutkan...

    BalasHapus
  30. Hihihihi.. males banget klo disuruh bikin header...bikin anak aja deh ane mang hehehe

    BalasHapus
  31. Setuju, header menggambarkan blognya... saya sekarang masih agak bermasalah sama header bawaan template yang sedikit 'ngumpet' dibalik header. Kayaknya mesti dibesarin lagi header atau gimana ya?

    BalasHapus
  32. ijin nyimak ya gan :)
    salam kenal dari kami outbond di malang :)
    jangan lupa kunjungi kami di website kami : http://www.nolimitadventure.com/

    BalasHapus
  33. wih mantap gan tips nya, ntar ane coba deh. makasih untuk info nya gan

    BalasHapus
  34. DjBumi makin mantep aja nih.. apa kabar mang :) maaf baru bisa berkunjung kembali

    BalasHapus
  35. lama nggak dateng, ada tutor baru, saya ijin menyimak ya kang.thks sudah berbagi info.

    BalasHapus
  36. Bagi teman blogger pemula ini jadi refrensi untuk membenahi blognya Mas. :)

    BalasHapus
  37. Mampir sob.

    Maaf baru sempet kunjung. Banyak urusan. :D

    BalasHapus
  38. artikelnya bagus bgt mas.bisa dicoba nee

    BalasHapus
  39. kalau aku kagak neko2 mas, yg penting rajin update aja, udah bersyukur, hehehe

    BalasHapus
  40. trims infonya mas,sangat jadi referensi sekali

    BalasHapus
  41. wahhhh....bener-bener gak rugi deh sob kalo kesini ..selalu dapat pencerahan ilmu....

    BalasHapus
  42. aq blom pny ni mas.., mgkn kapan2 aq coba ya.., makasih *smile

    BalasHapus
  43. Saya dulu sering memasang gambar di header pak, tapi ukurannya tidak pernah pas. Jadinya malas mau pasang gambar di blog lagi. Tapi setelah saya baca artikel ini saya agak sedikit-banyak lebih paham agar gambar yang dipasang di header bisa pas dan tepat. Terimakasih banyak pak atas tutorialnya. Sangat membantu seklai :)

    BalasHapus
  44. siiiplah, aku coba utak atik lagi ah.. jd cara menghilangkan judul aslinya itu dgn membuatnya transparan ya sob?

    BalasHapus
  45. bagus tipsnya,,kira2 H1 nya terindeks ga gan? kunjung balik digubuk saya

    BalasHapus
    Balasan
    1. itulah kelemaan template bawaan blospot....ada yang harus menambahkan kode h1 dan link gambar ditemplatenya.

      Hapus
  46. om kalau cara posting di menu tab gimana sih? kok aku coba - coba gak bisa yah?? tulisannya selalu muncul di home. gak bisa ke menu tab yang sudah dibikin. nateshsp.blogspot.com

    BalasHapus
    Balasan
    1. harus bukanya lewat laman, dan pilih laman yang akan di dibuat posting. coba kunjungi halaman ini :
      http://www.djangkarubumi.com/2012/12/cara-membuat-tab-menu-sederhana.html .

      Hapus
  47. Bang ngunain artiser juga ga,kalua ya mau tanya-tanya ni !

    BalasHapus
    Balasan
    1. Saya masih setia dengan bawaan blogspot. kan gampang tinggal menuju ke tkp silahkan kunjungi :
      http://www.djangkarubumi.com/2012/11/membuat-blogger-template-dengan.html

      Hapus
  48. Balasan
    1. caranya gampang kok, blog itu sangatlah mudah dan sederhana mengotak-atiknya. awal mula memang pusing sedikit.

      Hapus
  49. Artikelnya menarik,salam kenal dan semoga sukses..!

    BalasHapus
  50. sudah saya coba langkah yang pertama gan, tapi kok g bisa ya

    BalasHapus
    Balasan
    1. model template sampeyan dari pihak ke tiga kah ? Coba pake cara ke dua. Tadi aku sudah berkunjung ke blog sampeyan. Terimakasih.

      Hapus
  51. numpang visit blog ane:
    shotware.blogspot.com

    BalasHapus
    Balasan
    1. tadi aku udah berkunjung balik. Tapi kenapa tak tampak ruang komentnya ?

      Hapus
  52. nice info :))

    http://moeclazh.blogspot.com/

    BalasHapus
  53. tambah tutor cara bikin gambar..yg khususu suntuk header......biar lebih komplit.
    sy coba om...............

    BalasHapus
  54. waktu klik linknya gamabr headernya kok cuma keliatan 3/4 aja sedangkan di hasil nya kok bisa meleber melebihi menu navigasi gt gambar headernya? gmn cara bikinnya tuh gan?

    BalasHapus
  55. Ikut nyimak aja dech, thanks telah berbagi, nice shared....

    BalasHapus
  56. Terima kasih paa...sudah dipraktekan dan berhasil..

    BalasHapus
  57. Saya sudah coba & berhasil, namun untuk beberapa template ko' tidak bisa ya? Di pengaturan Sesuaikan, Tata Letak ada pesan 'tidak diizinkan untuk template ini" hm... ada solusi bang?

    BalasHapus
  58. wahhh kerenn

    kunjung balik yah ke blog saya perpustakaanxplor.blogspot.com

    BalasHapus

Selamat datang Sahabat blogger !
Terima kasih telah meluangkan waktunya.