Memasang gambar pada header sebenarnya gampang-gampang susah. Gampang karena gambarnya tinggal diupload lewat fasilitas yang telah disediakan. Susah karena posisi gambar yang dipasang kadang tidak rapi pada kotak header. Contohnya seperti gambar di bawah ini:
Padahal ukuran gambarnya sudah disesuaikan dengan ukuran header (jika belum tahu cara menyesuaikan ukuran gambar dengan header ini bisa dilihat caranya melalui tulisan ini). Tetapi kenapa posisinya masih belum pas? Bahkan juga terlihat beberapa garis pinggir (border) yang terasa mengganggu. Kemudian juga ada jarak antara header dengan navbar di atasnya.
Jika masalah ini terjadi pada blog anda,saya ingin berbagi pengalaman melalui beberapa langkah berikut (kebetulan pada contoh ini saya menggunakan template minima):
1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.
2. Kemudian klik pada Edit HTML.
3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.
4. Kemudian carilah kode: #header
5. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter,maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.
6. Perhatikan beberapa baris kode dibawahnya,seperti terlihat di bawah ini.
border:1px solid $bordercolor;
text-align:center;
color:$pagetitlecolor;
}
7. Anda tidak usah bingung jika semua kode ini tidak sama dengan blog anda,karena sangat tergantung pada jenis template yang anda gunakan. Yang penting adalah prinsipnya. Sekarang gantilah angka 5 dengan angka 0agar posisi gambar tepat pada kotak header. Dan juga ganti angka 1 dengan angka 0 untuk menghilangkan garis pinggir pada headernya. Kemudian klik SIMPAN TEMPLATE dan tunggu hingga proses selesai.
8. Sekarang lihatlah perubahannya dengan mengklik Lihat Blog.
9. Sebagai contoh headernya akan menjadi seperti ini:
10. Tampak posisi gambarnya sudah tepat pada kotak header. Tapi masih tersisa satu garis pinggir lagi. Jika anda belum puas dengan tampilan tersebut maka header ini masih bisa diperbaiki. Sekarang masuk lagi ke halaman Tata Letak, klik Edit HTML,dan klik Download Template Lengkap. Kemudian cari kode #header-wrapper
11. Perhatikan beberapa kode di bawahnya,sehingga terlihat seperti di bawah ini:
margin:0 auto 0px;
border:1px solid $bordercolor;
}
12. Sekarang gantilah angka 1 dengan angka 0 untuk menghilangkan garis pinggir header yang masih tersisa tadi.
13. Tinggal satu langkah lagi. Lanjutkan dengan mencari kode
#outer-wrapper Lalu perhatikan beberapa kode di bawahnya,sehingga terlihat seperti di bawah ini:
margin:0 auto;
padding:10px:
text-align:$startSide;
font-family:verdana;
}
14. Sekarang gantilah angka 10 dengan angka 0 untuk menghilangkan jarak atau merapatkan header dengan navbar diatasnya. Jika sudah kliklah SIMPAN TEMPLATE.
15. Sebagai contoh maka hasilnya akan tampak seperti gambar dibawah ini. Gambarnya sudah tepat pada kotak header,tanpa garis pinggir dan juga sudah merapat ke atas. Sebagai tambahan,jika anda juga kurang puas dengan tampilan navbar yang ada di atasnya,maka navbar tersebut juga bisa dihilangkan. Caranya bisa dilihat melalui tulisan ini.
Jika masalah ini terjadi pada blog anda,saya ingin berbagi pengalaman melalui beberapa langkah berikut (kebetulan pada contoh ini saya menggunakan template minima):
1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.
5. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter,maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.
#header{
margin:5px;border:1px solid $bordercolor;
text-align:center;
color:$pagetitlecolor;
}
7. Anda tidak usah bingung jika semua kode ini tidak sama dengan blog anda,karena sangat tergantung pada jenis template yang anda gunakan. Yang penting adalah prinsipnya. Sekarang gantilah angka 5 dengan angka 0agar posisi gambar tepat pada kotak header. Dan juga ganti angka 1 dengan angka 0 untuk menghilangkan garis pinggir pada headernya. Kemudian klik SIMPAN TEMPLATE dan tunggu hingga proses selesai.
11. Perhatikan beberapa kode di bawahnya,sehingga terlihat seperti di bawah ini:
#header-wrapper{
width:900px;margin:0 auto 0px;
border:1px solid $bordercolor;
}
12. Sekarang gantilah angka 1 dengan angka 0 untuk menghilangkan garis pinggir header yang masih tersisa tadi.
13. Tinggal satu langkah lagi. Lanjutkan dengan mencari kode
#outer-wrapper Lalu perhatikan beberapa kode di bawahnya,sehingga terlihat seperti di bawah ini:
#outer-wrapper{
width:900px;margin:0 auto;
padding:10px:
text-align:$startSide;
font-family:verdana;
}
14. Sekarang gantilah angka 10 dengan angka 0 untuk menghilangkan jarak atau merapatkan header dengan navbar diatasnya. Jika sudah kliklah SIMPAN TEMPLATE.
15. Sebagai contoh maka hasilnya akan tampak seperti gambar dibawah ini. Gambarnya sudah tepat pada kotak header,tanpa garis pinggir dan juga sudah merapat ke atas. Sebagai tambahan,jika anda juga kurang puas dengan tampilan navbar yang ada di atasnya,maka navbar tersebut juga bisa dihilangkan. Caranya bisa dilihat melalui tulisan ini.
Tidak ada komentar:
Posting Komentar