Membuat Sidebar Kanan Kiri

Sunday, June 6, 2010
Berikut ini adalah catatan mengenai cara membuat dua sidebar yang terletak di sebelah kanan dan sebelah kiri kolom utama/ posting.

Langkah-langkah membuat sidebar kanan kiri pada template minima blogger.

A. Langkah I : Mengganti Kode

1. Log in ke akun blogger.

2. Setelah masuk ke akun blogger, kemudian klik menu "Rancangan" atau "Design"

3. Klik "Edit HTML" untuk masuk ke halaman pengeditan kode template.

4. Centang kotak kecil yang berada di sebelah kiri kalimat "Expand template widget" kemudian back up (copy paste) seluruh kode template di notepad. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan kode template.

5. Copy semua kode berikut ini:

#sidebar-left {
width : 20%;
float : left;
margin-right: 1px;
padding: 2px;
background : #ffffff;
}

#main-wrapper {
width: 60%;
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 */
}

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


Untuk mengubah lebarnya, gantilah nilai prosentase pada kode yang dicetak hijau.

6. Temukan kode berikut ini atau yang mirip, kemudian ganti semuanya dengan kode diatas :

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

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

B. Langkah II : Menambah kode

1. Letakkan kode berikut ini tepat sebelum kode <div id='main-wrapper'> :

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

2. Klik "simpan" atau "Save" untuk menyimpan hasil editing.

3. Lihat hasilnya di halaman "Page Element" atau "Elemen Laman".

Jangan lupa sign out jika sudah selesai. Jaga-jaga kalau ada orang iseng yang nyasar.

Jika ada yang kurang jelas, silakan disampaikan.
Terima kasih ..
Semoga bermanfaat ..

Comments :

1 komentar ke "Membuat Sidebar Kanan Kiri"

ASENG on October 27, 2013 at 11:47 AM said...

makasih gan ilmunya


Post a Comment

Silakan berkomentar sesuka Anda. Namun jangan spam, berbau SARA, kekerasan, porno atau intimidasi terhadap orang lain. Komentar yang melewati batas akan di hapus. Terima kasih.

Get Update

Masukkan alamat e-mail Anda pada kotak di bawah ini untuk mendapatkan update terbaru dan berlangganan catatan dari blog "The Notes Web" via e-mail :


Privacy guaranteed, we will never share your e-mail.

Komentar terbaru

Catatan Terbaru

Komentar Terbaru