Headline

Buat sobat blogger yang menjumpai komentar kasar dan mengatasnamakan OzieCyber, silahkan baca dan laporkan disini.
Unduh Adobe Flash player

close

~Affiliates~

 

Bantu saya vote +1 pada tombol google plus di bawah!!

×

flang counter

free counters

Cara membagi header menjadi 2 kolom

Hallo sobat, jumpa lagi dengan Ozie :D. Sekarang, Ozie akan kembali posting tutorial blog kali ini tentang Cara membagi header menjadi 2 kolom. Nah, sobat pasti bertanya, untuk apakah kolom header dibagi menjadi 2 kolom? jawabannya, kalau header blog, pada umumnya kolom pertama yaitu kolom judul blog sobat dan kolom kedua bisa sobat pakai seperti untuk adsense, pemasangan iklan, search engine dll. Membagi / membelah header menjadi 2 kolom, perlu diketahui desain template itu sangatlah komplek dan menggunakan banyak sekali teknik.Agar mudah dan terfokus, sebagai contoh disini kang reggy menggunakan template buatan blogjuragan yaitu Thesis seo blogger template, silahkan sobat mendownloadnya disini Disini. Tetapi jika sobat merasa sudah ahli dalam pengeditan template tidak masalah lah jika menggunakan template sobat sendiri ;). Jika sobat sudah mendownload dan mengupload templatenya ke blog sobat, tampilan header sebelum di edit gambarnya seperti di bawah ini

cara membagi header menjadi 2 kolom
Oh iya, sebelum kita ke tkp, agar tidak terjadi hal yang tidak diinginkan seperti blog kesayangan sobat menjadi acak - acakan hanya karena hal percobaan, kang reggy sarankan jangan dulu mencoba tutorial ini pada blog kesayangan sobat. Buatlah blog untuk percobaan kemudian upload template thesisnya.  Are you ready guys? ok 1...2...3 lets go, eiitts, kayak mau perlombaan lari aja, hehehe :p. Okedeh sobat, kita langsung ke tee..kaa..pee
  1. Login pada pada Blogger menggunakan id blog sobat
  2. Template
  3. Edit HTML lalu Lanjutkan
  4. pertama - tama cari kode #header-wrapper { atau lebih lengkapnya mirip seperti di bawah ini
    #header-wrapper {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(http://3.bp.blogspot.com/_rLYhkzmU7RY/TDvdaQEQJhI/AAAAAAAAAAM/tQr4P8Rb7AQ/s1600/line.gif) repeat-x scroll left bottom;
    height:119px;
    width:900px;
    }
    #header-inner {
    background-position:center center;
    margin-left:auto;
    margin-right:auto;
    }
    #header {
    color:#000000;
    text-align:left;
    }
  5. hapus dan ganti kode tersebut dengan kode dibawah ini:
    #header-wrapper {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(http://3.bp.blogspot.com/_rLYhkzmU7RY/TDvdaQEQJhI/AAAAAAAAAAM/tQr4P8Rb7AQ/s1600/line.gif) repeat-x scroll left bottom;
    height:100px;
    width:900px;
    }
    #header-inner {
    width:428px;
    margin:0 auto;
    padding-top:6px;float:left;
    }
    #header {
    color:#000000;
    text-align:left;
    }
    #r_head{
    width:468px;
    float:right;
    padding-top:6px;
    }
  6. selanjutnya geser scroll ke bawah dan cari kode <div id='header-wrapper'> atau lebih lengkapnya mirip seperti di bawah ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
    </b:section>
    </div> 
  7. hapus kode di atas dan ganti dengan kode di bawah ini
    <div id='header-wrapper'>
    <div id='header-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
    </b:section>
    </div>
    <div id='header-kanan'>
    <b:section class='header2' id='header2'/>
    </b:section>
    </div>
    </div>
  8. Simpan Template
Selesai deh, jika semua langkah sudah sobat lakukan seperti di atas, tampilan kolom sesudah diedit akan menjadi seperti pada gambar di bawah ini
cara membagi header menjadi 2 kolom
Bagaimana sob ? susah apa mudah ? oh iya, kang reggy baru ingat, jika sobat ingin mengubah ukuran setiap kolom, tinggal utak - atik kode yang berwarna merah dengan ukuran yang sesuai dengan kebutuhan sobat. Okedeh sob, sampai disini dulu untuk Cara membagi header menjadi 2 kolom. Sampai Jumpa ;)

Related Post :

Comments
0 Comments


0 komentar:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q:

Berikan Tanggapan mengenai Artikel Di Atas :

Berkomentar Lah Dengan Sopan :

=> Hahahaha ...xD
=> Blog Ini bebas Mau Berkata Apa Asal Sopan ...Azzzz
=> #Peace ALL

Terima Kasih Sudah Berkomentar .. !!

-----
pin 284A465C Gunakan Browser Google Chrome Versi Terbaru, Agar Tampilan Blog Ini Maksimal.