HOME | ABOUT ME | DAFTAR ISI | welcome to happydesug.blogspot.com

Minggu, 23 Mei 2010

Memindahkan Sidebar dari Sebelah Kanan ke Kiri Kolom Posting

Pada template minima, letak sidebarnya adalah disebelah kanan. Untuk memindahkan sidebar dari sebelah kanan ke kiri caranya adalah dengan merubah float sidebar-wrapper dan float main-wrapper.

Login ke Blogspot –> Tata Letak –> Edit HTML

Cari baris kode main-wrapper dan sidebar-wrapper
#main-wrapper {
  width: 410px;
  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 */
  text-align:justify;
}

#sidebar-wrapper {
  width: 220px;
  float: $endSide;   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 */
}

Tukar float pada main-wrapper dengan float pada sidebar-wrapper dan sebaliknya sehingga baris kodenya menjadi seperti terlihat dibawah ini:
#main-wrapper {
  width: 410px;
  float: $endSide;   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 */
  text-align:justify;
}

#sidebar-wrapper {
  width: 220px;
  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 */
}

Simpan template. Sekarang sidebar telah berada disebelah kiri kolom posting (posting blog).

Catatan:
- Variabel $startside bisa diganti dengan left (kiri), dan $endside dengan right (kanan)
- Untuk memudahkan pencarian baris kode, gunakan 'kotak pencari', tekan Ctrl +  F, lalu ketikan baris kode yang dicari dan tekan enter. Browser yang digunakan disini adalah Internet Explorer (IE). Untuk browser lain, 'kotak pencari' letaknya sedikit berbeda

main-wrapper edit
Gb 1. Tampilan menu Edit HTML dan 'kotak pencari' pada browser IE.

template dengan sidebar disebelah kanantemplate dengan sidebar disebelah kiri
Gb 2 dan 3. Sidebar pada sebelah kanan dan kiri kolom posting.

Posting Dengan Kategori Sama



3 komentar:

Yudi mengatakan...

Kalo sidebarnya ada 2 bos kanan dan kiri
Sementara kolom posting dipndah ke kiri?

dodi mengatakan...

Kalo gitu coba float pada main-wrapper dirubah menjadi left, sedang float pada ke dua sidebar menjadi right semua.

Anonim mengatakan...

Mantep Info nya,Ijin Nyimak Gan

Posting Komentar

Related Posts with Thumbnails