> Update >>
Home » , » Cara Membuat Dua Kolom Header

Cara Membuat Dua Kolom Header

  1. Edit HTML, lihat ke bagian kode CSS, lalu cari kode seperti ini :
    1. /* Header
      ===================================
      */
      #header-wrapper {
      width:900px;
      margin:0 auto 0px;
      background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) 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;
      }



      hapus kode di atas, lalu ganti dengan kode berikut ini :



      /* Header
      ===================================
      */

      #header-wrapper {
      width:900px;
      margin:0 auto 0px;
      background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) 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;
      }
  2. Kemudian Cari kode seperti 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>

Hapus kode di atas, lalu ganti dengan kode di bawah ini :

  1. <div id='header-wrapper'>
  2. <div id='head-inner'>
  3. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  4. <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
  5. </b:section>
  6. </div>
  7. <div id='r_head'>
  8. <b:section class='header' id='header2' preferred='yes'/>
  9. </div>
  10. </div>

  11. Selesai.

0 comments:

Post a Comment

 
list blog tutorial
Ambil banner

Template

More on this category »
Submit ExpressSEO Tools My Ping in TotalPing.com

tutorial

© All Rights Reserved | Best View With Google Chrome