Cara membuat header baru di template blogger Part 02 - Widget Gambar

Oleh Ndi Uke 23 Jun, 2023 Posting Komentar

Daftar Isi

Part Kedua - Widget Gambar

DEMO

Pada part pertama sudah saya jelaskan apa itu header dan alasan saya mengubah header bawaan template, jadi tanpa basa-basi lagi yo kita lanjutkan tutorialnya dan yang akan saya bagikan kali ini ialah cara menambahkan widget gambar atau widget yang akan menampilkan logo blog kita dan akan menampilkan Judul blog ketika tidak dipasang gambar logo.

Elemen ini sangat penting untuk kita sematkan pada bagian header blog / website maupun aplikasi, karena ini akan merupakan sebuah identitas atau ciri khas bagi blog atau lainnya agar mudah di ingat oleh para pengunjung website kita.

Di artikel sebelumnya kita sudah berhasil membuat layout atau wadah untuk menampung beberapa elemen header yang nantinya bisa di atur sesuai selera masing-masing dan untuk yang baru mengikuti tutorial ini silahkan lihat dulu part pertamanya Part 01.

Menambah Widget Header

Untuk part kedua ini cukup mudah dan singkat saja, setelah kamu berhasil membuat part pertama kemarin langsung saja pergi ke setelan tema kemudian menuju ke tataletak selanjutnya tambahkan widget/gadget baru pada layout yang sudah kita buat lalu pilih Header halaman, contoh seperti gambar berikut.

Silahkan masukan gambar, Judul dan deskripsi, tapi jika sebelumnya memang sudah pernah kamu pasang biasanya akan ter-load otomatis, kemudian simpan widget dan logo pun sudah tampil di Header, namun bagi sebagian template mungkin tampilannya masih tidak teratur maka solusinya adalah dengan memberikannya style atau gaya dengan memasukan Skrip CSS.

Baca Juga

Menambahkan CSS

Untuk membuat header nya rapih silahkan masukan kode CSS berikut, seperti biasa untuk CSS silahkan letakan tepat di atas kode ]]></b:skin>

#Header2{
  width:200px;
  height:40px;
  display:inline;
  overflow:hidden;
 }
.blog-title{
  position:relative;
  margin-top:0px;
 }
#Header2 img{
  height:35px;
  width:auto;
 }

Simpan tema dan lihat hasilnya. Untuk beberapa template mungkin setelan CSS diatas kurang akurat, jadi jika pada template kamu mengalami hal tersebut silahkan atur kembali CSS nya sampai sesuai.

Dengan demikian selesai sudah artikel Merubah Header template part kedua ini dan untuk part 3 kita akan menambahkan ikon menu dan pencarian.