Mendesain Header Blogger Untuk Mempercantik Blog

Mendesain Header Blogger Untuk Mempercantik Blog

Header merupakan elemen paling atas dalam sebuah blog atau website yang biasanya berisi identitas atau judul dari sebuah situs.

Pada bab ke 4 cara membuat template blogger sendiri ini kita akan mencoba kustomisasi atau mendesain header.

Tak perlu khawatir kostumisasi atau desain header yang akan kita buat hanya sederhana saja yaitu mengganti font, ukuran, dan menambahkan padding.

Mendesain Header Blogger

Menentukan Selektor

Tentukan selektor terlebih dahulu (sekalian belajar CSS ya gaes)

Kita bisa menggunakan inspect elemen pada browser untuk menentukan selektor yang nantinya akan kita gunakan untuk menambahkan properti di CSS.

Karena elemen yang akan kita desain adalah judul pada header, maka blok judul header kita lalu klik kanan, kemudian pilih inspect elemen atau bisa tekan F12 pada keyboard
kustomisasi header blog

desain judul blogspot
Bisa kita lihat, judul kita ada dalam tag H1, namun jika kita hanya menggunakan tag H1 pada CSS maka akan berpengaruh pada elemen H1 lain. Untuk itu kita akan menambahkan selektor lagi didepan H1.

Kita lihat lagi struktur pada inspect element, bisa dilihat bahwa judul H1 kita berada dalam tag <body> <div class='outerWrapper'> <div class='header section' id='header' name='Header'><div class='widget Header' data-version='2' id='Header1'> <div class='header-widget'>
desain judul header blog

Nah tidak usah kita tulis semua tagnya, cukup cari 1 yang sekiranya unik (tidak sama dengan elemen lain). Disini saya menggunakan class header karena nama class tersebut hanya dipakai di elemen header saja. Maka untuk selektornya didapat seperti berikut

.header h1{
CSS
}
Bisa juga menggunakan id=”header”. Selektornya seperti berikut

#header h1{
CSS
}

Menambahkan Padding

Hal pertama yang akan kita lakukan yaitu menambahkan padding.

Padding sendiri berfungsi untuk menambah jarak atau ruangkosong pada elemen.
Tambahkan selektor yang sudah kita tentukan tadi diatas ]]></b:skin> Lalu tambahkan properti paddingnya

.header h1{
padding: 20px 0;
}
Kenapa 20px 0?

Arti dari value tersebut adalah memberikan jarak atas dan bawah sebesar 20px dan kanan kiri sebesar 0px (tidak ada jarak).

Simpan template dan refresh blog untuk melihat hasilnya.

Mengubah Gaya Tulisan

Selanjutnya yaitu mengubah font judul header.

Kita bisa menambahkan properti untuk mengubah gaya tulisan judul header kita.

Biasanya yang saya ubah pada header adalah jenis font, ukuran, dan font weight

Cari kode CSS tadi yang barusan kita buat tadi

.header h1{
padding: 20px 0;
}

Tambahkan beberapa properti untuk mengubah gaya tulisan menjadi kurang lebih seperti ini

.header h1{
 padding: 20px 0;
 font-family: ‘Noto Sans’, sans-serif
 font-size: 1.5em;
 font-weight: 400;
}

Untuk yang masih bingung cara mengubah font bisa baca artikel Cara Termudah Mengganti Font Blogger

Simpan theme dan refresh blog.
Hasilnya kurang lebih seperti berikut.
hasil desain header blogger
Hasil source code pada BAB 4 Mendesain Header Blogger kali ini bisa kalian download untuk belajar melalui tombol berikut

Sampai disini kalian sudah menyelesaikan BAB 4 dalam Tutorial Membuat Template Blog Sendiri Untuk Pemula Terlengkap.
Show comments
Hide comments

No comments: