Senin, 05 April 2010

Cara Membuat Tiga Kolom Elemen Baru di Bawah Header

Assalamualaikum..
Sobat Informasi Maya Beberapa hari lalu Kang Salman pernah membahas bagaimana cara  membuat tiga kolom elemen di atas footer. dan hri ini Kang Salman akan bahas bagimana cara membuat tiga kolom elemen dibawah header mirip dengan blognya kang rohman yang tersohor itu ^_^. Untuk membuatanya hampir sama dengan cara membuat kolom elemen di atas footer. Silakan ikuti langkah-langkah di bawah ini :

    * Log in dulu ke blogger
    * lalu pilih Tata Letak
    * klik Edit HTML
    * Beri tanda centang pada kotak kecil kanan atas
    * Kemudian cari kode ]]></b:skin> dan
    * Letakkan kode di bawah ini datas ]]></b:skin>

      /* Top Header
      ---------------------------- */
      #topheader {
      width:930px;
      clear:both;
      float:left;
      color:#333;
      background:#fff;
      margin:0 auto;
      padding:0 0 10px;
      }

      #topheader a:visited {
      color:gray;
      text-decoration:none;
      }

      #topheader h2 {
      font-size:11px;
      font-weight:700;
      line-height:1.4em;
      text-transform:uppercase;
      border-bottom:1px dotted silver;
      margin:0 0 10px;
      padding:20px 0 2px;
      }

      #topheader ul {
      color:#333;
      margin:0;
      padding:0;
      }

      #topheader ul li {
      list-style-type:none;
      background:fff;
      border-bottom:1px dotted #ccc;
      padding-left:17px;
      margin-top:2px;
      }

      #left-topheader {
      width:360px;
      float:left;
      padding-left:15px;
      }

      #center-topheader {
      width:230px;
      float:left;
      padding:0 20px;
      }

      #right-topheader {
      width:260px;
      float:right;
      padding-right:15px;
      }



      silahkan anda modifikasi susai dengan lebar kolom tamplate anda.
    * Kemudian kita akan membuat id untuk properti elemen yang baru saja ditambahkan. cari kode 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>

    * Kemudian tambahkan kode di bawah ini persis dibawah nya

      <div id='topheader'>
      <b:section class='topheader' id='left-topheader' preferred='yes'/>
      <b:section class='topheader' id='center-topheader' preferred='yes'/>
      <b:section class='topheader' id='right-topheader' preferred='yes'/>
      </div>

    * Simpan tamplate anda dan lihat hasilnya.

       Selamat mencoba.....

http://asksalmam19.blogspot.com

Ingin mendapat penghasilan tambahan? Cara kerja mudah hanya denganmelakukan survey dan mengisi angket lalu anda akan di bayar. Itulah pekerjaananda disini <= klik untuk daftar dan memanen uang $ seperti saya. Gratis
Dapatkan update artikel  terbaru kami langsung ke email anda.  

0 komentar:

Posting Komentar

give your comment here, please do not spam

 
My Big Dream powered by XXZ