menambahkan 2 kolom lagi di bawah sidebar

Artkel kali ini bisa di katakan lanjutan dari artikel mengenai merubah sidebar menjadi dua kolom 
Jika Anda telah melakukan pengeditan sidebar dengan cara yang ditunjukkan pada halaman
merubah sidebar menjadi dua kolom maka yang harus di lakukan untuk membuat sidebar dengan 1 kolom utama dan 2 kolom dibawahnya hanyalah cukup dengan menambahkan kode berikut ini tepat diantara kode

<div id='sidebar-wrapper'> dan kode <b:section class='sidebar' id='left-side' preferred='yes' showaddelement='yes'>.

Berikut kode yang harus ditambahkan :

<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>

Setelah itu simpan dan lihat pada halaman "Page Element" atau "Elemen Laman".

Tapi jika belum, maka untuk menambahkan 2 kolom di bawah sidebar bisa dilakukan dengan langkah-langkah berikut ini.

Langkah-langkah menambahkan 2 kolom sidebar di bawah kolom utama pada template blogspot :

A. Langkah I

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. Temukan kode berikut ini atau kode yang mirip dengan kode berikut ini di dalam text-area kode html blog :

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

6. Letakkan kode berikut ini tepat dibawah kode tesebut:

#sidecol1{
width:50%;
float:left;
word-wrap:break-word;
overflow:hidden;
margin: 2px;
}



#sidecol2{
width:50%;
float:right;
word-wrap:break-word;
overflow:hidden;
margin:1px;
}

Langkah I selesai. Selanjutnya ikuti Langkah II berikut ini :

1. Temukan kode berikut ini atau yang mirip

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

2. Letakkan kode berikut ini tepat di bawah kode tersebut :
<b:section class='sidebar' id='sidecol1' preferred='yes'>
</b:section>
<b:section class='sidebar' id='sidecol2' preferred='yes'>
</b:section>

3. Simpan Template.
4. Lihat hasilnya pada halaman "Elemen Laman" atau "Page Element"

Selesai !
Semoga bermanfaat... 


Sobat perlu baca yang ini juga:

3 komentar:

  • dion

    belum ada komentar, silahkan tambahkan komentar atau pertanyaan anda.

    jawab
  • G2F

    thanks berhasil nih

    jawab
  • Posting Komentar

    silahkan tinggalkan pesan !!!