Assalamualaikum...
Kali ini mau jelasin cara ngotak-ngaik widget alias komponen blog bagian header alias kepala blog. Bermula dari munculnya rasa ter-usik saat mantau header blog tercinta ini. Ingin rasanya di obok-obok sedikit, hehe..
Langsung saja, kali ini masalahnya terkait penampakan header blog yang buat pedes mata, dimana widget head bergandengan dengan komponen widget lainnya. Nggak ngarti? Liat penampakan berikut ini!!!
Atau lihat wujud aslinya,
Header model ini biasanya didapat dari kreasi para pembuat template keren. Memang dengan mengotak-atik template (mengganti) dengan template yang keren akan memberikan sedikit kesan canggih pada tampilan blog, meninggalkan template old fashion yang ditawarkan oleh blog biasanya. Nah, niat saya adalah merubah tampilan head yang terbelah dua tersebut menjadi hanya satu bagian saja, yaitu hanya menampilkan gambar yang memanjang selebar ukuran blog. Namun, yang namanya kemajuan teknologi apabila terlalu luas atau terlalu laju jalannya, pasti ada pihak yang kececeran informasi. Pasti ada yang merasa terbodohkan. Termasuk saya. Nah, kebodohan ini akar masalahnya. Bukan tampilan templatenya yang terlalu canggih, hehehe...
Ok, langsung saja. Bagaimana solusinya agar tampilan header nggak terbagi dua dan hanya menampilkan gambar selebar halaman blog? Contohnya seperti ini...
Langkahnya sebagai berikut:
1. Langkah pertama, jadikan komponen (widget) bagian head (kepala) menjadi tidak permanen (widget header biasanya permanen/tidak bisa digeser dan dihapus). Berikut contoh gambar yang widget yang permanen alias tidak bisa dipindahkan posisinya....
Berikut contoh widget yang tidak permanen, alias bisa di pindah-pindah...
Caranya, cari kode berikut di Template >> Edit HTML
.showaddelement=’no‘/>Hapus dan ganti tulisan no dengan yes dan tulisan true dengan false. Lalu simpan perubahannya. Dengan demikan widget head yang sebelumnya permanen/statis akan menjadi widget dinamis. Perlu diingat, apabila widget sudah di formasikan menjadi widget dinamis maka widget bisa digeser atau dihapus.
<b:widget id=’header’ locked=’true‘
Kalau teman teman nggak menemukan kode jenis ini, maka jalan satu-satunya adalah mencari letaknya dengan menggunakan kata kunci "header" (tanpa tanda petik). Cari terus letak komponennya (dengan bantuan Ctrl + F) hingga menemukan komponen yang mirip-mirip komponen berikut....
Keterangan: id='Header1' adalah kode yang menunjukkan ID dari widget header yang akan kita buat menjadi dinamis/tidak permanen. Jadi, setiap widget pasti mempunya ID nya masing-masing. Dengan demikian, teman-teman bisa saja membuat suatu widget apapun menjadi permanen ataupun tidak, asalkan dapat menjumpai ID nya. Cara agar mengetahui ID dari tiap-tiap widget adalah dengan mencari penamaan dari widget tersebut. Nah, kebetulan penamaan dari widget head yang saya contohkan berikut adalah "el-Mabda Publications".
Lalu, langkah selanjutnya adalah sama seperti langkah di atas, yaitu mengganti kode locked='true' menjadi kode locked='false'. Dan juga merubah showaddelement=’no‘/> menjadi showaddelement=’yes‘/>....
(hanya yang berada di baris id=header1')
Selesai. Widget sekarang bisa digerakkan atau dihapus. Jangan lupa di save...
2. Langkah selanjutnya adalah memindahkan atau menghapus widget head tersebut. Jadikan kolom head hanya berisikan 1 komponen/widget aktif. Contohnya...
Perhatikan gambar berikut. Widget head di sebelah kiri telah dihapus. Yang tersisa hanyalah widget gambar yang ada di sebelah kanan. Nah sekarang, tidak adalagi dualisme kolom head. Namun masalah lainnya adalah tampilan gambar tersebut belum bisa dibuat full ke samping. Lihat tampilan kolom head setelah pembuangan widget head berikut...
seperti kita lihat, terdapat celah atau ruang kosong untuk penempatan suatu widget. Bagaimana agar gambar tersebut menjadi full? Bagaimana agar tidak memberikan rongga? Ikuti langkah selanjutnya..
3. Yang jelas, agar gambar memenuhi kedua sisi blog, alias tidak terlalu besar atau terlalu keci caranya adalah dengan memasukkan gambar yang sesuai/pas ukurannya dengan lebar blog. Cara mengetahui ukuran gambar yang pas bagaimana? Cari kode berikut di edit template:
#header-wrapper
contoh hasil pencariannya...
kode "width:980px" adalah ukuran lebar dari blog ini. Maka sesuaikan gambar yang teman-teman inginkan dengan lebar dari blog tersebut. Terkait tinggi gambar terserah anda.
4. Atur posisi dan lebar widget gambar yang ada di head tersebut. Caranya cari kode berikut:
#header2{float:
Ganti float:right (kanan) menjadi float:left (kiri) atau float:center (tengah). Kemudian, sesuaikan ukuran lebarnya dengan lebar blog. Di gambar ini saya harus merubah ukuran width:728px menjadi 980px.
5. Langkah terakhir adalah save, dan jangan lupa mengganti gambar tersebut (yang telah disesuaikan ukurannya dengan lebar blog) pada widget gambar yang terletak di komponen head.
Selamat mencoba dan selamat pusing...
contoh tampilan komponen yang telah dikotak-katik
Artikel Terkait
cukup rumit gan, dari tadi ane gagal mulu' nih -_-
BalasHapuswww.wizamisasi.com
bacanya pelan-pelan aja. Atau mungkin masalahanya beda
Hapus