Cara Mengatur Lebar Tinggi dan Membuat Header Blog

Tips Kali ini adalah Bagaimana Cara Mengatur Lebar Tinggi dan Membuat Header Blog itu? disini saya akan jelaskan lebih detail dengan berbagai kendala dan masukan dari rekan-rekan semuanya, oke sebelum saya lanjutkan silahkan simak juga post sebelumnya yaitu Cara Buat Share Addthis Cantik dan Cara Buat Readmore Otomatis, oke sekarang kita akan simak bagaimana cara mengatur lebar tinggi suatu header blog, kadang banayk panduannya digoogle tetapi tidak sesuai dengan apa yang kita harapkan misal header blog anda mengecil atau mengkerut, lalu anda mengetikan kata kunci "Cara Mengatur Lebar Header Blog" atau "Cara Mengganti Header Blog" sehubung banyak anjuran dari berbagai tutorial untuk mengganti lebar/width atau tinggi/hight tetapi kadang pada opsi #header-wrapper tidak ditemukannya tulisan hight/tinggi , karena pada sebagian template seperti template template toko online uikuran hight/tinggi ini memang tidak tampak, nah dari pada anda bingung dengan semua itu saya akan berikan cara yang termudahnya saja silahkan simak saja.

Cara Mengganti Header Blog

1. Langkah pertama silahkan temukan kode <b:skin><![CDATA[ biasanya pada sebagian besar template setelah kode tersebut ada kredit linknya atau seperti kode dibawah ini, misal seperti ini:

<b:skin><![CDATA[

* -----------------------------------------------

Grey Blogger Template Style SEO friendly

Name    : Grey Agung SEO Friendly

Author  : Muhamad Sobar

Url     : http://www.jasaseoblog.web.id/

bla...bla...bla..bla...bla... dan setersunya

2. Agar anda tidak bingung silahkan hapus semua kode mirip dibawah:

/* -----------------------------------------------

Grey Blogger Template Style SEO friendly

Name    : Grey Agung SEO Friendly

Author  : Muhamad Sobar

Url     : http://www.jasaseoblog.web.id/

Updated by: Blogger Community Of Indonesian

----------------------------------------------- */

body{background:#e5e5e5;color:#666;font:x-small Trebuchet MS;font-size:small;text-align:left;margin-top:47px}

a:link{color:#5c9f01;text-decoration:none}

a:visited{color:#5c9f01;text-decoration:none}

a:hover{color:#666;text-decoration:none}

a img{border-width:0}

#header-wrapper{background:#7ab800 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFRW_tdtti1hvhXlLHCX6LJTB8FkQTCQekTjqS0pb5ghpDGkrgFfF0yNkb3Eq6MRpH7482xxigJ2qZjsVKj0YXY7oSLUjkN_E1iYTT-4IY68RiI1FkMwlS80iOTWb5ijX0Af0QpT8P2izI/s1600/header.gif) repeat-x bottom;width:960px;border:0 solid #ccc;margin:0 auto}

Sampai kode css auto} mirip diatas dimana ada tulisan #header-wrapper bal..bla..bla... auto, jadi yang dihapus adalah dari /* ---------------- sampai auto} Jika sudah dihapus silahkan ganti dengan yang dibawah ini, agar anda lebih mudah menyesuaikannya.

/* HEADER WRAPPER

    ==================================================== */

    #header-wrapper {

    width:960px;

    height:150px;

    background:#7ab800 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcjv25wLvVRSsI-Hca3TBxiKqZg1hMFZm5PIQtfvdqOK5GXnE4IlY-CYi93kRoLk9gBewynerm1ju6AmFZwoMn3v_lQJR_pTSO1uiRy0K80C_5muqxzTDSku-qdzblux1OWRl5aYK3SiE/s1600/kcm1.png) repeat-x bottom;width:960px;border:0 solid #ccc;margin:0 auto

    }

    #header-inner {

    background-position: left;

    height:150px;

    margin-left: auto;

    margin-right: auto;

    }

    #header {

    margin: 5px;

    text-align: left;

    color:#FFF;

    }

    #header h1 {

    padding:40px 20px 0 10px;

    line-height:1.2em;

    text-shadow:2px 2px 2px #fff;

    text-transform:uppercase;

    letter-spacing:.2em;

    }

    #header a {

    color:#FFF;

    text-decoration:none;

    }

    #header a:hover {

    color:#FFF;

    }

    #header .description {

    margin:0 5px 5px 0 ;

    padding:0 20px 0 10px;

    max-width:700px;

    letter-spacing:.2em;

    color:#FFF;

    }

    #header img {

    margin-left: auto;

    margin-top: auto;

    }

Setelah diganti sekarang anda tinggal mengganti kode gambar diatas lihat potongan warna biru, itu adalah url gambarnya silahahkan ganti dengan gambar milik anda pastikan gambar yang akan anda gunakan lebar lebih besar nilainya dari pada ukuran tingginya, width:960px; height:150px; silahkan naikan atau turunkan nilai angka tersebut untuk membuat pas gambar header yang sedang anda pasang pada blog saudara , jika ada pertanyaan silahkan bertanya. dan untuk kopas kode diatas silahkan KLIK DISINI

Ok hanya itu saja tips kali ini tentang Cara Mengatur Lebar Tinggi dan Membuat Header Blog semoga bermanfaat, wassalam..