Blogging: Cara agar gambar head (atas) blog bisa penuh. Dilema dualisme head
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 saat dilihat, dimana widged head bergandengan dengan komponen wideget lainnya. Nggak ngarti? Liat penampakan berikut ini!!!
Atau lihat wujud aslinya,
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:
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:
Selamat mencoba dan selamat pusing...
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 saat dilihat, dimana widged head bergandengan dengan komponen wideget 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-wrappercontoh 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
Tidak ada komentar:
Posting Komentar