Kali ini saya akan berbagi tutorial bagaimana caranya agar gambar header ada pada posisi di tengah. Sering kita ingin menempatkan gambar sebagai judul pada blog kita, tapi sering saat kita upload gambar kita, letaknya tidak sesuai dengan yang kita inginkan, sering pada posisi kiri halaman blog kita, sehingga tidak pas dengan yang kita inginkan. untuk itu kali ini akan saya tunjukkan bagaimana agar gambar sesuai dengan blog kita artinya gambar berada pas di tengah blog kita.
pertama tama pasang dulu gambar header kita caranya sudah tahu kan?
kalau sudah dan setelah di lihat gambar berada pada posisi dikiri, selanjutnya klik template klik sesuaikan pilih CSS
READ MORE - Tutorial cara agar gambar pada header blog berada di tengah
pertama tama pasang dulu gambar header kita caranya sudah tahu kan?
kalau sudah dan setelah di lihat gambar berada pada posisi dikiri, selanjutnya klik template klik sesuaikan pilih CSS
Lihat gambar berikut
masukan code berikut di dalamnya lalu tekan enter
#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}
Setelah itu silahkan lihat blog anda dengan klik pratinjau kalau dirasa sudah pas silahkan simpan.
disini pekerjaan kita sudah selesai
kalau gambar yang anda pasang terlalu kecil? masukkan code berikut
#header-inner {
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
width: 100%;
height: 100%;
}
Menyelaraskan Header Banner dan Teks Side by Side
Gambar di sebelah kanan dan di sebelah kiri judul:
masukkan code dibawah ini
#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}
Image on the left and title on the right
#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
Catatan: untuk gambar yang terlalu besar, Anda perlu untuk mengubah ukurannya dalam rangka untuk membuat mereka tampil berdampingan dengan teks
Gambar yang ideal kisaran 800pxl x 100
Demikian tutorial kali ini semoga ada manfaatnya untuk anda dan sakses untuk anda, baca tutorial yang lainnya.
