Selasa, 22 Mei 2018
Bagaimana Cara Membuat Image Header Blog Berada di Tengah
Mendesain sebuah blog merupakan suatu keharusan bagi para blogger selain mempercantik tampilan blog kalian, para pengunjung juga akan merasa nyaman dengan tampilan blog kalian. Sekaligus bisa jadi pacuan keseriusaan kalian dalam menggunakan blog.
Membicarakan desain template pada artikel ini saya akan membahas tentang header blog, bagaimana cara untuk membuat header blog berada di posisi tengah ? Pada template dafault blogger desain header berada di rata kiri, namun sudah ada juga template blog yang berada di tengah. Jika template kalian headernya berada di kiri dan ingin merubahnya berada di posisi tengah, maka ikuti tutorialnya dibawah ini tentang cara mengatur header blog berada di posisi tengah.
Seperti contoh diatas saya menggunakan template yang desain headernya berada di posisi rata kiri. Sebelumnya kalian harus mempersiapkan image header yang akan kalian letakan pada header kalian. Mungkin saat belum dipasang image header tittle header sudah berada di tengah, namun setelah memasukan logo header image kenapa berada di posisi sebelah kiri. Jadi yang harus kalian adalah dengan menambahkan CSS baru dengan class atau id pada header template kalian.
Tutorial cara memindahkan posisi header blog berada di rata tengah
Cara yang dilakukan tidak terlalu susah kalian tidak perlu mengedit template blog kalian hanya saja menambahkan Class atau Id baru kedalam template blog kalian dengan mode penyesuaian template. Jika kalian belum pernah melakukan penyesuaian terhadap template blog kalian untuk merubah posisi header berada di tengah maka ikuti saja langkah langkah dibawah ini.
Pertama, login terlebih dahulu ke halaman admin blog kalian. Kemudian pilih Tema / Theme pada menu di sebelah kiri. Pilih yang Sesuaikan.
Kedua, langkah ke 2 pastikan kalian sudah mengetahui id atau class pada image header kalian. Tapi pada umumnya template blog untuk bagian header memiliki id dan class yang sama. Lalu pilih "Lanjutan" => "Tambahkan CSS", pastekan kode css dibawah ini pada kolom kosong.
#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}
Jika sudah dipaste pada kolom kosong tekan enter untuk melihat perubahan pada header kita. Preview template website ada pada bawah kolom, pastikan header image blog berada di tengah.
Ketiga, Jika posisi header image sudah berada di rata tengah maka penyesuaian yang kalian lakukan sudah benar. Langkah selanjutnya kalian pilih Terapkan ke blog untuk save penyesuaian yang sudah kita lakukan. Jika sudah maka ada popup notifikasi tema telah diterapkan. Kemudian kembali ke blogger.
Ketiga, Jika posisi header image sudah berada di rata tengah maka penyesuaian yang kalian lakukan sudah benar. Langkah selanjutnya kalian pilih Terapkan ke blog untuk save penyesuaian yang sudah kita lakukan. Jika sudah maka ada popup notifikasi tema telah diterapkan. Kemudian kembali ke blogger.
Bagaimana jika ingin header image berada di kiri atau kanan ?
Jika sekiranya penyesuaian header image blog berada ditengah kurang memuaskan desain template kalian maka kalian bisa juga mengatur penyesuaian posisi header sesuai dengan keinginan kalian. Caranya cukup mudah lihat kembali file css tadi pada bagian #header-inner img hapus margin:auto rubah menjadi float:left/right; pilih right atau left sesuai keinginan kalian. Kemudian terapkan kembali pada blog kalian lihat hasilnya untuk perubahan header kalan.
Kesimpulan
Jadi cukup mudah bukan cara membuat image header blog berada diposisi tengah. Kalian tidak perlu repot repot untuk mengedit html template blog kalian, cukup menambahkan class CSS baru dan melakukan penyesuaian pada template.
Jika masih merasa bingung silakan tinggalkan jejak dengan memberi komentar pada kolom dibawah ini. Jika bermanfaat dan berfungsi pada blog kalian tidak ada salahnya juga meninggalkan jejak di kolom komentar yah.
Happy blogging guys..
Baca Juga :
| - Cara menghilangkan description blog pada header |
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar