Merubah Lebar Header Border dan Menu Page Tabs

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

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;
}

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 Pages 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;
}

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.

 Cara Kedua:>>>>

Cara Mengatur Ukuran Lebar Template Blog

Written By Ku Kupas on Monday, 27 May 2013 | 5/27/2013 08:37:00 pm

KUCOPAS - Cara Mengatur Ukuran Lebar Template Blog. Bagi sobat yang sedang mencari artikel informasi mengenai cara mengatur ukuran lebar template blog atau juga ingin tau bagaimana cara merubah lebar kolom template blog agar sesuai dengan keinginanan sobat, kali ini KUCOPAS akan memberikan trik-triknya secara gamblang agar sobat lebih mudah untuk mengerti.

Ada banyak sekali template blog yang bagus dan sangat menarik bagi sobat, namun kemungkinan sobat tidak menyukai karena salah satunya disebabkan oleh ukuran lebar dari suatu template blog tersebut. Hal ini biasanya sobat kurang cocok pada ukuran lebar kolom template yang meliputi kolom postingan, sidebar, footer, header dan masih banyak lagi.

Dalam mengatur ukuran suatu template blog tentu saja ada beberapa kode yang harus sobat ketahui, diantaranya adalah kode untuk template bagian keseluruhan atau dari beberapa kolom seperti ukuran lebar postingan, sidebar, header dan footer.

Agar sobat bisa lebih dengan mudah untuk mengatur ukuran template blog, sobat bisa mengikuti arahan dari contoh yang akan saya berikan dibawah ini:

1. Silahkan sobat Masuk atau Login ke >> Blogger.com menggunakan akun sobat.
2. Pilih menu >> Template >> klik Cadangkan / Pulihkan >> Download template lengkap. Guna untuk berjaga-jaga, jika ada kesalahan saat edit template.
3. Klik >> Edit HTML
4. Kemudian cari kode-kode berikut yang berwarna Biru, untuk mengatur ukuran lebar kolom dalam template blog. (Tekan CTRL+F untuk mempercepat pencarian kode dalam Edit HTML Template).

- See more at: http://kuc0pas.blogspot.com/2013/05/cara-mengatur-ukuran-lebar-template-blog.html#sthash.VESv5boL.dpuf