Header atau Judul Blog Terpotong dan Menu Navigasi Melorot setelah Ganti Template

Cara Mengatasi Header Blog yang Terpotong dan Menu Navigasi Melorot setelah Ganti Template. Banyak alasan yang membuat kita terkadang harus mengganti templet blog. Tapi tidak jarang juga pemasangan templet baru hasil download gratis, justru membuat tampilan blog kita menjadi berantakan. Bentuk penampakannya bisa macam-macam. (baca: 9 Masalah Saat Ganti Template Blog dan Cara Mengatasinya).

Tips kita kali ini akan membahas salah satu masalah yang sering muncul setelah mengganti templet blog. Yakni, tampilan header atau judul blog yang terpotong, dan/atau tempat menu navigasi horizontal yang bergeser (naik atau turun) dari posisi semula. Penampakannya kira-kira seperti ini: 

Gambar-1.

Gambar-2.

Gambar-3. 

Hilangnya atau terpotongnya sebagian judul atau sub-judul (deskripsi) blog seperti pada gambar-1 di atas, terjadi karena ukuran (besaran dan ketinggian) huruf atau font yang tidak sesuai.

Sementara tempat menu navigasi horizontal yang bergeser (naik atau melorot) bisa terjadi karena ukuran header atau judul blog dalam format gambar/logo yang tidak sesuai, sehingga mendorong menu navigasi blog menjadi turun ke bawah (gambar-2); Atau, juga bisa terjadi karena ukuran ketinggian header yang melebihi ketinggian kotak header yang ada (gambar-3). 

 Bagaimana cara mengatasinya?   

Langsung saja ikuti langkah-langkah mengedit atau menyesuaikan besaran huruf (font) dan besaran kotak header atau judul blog pada blogspot berikut ini:
  1. Masuk ke dashboard blog ----> pilih “Template” -----> Edit HTML
  2. Aktifkan kotak pencarian cepat kode HTML dengan menekan Ctrl + F
  3. Ketik #header pada kotak pencarian, lalu Enter untuk menemukan kode css header. (Perlu diingat, masing-masing templet mungkin menggunakan kode yang berbeda-beda. Jika tidak menemukan kode yang persis sama, cari kode yang mirip seperti di bawah ini).

    #header-area { background: url(http://3.bp.blogspot.com/-XGKaCyfrN_o/Udc16WkhOgI/AAAAAAAABmc/z8VcBM6I0Vk/s1600/now-nav.jpg) repeat-x scroll 0 0 transparent; height: 220px;}
    #header-place{background: url(http://1.bp.blogspot.com/-f9HfCLwOQdE/UdlyquuOJkI/AAAAAAAABn0/0veTtfNaMeM/s1600/hd-header.jpg) 0 0 no-repeat; height: 245px; width:960px; margin:-220px 0 0;}
    #header{margin-top:29px; border:0 solid $bordercolor; color:$pagetitlecolor; float:left;width:650px;overflow:hidden; }
    #header,#header a { color: #fff }
    #header a:hover {}
    #header-inner{margin:15px 5px 0px 378px;}
    #header h1 {font-weight:bold; color:#36271F; margin:0 5px 0; padding:8px 0px 0px 0px; font-family:cambria,georgia,times,times new roman,serif; text-shadow: 0px 0px 1px rgb(0, 0, 0); font-size:42px;line-height:36px; }
    #header h1 a,#header h1 a:visited{color:#36271F;text-decoration:none}
    #header h1 a:hover{}
    #header img {border:none;max-height:104px;padding-top:9px; width:260px}
    #header .description {padding-left:7px; color:#36271F; line-height:14px; height:20px; font-size:15px; padding-top:0px;margin-top:5px;
    font-family:Georgia,Cambria,Times,Times New Roman,serif; text-shadow: 0px 0px 1px rgb(0, 0, 0); }
    #header-rside{float:right;width:730px;margin-right:0px;padding-right:0px;overflow:hidden;}
    #header-rside .widget{float:right; margin-top:25px; margin-right:7px}
  4. Perhatikan kode yang telah diberi warna (atau yang mirip dengan itu) dan lakukan perubahan sesuai dengan kebutuhan.  
    • Warna merah = tinggi dan lebar kotak header.
    • Warna biru = besaran dan tinggi huruf judul utama.
    • Warna kuning = tinggi dan besaran huruf sub-judul atau deskripsi.
  5. Silahkan dirobah-robah sesuai keinginan.Perubahan juga bisa anda lakukan pada indikator header lainnya. Silahkan berkreasi sendiri! Tapi ingat, jangan klik “simpan”/ “save” sebelum anda benar-benar yakin hasilnya. (Gunakan pratinjau untuk melihat hasil sementara). 
  6. Jika merasa semuanya sudah oke, dan tampilan templet yang berantakan sudah kembali normal, akhiri pengeditan dengan klik simpan templet. Sekarang lihat hasil akhirnya dalam blog anda.   
Demikian tips kita tentang cara mengatasi Header Blog terpotong dan Menu Navigasi Melorot setelah ganti template. Semoga bermanfaat !!!
_________________

 

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Copy Tulisan Arab dari Internet ke Word agar Susunan Tulisan Arab Tidak Terbalik

Gambar
Bagaimana cara menyalin atau mengcopy-paste tulisan Arab dari internet ke dalam dokumen Ms. Word? Maksudnya, agar susunan tulisan arabnya tetap terpelihara dan tidak terbalik-balik? Ini kelihatan sederhana, tapi sangat penting. Berbeda dengan copy-paste tulisan latin, copas tulisan Arab tidak bisa dilakukan langsung dari internet ke dokumen Word. Hasilnya akan berantakan. Banyak susunan kata dalam tulisan arab yang berubah tempat dan urutannya. Sehingga secara keseluruhan, struktur penulisan ayat atau hadits hasil copy-paste akan menjadi rusak dan berantakan. Inilah yang akan kita bahas dalam tips kali ini. Masalah sederhana, tapi serius. Karena dalam penulisan ayat atau hadits, perubahan satu huruf saja, akan bisa berakibat fatal. Sebab akan merubah arti dan makna secara keseluruhan. Tulisan ini terinspirasi dari banyak komentar pembaca di blog “ Belajar Islam ” yang mempersoalkan tulisan ayat al-Qur’an atau hadits yang terbalik. Salah satunya dalam tulisan “ Bacaan Dzikir yan...
Baca selengkapnya

Cara Mudah Edit File PDF, Gratis Tanpa Aplikasi Khusus PDF Editor

Gambar
Apakah Anda kesulitan mengedit file berformat PDF? Tulisan ini akan memberikan solusi mudah dan gratis bagi Anda untuk mengedit dokumen PDF, tanpa harus menggunakan aplikasi khusus PDF editor yang sulit didapat dan umumnya berbayar alias tidak gratis. PDF atau Portable Document Format adalah satu jenis format file atau dokumen yang bersifat fixed-layout (tetap dan tidak berubah-ubah). Format ini sangat populer digunakan dalam membuat e-book atau dokumen-dokumen lainnya yang memerlukan kestabilan tinggi. Kelebihan PDF terletak pada layoutnya yang bersifat stabil. Yakni, tampilan atau tata letak dokumen tidak akan berubah-ubah. Sehingga tidak perlu khawatir layout dan susunan dokumen seperti tabel, diagram, dan sebagainya akan berantakan. Tapi, selain menjadi kelebihan, justru di sini pula kelemahan dokumen PDF di sisi yang lain. Sifatnya yang fixed-layout, membuatnya tidak mudah untuk diedit, dirubah, atau dikoreksi jika terdapat kesalahan. Biasanya, untuk mengedit isi dokume...
Baca selengkapnya

Cara Membuat Judul Tabel atau Judul Kolom Otomatis di Setiap Halaman MS Word

Gambar
Cara Mengulang Judul Tabel atau Judul Kolom Otomatis di Setiap Halaman Ms. Word – Jika Anda ingin membuat tabel dengan kolom yang panjang (lebih dari satu halaman) di dokumen Microsoft Word; dan Anda ingin agar judul tabel (atau lebih tepatnya judul setiap kolom dalam tabel ) juga muncul secara otomatis di bagian atas pada setiap halaman berikutnya; maka benar, Anda sedang membaca artikel yang tepat. Memunculkan judul masing-masing kolom tabel di bagian atas setiap halaman baru, perlu agar setiap orang yang membaca tabel bisa dengan mudah mengetahui identitas masing-masing kolom yang bersangkutan. Contoh sederhana misalnya ketika kita ingin membuat absensi berbentuk tabel dengan kolom isian: Nomor, Nama, Alamat, Pekerjaan, Instansi, Nomor Telepon, dan Tanda Tangan . Dengan membuat judul kolom pada tiap halaman, maka orang tidak perlu repot harus membuka kembali halaman sebelumnya untuk mengetahui identitas masing-masing kolom isian dimaksud. Tanpa berpanjang-panjang, berikut cara...
Baca selengkapnya