Cara Merubah Tampilan Header Blog

Cara Merubah Tampilan Header Blog.

Misalkan header blog anda seperti gambar diatas. Kita bisa merubah tampilanya, dibawah ini ada 2 cara yang dapat digunakan.

Cara Pertama: Menggunakan gambar background dengan ukuran yang besar, tulisan judul dan deskripsi blog disembunyikan. Yang terlihat hanyalah gambar saja dan gambar diletakan dibagian tengah. Kekurangaannya adalah, gambar tersebut tidak dapat diklik, seperti tulisan 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 kode ini didalamnya.

#Header1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEFaSqjS2JePwSyzaQjeFG47eUv3JbYWzLDltrWnVb6EtNsZX6DgWv28UycHyZvUo-Q7JYv1LaaZ0LOA0cNak4hdHJaTu5GBCUvvFz20LDwelonDVIpyjjc5IQz3ciditcp-Yn8sJzAE/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/AVvXsEilEFaSqjS2JePwSyzaQjeFG47eUv3JbYWzLDltrWnVb6EtNsZX6DgWv28UycHyZvUo-Q7JYv1LaaZ0LOA0cNak4hdHJaTu5GBCUvvFz20LDwelonDVIpyjjc5IQz3ciditcp-Yn8sJzAE/s1600/Fandra+Juani.jpg adalah alamat url gambar yang akan dijadikan background.
• no-repeat membuat gambar tidak berulang.
• center adalah posisi gambar ditengah, bisa 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 tulisan dari judul blog
• .Header .description tulisan 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 tulisan judul-deskripsi blog di letakan disamping kanannya. 

1. Sama seperti cara pertama, tapi pada bagian langkah 3 masukan kode dibawah ini.

#Header1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoCdRfBTBJvZZaSr13ta1G5xZxoRy37gNIDbhElHpU0ZntvPMibAgswUEL4OvUlcuy3gNLEoymkmbPj10KOK2TJj5gdaa8nBF30B0CstT0ueDi4sKhs1m4uSluEPKYHHJSulkMAgzLPlo/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 bisa menjadi pilihan anda dalam mengubah tampilan header blog anda. Jika ada yang ingin ditanyakan tentang artikel diatas, masukan komentar dibawah. Semoga Bermanfaat.

Tweet