Cara Mengatur Posisi Gambar Pada Header Blog Berada di Tengah, Kiri, atau Kanan dengan Mudah di Blogger - Terbaru 2024

Desain blog yang menarik adalah kunci untuk memberikan kenyamanan saat pembaca mengunjungi halaman blog. Salah satu elemen desain yang penting adalah header blog. Namun, banyak template default blogger menempatkan header di sebelah kiri. Jika Anda ingin memberikan sentuhan lebih pada tampilan blog Anda dengan memposisikan header di tengah, kiri, atau kanan, tidak perlu khawatir. Pada artikel kali ini, saya akan membagikan catatan tentang panduan langkah demi langkah cara melakukan hal tersebut tanpa harus melakukan perubahan yang rumit pada template.

Mengapa Penting?

Memiliki header dengan posisi yang sesuai atau pas dengan gambar yang akan diterapkan pada header itu sendiri, tidak hanya memberikan tampilan yang lebih estetis, tetapi juga memberikan kesan keseriusan dalam pengelolaan blog. Dengan menempatkan header sesuai dengan preferensi Anda, Anda dapat memberikan tampilan yang lebih personal dan kreatif pada blog.

Simak Video nya:

Langkah-langkahnya:

1. Persiapkan Gambar Header

Langkah pertama adalah mempersiapkan gambar header yang ingin Anda gunakan. Pastikan gambar tersebut sesuai dengan tema dan gaya blog Anda.

(Klik gambar untuk memperbesar)

2. Masuk ke Admin Blog

Setelah gambar header siap, langkah berikutnya adalah masuk ke halaman admin blog Anda.

3. Di menu sebelah kiri, cari dan pilih opsi "Tata Letak" atau Layout, Klik "Edit" pada "Gadget Header Halaman", kemudian klik " Pilih File" dan Upload Gambar Header yang sudah disiapkan sebelumnya.

(Klik gambar untuk memperbesar)

Sebelum gambar disimpan perhatikan opsi penempatan gambar. Klik opsi pada "Selain Judul dan deskripsi". Ini penting dilakukan agar judul dan deskripsi blog tidak menimpa gambar header.

Jika sudah maka klik Simpan.

4. Pilih Opsi "Tema" atau "Theme"

Pilih opsi "Tema" atau "Theme". Kemudian, langsung saja klik tombol "Sesuaikan" atau "Customize" untuk mulai melakukan penyesuaian.

(Klik gambar untuk memperbesar)

5. Menambahkan Kode CSS

Pilih opsi "Lanjutan" atau "Advance";

(Klik gambar untuk memperbesar)

klik lambang (segitga kecil); 

(Klik gambar untuk memperbesar)

scroll ke menu paling bawah, dan kemudian pilih menu "Tambahkan CSS" atau "Add CSS". 

(Klik gambar untuk memperbesar)

Maka akan muncul baris untuk memasukan texts kode CSS seperti berikut:

(Klik gambar untuk memperbesar)

Di sini, Anda bisa menambahkan beberapa kode CSS untuk mengatur posisi header.

Secara default header akan berada pada posisi kiri. Jadi, ketika sudah cocok dengan header di posisi kiri, maka tidak perlu memasukan kode apapun.

Berikut ini kode CSS untuk header di tengah:

CSS

#header-inner { 
	background-position: center !important; 
	width: 100% !important; 
	text-align: center; 
} 
#header-inner img { 
	margin: auto; /* Untuk header di tengah */ 
}

    

Code copied!

Jika masih tidak puas dengan posisi di tengah, bisa juga diatur ke posisi kanan, Anda bisa mengubah kode CSS di atas pada bagian ini:

CSS

#header-inner img { 
	float:right; /* Untuk header di kanan */ 
}

    

Code copied!

6. Terapkan Penyesuaian

Setelah menambahkan kode CSS, lihat dan pastikan header blog berada sesuai dengan preferensi Anda; 

(Klik gambar untuk memperbesar)

Jika sudah, tekan tombol "Simpan" atau "Save" di pojok bawah sebelah kanan layar untuk menyimpan penyesuaian.

(Klik gambar untuk memperbesar)

7. Selesai

Selamat,  Anda telah berhasil membuat header blog berada di tengah, kiri, atau kanan tanpa harus melakukan perubahan yang rumit pada template. Kini, blog Anda memiliki tampilan yang lebih menarik dan sesuai dengan selera.

Kesimpulan

Anda dapat dengan mudah mempercantik tampilan blog dengan memposisikan header sesuai dengan keinginan. Tidak perlu khawatir tentang perubahan yang rumit atau edit HTML yang membingungkan. Sekarang, Anda siap untuk membuat blog tampil lebih menarik.

Semoga artikel ini bermanfaat. Jika Anda memiliki pertanyaan lebih lanjut atau ingin berbagi pengalaman Anda, jangan ragu untuk meninggalkan komentar di bawah. Selamat mencoba!