IDLEWALKER BLOGGING TIPS: Membuat Sidebar Baru! (bisa di kiri bisa di kanan blogpost!)

For Blogger only!
Best used with Minima template!!!!

My second tutor!
Please enjoy!!

JANGAN LUPA UNTUK MENYIMPAN TEMPLATE YANG SUDAH ADA TERLEBIH DAHULU UNTUK MENCEGAH KEGAGALAN DAN KERUSAKAN TEMPLATE~

STEP 1 = CODING SIDEBAR

1. Buka Dashboard - Layout - Edit HTML.

2. Cari kode seperti berikut:

Code:

#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 */
}

3. Persis dibawahnya, tambahkan kode seperti berikut:

Code:

#left-sidebar-wrapper {
  width: 220px;
  float: $startSide;
padding-right: 10px;
  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 */
}

*Kamu bisa mengganti left-sidebar-wrapper MENJADI right-sidebar-wrapper jika kamu mau sidebar kedua berada di sebelah KANAN sidebar utama.

**Jangan lupa mengganti $startSide dengan $endSide jika kamu mau sidebar baru terletak di sebelah KANAN sidebar utama.

***The last, ganti padding-right DENGAN padding-left jika kamu mau sidebar baru terletak di sebelah KANAN sidebar utama.
4. Sekarang, cari kode seperti ini:

Code:

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='HTML1' locked='false' title='Clock' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
      </div>

*Kode nya gak semuanya sama, tergantung widget apa aja yg udah kepasang disitu ( masudnya yang ini loh = <b:widget id=....../> )

5. Tambahkan kode seperti ini:

Code:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'>
</b:section></div>

JIKA KAMU MAU SIDEBAR BARU BERADA DI KIRI BLOG POST:

Copy paste kode tersebut dan letakkan DI ATAS kode sebelumnya (yang sidebar-wrapper)

JIKA KAMU MAU SIDEBAR BARU BERADA DI KANAN SIDEBAR YG SUDAH ADA, pakai kode ini:

Code:

<div id='right-sidebar-wrapper'> <b:section class='sidebar' id='right-sidebar' preferred='yes'>
</b:section></div>

Copas kode tersebut dan letakkan DIBAWAH kode sebelumnya (yang sidebar-wrapper)

6. Done! Lanjut ke step 2 !

STEP 2 = CODING WRAPPER

Step ke 2 SANGAT PENTING jika kamu mau berhasil dalam modifikasi ini. Kalau salah disini sedikit aja bisa jadi kamu mengulang2 coding dari STEP 1.

So, keep your eyes peeled, and focus!

1. Cari kode ini:

Code:

#outer-wrapper {
  width: 880px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

Ganti ukuran 'width' outer-wrapper dengan rumus:

width sidebar + width main / blogpost + width second sidebar

contoh:

di percobaan tadi, sidebar utama saya lebarnya 220 px, sidebar kedua saya lebarnya 220 px juga, dan main wrapper nya 410 px. 10px sisanya SISAKAN. Ini penting untuk kerapihan nantinya (menambah padding antara kolom sidebar baru dengan sidebar utama / blogpost)

Jadinya >> 220px + 220px + 410px + 10px (buat padding) = 880px.
Cek deh di kode contoh.

Kalo kamu mau modifikasi ukuran sidebar lama dan sidebar baru ataupun main / blogpost nya, pastikan kamu juga mengganti outer-wrappernya. Karena, kalau WIDTH outer wrapper kurang dari rumus tadi, maka salah satu komponen blog entah itu sidebar atau blogpost akan HILANG.

2. Done!!

(cuma 2 steps? serius, tapi ini penting... soalnya kalau ukuran OUTER WRAPPER kurang dari rumus tadi, maka modifikasi kita bakal gagal dan bakal mengacaukan template yang sudah ada!!!)

STEP 3 = FINISHING AND TESTING

1. KLIK SAVE TEMPLATE.
2. Lihat di page elements. apakah sudah ada sidebar baru yang nampak?
3. Jika ada, tambahkan 1 widget apa saja di sidebar baru tsb. (agar sidebar muncul di tampilan blog)
4. Cek blog anda. Pastikan widget tadi sudah tampil DI SIDEBAR BARU anda.

5. DONE!!! Now you can relax and enjoy the results! Congrats~

Kalau ada pertanyaan, silakan tanya (lebih baik disertai Screenshot atau code yg mau ditanyakan).