Perubahan pada bahasa edit/html template blogger beberapa waktu lalu
membuat beberapa tutorial untuk merubah ukuran header menjadi tidak
efektif. Sebagai contoh, banyak beredar tutorial cara merubah header
blogger dengan mencari kode ini #header-wrapper pada edit/html template,
padahal kode class css tersebut buat tampilan edit/html yang baru sudah
tidak digunakan lagi.
Merubah Lebar Header Border
Merubah Lebar Header Border
Pada kesempatan ini saya coba sedikit memberikan info mengenai merubah
ukuran header pada tampilan baru editing template blogger. Sebelum
memulai tutorial ini, coba teman-teman rubah dulu background header blog
masing-masing pada menu template >> costumize/sesuaikan >>
kemudian pada halaman desain template pilih advance/tingkat lanjut
>> lalu klik latar/background dan cari header background (latar
header) untuk merubah warnanya agar kita bisa melihat perubahan size
yang akan kita praktekan. Kebetulan pada percobaan ini saya menggunakan
template default blogger yang "minimalist template/template sederhana",
seperti biasa yang saya gunakan adalah template default blogger,
sedangkan pada costumize template yang teman-teman dapat free dari
situs-situs template mungkin tidak berhasil karena setiap template
memiliki hirarki class css yang berbeda.
Jika sudah selesai diwarnai bagian header blognya maka tampilannya akan
seperti ini (kebetulan icon header image saya sudah saya center jadi
tampilannya menjadi seperti ini) :
Pada gambar diatas, bagian sisi header yang saya tandai dengan anak
panah berwarna merah adalah bagian yang akan kita coba untuk
memperlebarnya. Cara merubahnya cukup mudah, cukup gunakan CSS berikut
ini:
.header-outer{
left:-40px;
width:1000px;
height:40px;
bottom:10px;
}
left:-40px;
width:1000px;
height:40px;
bottom:10px;
}
Seperti biasa CSS tersebut ditambahkan pada bagian template >>
costumize/sesuaikan >> pada desain template klik menu
advance/tingkat lanjut >> klik tambahkan css/add css. Pada kode
css yang saya warnai hijau left:-40px;
merupakan kode untuk mengatur kerapatan sisi kanan header dengan
tampilan layar, silahkan angkanya dirubah-rubah sesuai keinginan
teman-teman dengan mencocokan perubahan preview yang tampak pada halaman
desain blogger, dan jika sudah merasa cocok silahkan di save dengan
klik tombol "terapkan ke blogger" pada pojok kanan atas halaman desain
blogger. Kode berikutnya yaitu yang saya warnai biru muda width:1000px;
merupakan kode untuk menyesuaikan panjang header di sisi kanan,
silahkan di sesuaikan angkanya menurut selera teman-teman. Kode
berikutnya yaitu yang saya warnai orange height:40px;
merupakan kode untuk merubah ukuran tinggi header, seperti biasa
silahkan di sesuaikan dengan selera teman-teman. Yang terakhir yaitu
kode yang saya warnai merah bottom:10px;
merupakan kode jarak dari bagian bawah, jadi jika angka ini
dirubah/diperbesar maka akan ada jarak antara header dengan widget yang
ada pada bagian bawah header (dalam contoh ini yaitu jarak antara header
dan widget pages seperti yang tampak pada blog saya ini).
Merubah Lebar Widget Menu Page Pada Blogger
Merubah Lebar Widget Menu Page Pada Blogger
Setelah berhasil merubah ukuran/size header, maka selanjutnya saya
mencoba merubah ukuran lebar widget pages yang ada pada bagian header
saya. Kira-kira gambaran menu widget yang akan saya rubah ukurannya
seperti ini :
Pada gambar diatas, bagian sisi yang saya beri warna merah adalah bagian
sisi widget pages/laman yang akan sedikit say perbesar ukurannya.
Caranya culup mudah dan hampir sama dengan cara melebarkan header di
atas, hanya saja class pada css yang kita gunakan berbeda. Berikut ini
kode css yang saya gunakan:
.fauxborder-left {
background-position: left top;
background-repeat: repeat-y;
position: relative; width:960px; left:-10px;
}
background-position: left top;
background-repeat: repeat-y;
position: relative; width:960px; left:-10px;
}
Kode css yang saya warnai biru diatas sebenarnya kode yang sudah ada
pada edit template blogger untuk template sederhana default blogger,
sedangkan kode yang berwarna hijau adalah kode css yang saya tambahkan
untuk merubah posisi kiri widget dan memperpanjangnya ke arah kanan,
silahkan di rubah angkanya sesuai selera teman-teman.
Sedangkan untuk menambahkan kode css ini bisa langsung melalui edit
template blogger dan tekan ctrl+f kemudian cari penggalan kode .fauxborder-left {
kemudian silahkan ditambahkan deklarasi untuk width dan left dengan
posisi yang sama seperti kode diatas dan kemudian save template. Tetapi
saya lebih suka menambahkannya pada bagian costumize/sesuaikan template
karena saat kita merubah-rubah angka width dan left-nya bisa langsung di
lihat di preview sudah cocok atau belum sesuai yang kita inginkan.
Untuk cara kedua ini saat menambahkannya usahakan seluruh code css di
atas di copy semua dan di paste pada bagian add css, jadi sedikit
berbeda jika kita menambahkannya dari menu edit/html template, karena
pada penambahan di edit/html template kodenya sudah ada dan kita tinggal
menambahkan kode deklarasi width dan left sedangkan jika mengunakan
costumize/sesuaikan template, seluruh kodenya kudu di copy untuk
memperjelas class css mana yang ingin kita tambahkan.
Jika sudah berhasil kira-kira tampilannya akan seperti gambar berikut ini (atau bisa dilihat pada blog saya ini)
Selamat mencoba.
Note:Kode sewaktu-waktu bisa tidak berhasil/efektif apabila blogger dikemudian hari merubah skema template edit/html seperti yang terjadi sebelumnya. Biasanya jika ada perubahan skema template edit/html kebanyakan yang berubah adalah class dari css tersebut, sehingga diperlukan riset mengenai class yang baru untuk membuat kode ini berhasil dikemudian hari jika terjadi perubahan.
#header-wrapper
#header-wrapper
Sumber :
http://www.irmawan.me/2013/08/Merubah-Lebar-Header-Border-dan-Menu-Page-Tabs.html
