Trik Membuat Header Blog Menjadi dua Bagian

Pagi yang cerah..siang yang gelap membuat suasana hati ingat dikampung halaman saya.tapi apa dikata kalo waktu belum menyupport keadaan.sebagai penghilang rasa ingin pulang kampung tapi belum kesampaian,mending blogging.menurut saya ngeblog tuh asik,obat rasa rindu,karena kita bisa menuangkan segala macam unek-unek,info,share trik,dan apa saja yang ingin di tuangkan dalam bentuk artikel seperti ini.

Lhaaa..kok jadi curhat..hehehe:D,speak fren..!!
Dalam kesempatan kali ini saya mencoba berbagi trik untuk membuat header blog menjadi dua bagian(kanan dan kiri).Langkah pertama adalah menentukan lebar headernya,misalya bentuk header seperti ini:

/* Header
———————————————–*/
#header-wrapper{
width: 980px;
color: #fff;
margin: 30px auto 0;
padding: 0px;
overflow: hidden;
}

Menunjukkan lebarnya 980 pixel,nah tugas anda yang pertama adalah membagi menjadi dua bagian sisakan 30px guna untuk spasi diantara dua bagian header tersebut.seperti ini:

.headerleft {
width: 480px;
float: left;
margin: 0;
padding: 0;
}
.headerright {
width: 470px;
float: right;
margin: 0;
padding: 0;
font-weight: bold;
}
Header kiri=480px,dan header kiri=470px
Kemudian tugas anda yang kedua adalah menambahkan beberapa script HTML.didalam blog anda pasti terdapat kode seperti ini:

8 thoughts on “Trik Membuat Header Blog Menjadi dua Bagian

  1. Assalamu’alaikum, ini untuk blogspot ya..? saya gaptek, nggak ngerti hal2 seperti ini, tapi terima kasih untuk infonya, mungkin suatu saat nanti bisa saya praktekkan (Dewi Yana)

  2. ternyata mudah banget triknya… makasih banget sob atas sharing pengetahuan nya.. salam kenal sob..

  3. sobat penyimpanan yg ini

    /* Header
    ———————————————–*/
    #header-wrapper{
    width: 980px;
    color: #fff;
    margin: 30px auto 0;
    padding: 0px;
    overflow: hidden;
    }

    .headerleft {
    width: 480px;
    float: left;
    margin: 0;
    padding: 0;
    }
    .headerright {
    width: 470px;
    float: right;
    margin: 0;
    padding: 0;
    font-weight: bold;
    }

Comments are closed.