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

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 !!!
_________________

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

« Previous
« Prev Post
Next »
Next Post »

0 komentar:

Post a Comment