Cara Merubah Tampilan Header Blog

Cara Merubah Tampilan Header Blog.

Misalkan header blog anda menyerupai gambar diatas. Kita sanggup merubah tampilanya, dibawah ini ada 2 cara yang sanggup digunakan.

Cara Pertama: Menggunakan gambar background dengan ukuran yang besar, goresan pena judul dan deskripsi blog disembunyikan. Yang terlihat hanyalah gambar saja dan gambar diletakan dibagian tengah. Kekurangaannya adalah, gambar tersebut tidak sanggup diklik, menyerupai goresan pena judul-deskripsi blog.

Ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak.

2. Lalu klik Desainer Template > Tingkat Lanjut > Tambahkan Css.

3. Selanjutnya masukan isyarat ini didalamnya.

#Header1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtkj7yDlHzk91KUy6zEdWhi3ic1fCElY5DgidrnVlX6BSwLjh4gk5iZfNITloMQ9qwa0PxkrUOQGx-Bo7JfaPUUGZpPrDk88bLWCIhGP3tO7_qdHAUiyfTfsvM7tp2cbpd8quRGXhnUg/s1600/Fandra+Juani.jpg)no-repeat center;margin:-40px 0px -40px 0px;}
.Header h1{ visibility: hidden;}
.Header .description{ visibility: hidden;}

 Keterangan kode:

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtkj7yDlHzk91KUy6zEdWhi3ic1fCElY5DgidrnVlX6BSwLjh4gk5iZfNITloMQ9qwa0PxkrUOQGx-Bo7JfaPUUGZpPrDk88bLWCIhGP3tO7_qdHAUiyfTfsvM7tp2cbpd8quRGXhnUg/s1600/Fandra+Juani.jpg ialah alamat url gambar yang akan dijadikan background.
• no-repeat menciptakan gambar tidak berulang.
• center ialah posisi gambar ditengah, sanggup diganti dengan left(kiri), dan right(kanan).
• margin:-40px 0px -40px 0px; untuk mengatur jarak -40(atas) 0(kanan) -40px(bawah) 0(kiri) dari background gambar.
• .Header h1 goresan pena dari judul blog
• .Header .description goresan pena dari deskripsi blog.
• visibility: hidden; menyembunyikan tulisan.

4. Klik terapkan ke blog, selesai.

Cara Kedua: Menggunakan background gambar dengan ukuran yang lebih kecil. Gambar diletakan disamping kiri, dan goresan pena judul-deskripsi blog di letakan disamping kanannya. 

1. Sama menyerupai cara pertama, tapi pada bab langkah 3 masukan isyarat dibawah ini.

#Header1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKh0zyHK0tJrmUwIbGp0D1sZ4szLjJjpBA3vyphyG1mD-aLk0lQuIxLNQZ2UabsegrcqRBuPjXKM3cWWa3eSNYZCa3Rz6-TL__0ysDCseFVhXrvxJ-_V_6mQWxeR8xfvsY1X9GMpeCBW4/s1600/Fandra-Juani.png)no-repeat left;}
.Header h1{ margin:0px 0px 0px 80px;}
.Header .description{ margin:-20px 0px 0px 80px;}

2. Klik terapkan ke blog, selesai.

Silakan berkreasi sendiri dengan cara-cara diatas, dan baca juga cara cara mengganti judul blog dengan gambar yang sanggup menjadi pilihan anda dalam mengubah tampilan header blog anda. Jika ada yang ingin ditanyakan wacana artikel diatas, masukan komentar dibawah. Semoga Bermanfaat.