Selamat Datang di Pendopo Cinta

Sabtu, 15 Juni 2013

Cara Membagi 2 Kolom Header Terbaru

Cara Membagi 2 Kolom Header Terbaru


Cara Membagi 2 Kolom Header Terbaru | Kolom header bisa dibagi dua dan bisa digunakan untuk menambah gadget lain seperti animasi atau gambar. Pada posting artikel terbaru kali ini Kolombloggratis.Org akan searching artikel tentang cara membagi header menjadi dua kolom, desain dari sebuah template memang sangat kompleks dan banyak menggunakan teknik, artikel ini dibuat bertujuan agar bisa membagi dua kolom header dan bisa dimanfaatkan banyak hal seperti di isi menu situs, potho profil, untuk pasang iklan, tv online, kalender, animasi dan lain - lain yangdirasa cocok dan pas dengan tema situs ataupun sekedar memberikan fasilitas bagi pengunjung situs, cara ini sudah banyak diterapkan oleh banyak web master untuk mengkreasikan desain templatenya agar lebih menarik dan cara ini merupakan tahap pembelajaran bagi sobat blogger pemula, bagi sobat yang ingin menerapkan tutorial ini direkomendasikan agar membackup dulu template aslinya agar bila nanti terjadi kesalahan atau kurang puas bisa dikembalikan lagi seperti template awal, berikut cara membagi header menjadi 2 kolom,...
  1. Login akun blogger
  2. Pilih template
  3. Klik edit HTML
  4. Cari kode mirip seperti dibawah ini
    /* Header
    =================================== */
    #header-wrapper {width:900px; margin:0 auto 0px;
    background:$bgheadercolor url(http://www.kolombloggratis.org) no-repeat top center;
    height:190px;}
    #header-inner {width:900px;
    background-position: center;margin-$startSide: auto;margin-$endSide: auto;}
    #header { margin: 0px;text-align: left;color:$pagetitlecolor;}
  5. Ganti dengan kode diatas dengan kode dibawah ini
    /* Header =================================== */ 
    #header-wrapper { width:900px; margin:0 auto 0px; 
    background:$bgheadercolor url(http://www.kolombloggratis.org) no-repeat top center;
    height:190px; }
    #head-inner { width:600px;
    background-position: left; margin-left: auto; margin-right: auto; float:left; }
    #header { margin: 0px; text-align: left; color:#ffcc66; }
    #r_head{ width:300px; float:left; padding-top:10px; }
  6. Cari lagi kode seperti dibawah ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/
    </b:section> </div>
  7. Ganti dengan kode di bawah ini
    <div id='header-wrapper'> 
    <div id='head-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>  
    </b:section></div> 
    <div id='r_head'>
    <b:section class='header' id='header2' preferred='yes'/>
     </div>
     </div>

    Klik simpan / save template
Semoga posting artikel kali ini tentang cara membagi 2 kolom header bisa bermanfaat buat sobat setia,...

Tidak ada komentar: