Mengganti Header blog dengan gambar/image dengan mudah

Teman- teman pasti tahu apa itu header??. header adalah kepala blog bisa dikatakan bagian kepala. karena letaknya adalah paling atas. salah satu dari banyak faktor yang dapat menarik perhatian orang adalah tampilan dari blog itu sendiri, Header juga termasuk di dalamnya. Tampilan header yang keren dan cool pasti akan menarik perhatian pengunjung blog dan memunculkan rasa ingin tahu yang tinggi. Kalau pada postingan sebelumnya kita telah membahas bagaimana menghilangkan/ hidden judul blog yang ada pada header dan juga cara menghilangkan deskripsi judul blog yang ada di header

Pada sesion kali ini kita akan belajar bagaimana cara mengganti header blog dengan gambar yang kita buat sendiri, mengatur tampilan header, ukuran-ukurannya. sebenarnya semua itu mudah asalkan kita tahu dasar- dasarnya. Kali ini akan saya contohkan sebagai kelinci percobaannya Blog saya sendiri, he he he.... OK,....lanjut sob. Bagi yang sudah bisa diam dulu ya, bagi yang belum bisa mari kita simak artikel berikut ini. Tetapi kali ini untuk image/ bahannya membuat header kita sedikit-sedikit harus nyanthol atau faham sama aplikasi desain grafis seperti Adobe Phhotoshop, Corel Draw, atau lainnya.

Secara umum header dalam suatu blog memiliki kode css seperti di bawah ini:

#header-wrapper{

 width:900px; /* mengatur lebar header kita */
 height:170px; /* mengatur tinggi header */
 background:#ffffff url("isi dengan alamat gambar kamu")no-repeat;

 padding:0;

 margin:0px auto;

 border:0px solid;

 overflow:hidden}

Jadi kalau kita mau membuat header terlebih dahulu haru mengerti dulu berapa ukuran dari pada header blog kita. kita bisa mengatur tingginya maupun lebarnya. kalau kita sudah menentukan tinggi dan lebarnya langkah selanjutnya buat gambar yang mau kita pasang di header kita. misalkan saya buat gambar dengan ukuran 900 px x 170 px . kalau sudah jadi kita upload gambar tadi ke tempat hosting image kita misalkan di blogger, photobucket, imageshack. imagehosting, tinypick, atau di tempat lainnya. selanjutnya cara pemasangannya:

• Login dulu ke akun blogger teman- teman
• Pada Dashboard pilih Tata Letak - Edit HTML
• Untuk mengantisipasi terjadinya kesalahan fatal, jangan lupa Back Up template kita dengan mengeklik Download Template lengkap
  
• Centang kotak Expand Template Widget
• Tekan Ctrl + F untuk memunculkan jendela pencarian. cari kode yang mirip dengan kode  di bawah ini. [fokus saja pada kode yang berwarna hijau]
  
  
  
  

  #header-wrapper{
  width:900px;
  height:170px;/
  background:#ffffff ;
  padding:0;
  margin:0px auto;
  border:0px solid;
  overflow:hidden}
  

  
  
  
  
• Tambahkan url gambar [misal url gambarnya = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6JwTGGVbSH0GZQJNi0Hfkm7fVvu3KuGQkuyerZbrf0lWAUn2cP3WbtkJIRyb6u302nDjm7MfoFk6dMbr8sK6E_H201-ZA96J7AO2xdKXPH12r1YaZY3XU8wvW3jBDe6tO3Oc8RgeEPMv/s1600-r/didikweta.jpg]yang kita buat dan hosting tadi sehingga menjadi seperti ini
  
  
  
  

  #header-wrapper{
  width:900px;
  height:170px;/
  background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6JwTGGVbSH0GZQJNi0Hfkm7fVvu3KuGQkuyerZbrf0lWAUn2cP3WbtkJIRyb6u302nDjm7MfoFk6dMbr8sK6E_H201-ZA96J7AO2xdKXPH12r1YaZY3XU8wvW3jBDe6tO3Oc8RgeEPMv/s1600-r/didikweta.jpg)no-repeat;
  padding:0;
  margin:0px auto;
  border:0px solid;
  overflow:hidden}
  

  
  
  
  
• Klik pratinjau untuk melihat preview atau langsung klik Simpan Template