Modifikasi Template Blogspot: Modifikasi Header Blog

Di postingan saya beberapa jam yang lalu telah saya tulis tentang elemen template blogger/blogspot. Header merupkan bagian dari elemen template blog yang dapat dimodifikasi. Apa saja yang bisa kita modifikasi?

Yang dapat kita modifikasi pada bagian elemen header adalah panjang/lebar header, tinggi header, background header dan border header. Kalau menurut saya sih cukup itu saja, kalau ada yang laen, bisa ditambahkan di kolom komentar. Monggo.....

Sebelumnya anda harus log in terlebih dahulu ke blogger.com dengan account anda, jangan pakai account saya yach, hehehe.... setelah itu klik Tata Letak kemudian Edit HTML. Semuanya udah pada tahu donk pastinya???? Oh, iya jangan lupa untuk men-download template lengkap untuk menghindari hal-hal yang tidak diinginkan.

Modifikasi/mengubah lebar header blog:

• cari kode CSS berikut:
  
  #header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
• ubah nilai property width. (semakin tinggi nilainya maka header akan semakin lebar)

Modifikasi/mengubah tinggi header blog:

• cari kode CSS berikut:
  
  #header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
• tambahkan kode berikut diantara tanda { dan }:
  
  height:100px;
  
  Anda dapat menentukan nilainya sesuai keinginan anda. (semakin tinggi nilainya maka header akan semakin tinggi). Contoh:
  
  #header-wrapper {
  width:660px;
  height:100px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
  

Modifikasi/mengubah background header blog:

Cara mengubah warna background header:

• cari kode CSS berikut:
  
  #header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
• tambahkan kode CSS property: background. Anda dapat mengisi properti background dengan warna atau gambar. contoh:
  
  background: #000000 url(http://hosting.com/filegambar.gif) no-repeat top center;
  
  penjelasan:
  
  
  • #000000 = background berwarna hitam
  • url(http://hosting.com/filegambar.gif) = lokasi background gambar
  • no-repeat top center = background gambar tidak diulang / tampil 1 gambar, posisinya dimulai dari atas dan di tengah

Modifikasi/mengubah border header blog:

• cari kode CSS berikut:
  
  #header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
• ubah nilai property border.
  
• 1px = tebal border, dapat anda ubah menjadi 2px, 3px atau yang lainnya
• solid = style border padat, anda dapat merubahnya dengan style border lainnya: dotted, dashed, double, groove, ridge, inset, atau outset
• border:1px solid $bordercolor = warna border yang disesuaikan dengan variabel warna border, anda dapat merubahnya melalui menu Lay Out > Font and Color atau anda dapat mengisinya dengan kode warna html.
• Contoh:
  #header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:2px inset #98bf21;
  }

Kalau semunya sudah selesai, selanjutnya tinggal klik tombol Pratinjau sebelum mencet tombol Simpan Template. Saya kira itu saja sharing saya tentang Modifikasi Header Blog. Udah ngantuk nih,.... capek pula. Pengen cepert-cepet tidur, terus nanti jam 3 sahur. Slamat malam sobat.

Enjoy!!