Menambah kolom elemen di bawah sidebar

Sebelumnya saya posting bagaimana cara menambah kolom elemen di atas footer. Nah kali ini bagai mana pula menambah kolom elemen di bawah sidebar. ini article sebenarnya untuk memperlengkap tutor sebelum nya. ada pepatah yang katakan kalau kerja itu yang selesai jangan setengah-tengah. jadi kalau kasih ilmu itu harus lah sempurna. sebagai contoh lihat gambar di bawah ini.

Untuk menambah elemen diatas kita sedikit menambah kan kode css ke dalam tamplate kita. untuk membuatnya ikuti langkah-langkah di bawah ini.

• Log in dulu ke blogger
• Tata letak
• Edit HTML
• Backup template anda, klik Download tamplate lengkap
• Kemudian kasih tanda centang di kotak kecil kanan atas
• Cari kode

  #sidebar-wrapper {
  width: 300px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking
  sidebar float in IE */
  overflow: hidden; /* fix for long non-text content breaking
  IE sidebar float */
  }

• Ganti nilai width 300px; dan properti float: $startSide; dengan nilai sidebar anda. Misalnya width: 320px dan properti menjadi float: right; sehingga secara keseluruhan menjadi seperti ini :

  #sidebar-wrapper {
  width: 320px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking
  sidebar float in IE */
  overflow: hidden; /* fix for long non-text content breaking
  IE sidebar float */
  }

• Kemudian tambah kan kode berkut di bawah kode diatas

  #left-col {
  width:150px;
  float:left;
  word-wrap:break-word;
  overflow:hidden;
  }
  #right-col {
  width:150px;
  float:right;
  word-wrap:break-word;
  overflow:hidden;
  }

• Sekarang kita akan membuat id untuk sidebar left-col dan right-col tersebut. Cari kode ini:

  <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'/>
  <b:widget id= dan seterusnya....
  </div>

• Sisipkan kode berikut di bawah <b:widget id= dan seterusnya....:

  <b:section class='sidebar' id='left-col' preferred='yes'/>
  <b:section class='sidebar' id='right-col' preferred='yes'/>

• sehingga secara keseluruhan menjadi seperti di bawah ini

  <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'/>
  <b:widget id= dan seterusnya....
  <b:section class='sidebar' id='left-col' preferred='yes'/>
  <b:section class='sidebar' id='right-col' preferred='yes'/>
  </div>

• Setelah itu simpan tamplate dan lihat hasilnya

Selamat mencoba.........

JASA ARTIKEL: HUBUNGI Email kami di jptr273@gmail.com bagi bos yang membutuhkan JASA ARTIKEL BOLA yang berpengalaman di bidangnya. terimakasih

Berlangganan via RSS Feed

Anda Ingin artikel seperti ini langsung ke Email anda Silahkan masukkan alamat Email anda Untuk Berlangganan :

CHAT di halaman depan blog ini

Informasi Pemasangan Iklan:
Hubungi Kami: J_Putra
Email: jptr273@gmail.com