Cara Mudah Merubah Ukuran Header Blogspot

Cara Mudah Merubah Ukuran Header Blog.

Dikesempatan kali ini saya akan mencoba berbagi informasi sedikit kepada anda, tentang bagaiman cara untuk merubah ukuran header sebuah Blog. Dan sekaligus saya akan mengajak anda untuk belajar mempercantik tampilan blog. Soal cantik ini penilaiannya relatif dari masing-masing pengguna. Tapi pada dasarnya, blog yang cantik itu yakni yang tidak mempersulit pengunjungnya.

Karena Setiap pengunjung (visitor) kadang memberi waktu yang lama dalam satu blog, kadang pula muncul tenggelam. Ada banyak faktor yang mempengaruhi, salah satunya peletakan atau tampilan yang kurang menarik. Terkadang ada orang yang ingin melebarkan header blognya dan ada pula yang ingin memperkecilnya. Karena lain orang lain pula seleranya dalam mendesain blognya.

( Baca Juga Cara Membuat Judul Blog Berada Di Tengah )

Untuk merubah ukuran header sebuah blog, banyak para blogger yang mengalami kesulitan. Karena untuk merubah ukuran header memang membutuhkan kemampuan otak atik kode HTML. Tapi itu dulu, sekarang blogspot telah memberi kita kemudahan. Kita bisa merubah header blog tanpa harus mati-matian belajar CSS atau HTML.

Sebelum memulai tutorial ini, coba anda 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 anda dapat free dari situs-situs template mungkin tidak berhasil karena setiap template memiliki hirarki class css yang berbeda.

( Baca Juga Cara Mengatur Jarak Judul Dengan Deskripsi Blog )

A. Berikut ini adalah caranya......

1. Langkah pertama seperti biasa login ke akun blogspot anda dan masuk ke dashboard. Selanjutnya pilih 'Template' dan klik 'Sesuaikan'.

2. Anda akan dibawa kehalaman pengaturan antar muka. Di langkah ini usahakan rubah dulu warna header anda agar bisa membedakan hasil perubahan. Namun jika warna header anda sudah berbeda. Bagi yang warna headernya sama dengan warna body, cara merubahnya seperti ini. Masuk ke tab 'Tindak Lanjut' lalu pilih 'Latar' dan pilih 'Latar Header' (lihat gambar). Anda bisa merubahnya sesuka hati.

3. Setelah warna header berubah (Bisa dilihat dikolom bawah pratinjau tampilan). Langkah sepanjutnya, tarik kursor anda hingga kebawah lalu pilih 'Tambahkan CSS' (lihat gambar).

4. Anda akan diberi kolom isian. Selanjutnya tinggal copy paste script dibawah ini.

.header-outer{left:-40px;width:1000px;height:40px;bottom:10px;}

Penjelasan Script :

• left:-40px; merupakan kode untuk mengatur kerapatan sisi kanan header dengan tampilan layar, silahkan angkanya dirubah-rubah sesuai keinginan anda dengan mencocokan perubahan preview yang tampak pada halaman desain blogger hingga sudah merasa cocok.
• width:1000px; merupakan kode untuk menyesuaikan panjang header di sisi kanan, silahkan di sesuaikan angkanya menurut selera anda.
• height:40px; merupakan kode untuk merubah ukuran tinggi header, seperti biasa silahkan di sesuaikan dengan selera anda.
• 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.

Bagaimana....??mudah bukan!

( Baca Juga Cara Membuat Header Blog Menggunakan Logo/Gambar )

B. Adapun Cara dengan mengotak-atik kode HTML, berikut caranya :
Langsung saja, Berikut ini Cara Mengubah Ukuran Header Blog :

1. Anda login di blogger.com.
2. Kemudian pilih template --> Edit HTML.

3. Cari kode #header, gunakan Ctrl+F untuk mempermudah pencariannya.
4. Setelah ketemu biasanya akan seperti ini :

#header-wrapper{background:#fff; margin:0 auto; width:970px; overflow:hidden}
#header-inner{background-position:center; margin-top:25px; margin-left:auto; margin-right:auto}
#header{padding-left:10px; font-family:arial; width:900px; text-align:left; float:left; height:70px; color:#000}
#header h1{font:25px "Segoe UI",Arial; font-weight:bold; color:#000; text-align:left; margin-top:5px; padding:6px 0 8px}
#header a{text-decoration:none; color:#000; border:0}
#header .description{font-size:1em}
#header img{text-align:left}

(Perlu Diingat !! Bahwa kode setiap template berbeda, jadi cari yang hampir sama).

5. Perhatikan warna Merah diatas. disana kita bisa liat widht:900px dan height:70px. Dari sini kita bisa tahu bahwa header blog kita berukuran 900px X 70px.

6. Nah, tinggal kita ubah saja ukurannya sesuai keinginan anda.

( Baca Juga Cara Membuat/Menambahkan Icon Gambar Di Samping Tulisan Pada Navbar Blogspot )

Demikianlah artikel saya kali ini yang membahas tentang Cara Merubah Ukuran Header Blog Semoga dapat bermanfaat buat anda. Namun jika ada yang mengalami masalah tentang ini, anda bisa menanyakan dengan berkomentar di bawah ini. Terima kasih..