membuat sidebar blogger

Membuat sidebar bukan hal yang sulit bahkan bisa di katakan cukup mmudah membuatnya,jika anda ingin blog anda memiliki sidebar di kanan dan kiri,atau di kanan saja maupun di kiri saja anda bisa mengikuti beberapa langkah dibawah ini,cara ini cocok buat template yang biasanya hanya memberikan satu sidebar saja sementara anda inginkan 2 sidebar,tutorial ini menggunakan template download,bukan template asli blogger.
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 ..


Sobat perlu baca yang ini juga:

0 komentar:

Posting Komentar

silahkan tinggalkan pesan !!!