Cara Membelah Sidebar Menjadi 2 kolom

Kali ini www.indrapramana76.blogspot.com akan share cara membelah sidebar menjadi 2 kolom seperti gambar dibawah ini.
Adapun keuntungan dari membelah sidebar menjadi 2 yaitu dapat menambah lebih banyak widget di template namun kerugiannya lebar kolom widget menjadi semakin kecil. 
Lansung saja caranya :
1. Login ke Blogger
2. Pilih Template --> Edit HTML
3. Kemudian cari kode dibawah ini
#sidebar-wrapper {background-color: #f6f6f6;width:350px;float:$endSide;padding:0;color: $sidebarTextColor;font-size: 83%;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*/}
4. Kemudian copy kode diatas tadi kemudian paste dibawahnya seperti ini
#sidebar-wrapper {background-color: #f6f6f6;width:350px;float:$endSide;padding:0;color: $sidebarTextColor;font-size: 83%;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-wrapper1 {background-color: #f6f6f6;width:160px;float:$endSide;padding:0;color: $sidebarTextColor;font-size: 83%;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-wrapper2 {background-color: #f6f6f6;width:160px;float:$endSide;padding:0;color: $sidebarTextColor;font-size: 83%;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*/}
5. Kemudian karena membagi 2 sidebar maka ukurannya pun harus dibagi menjadi 2 dan karena ada jarak spasi kira-kira 10px maka 350px diubah menjadi 160px menjadi seperti di atas.

6. Kemudian tambah 
margin:0px 20px 0px 0px; di bagian sidebar wrapper 2 seperti ini 


#sidebar-wrapper {background-color: #f6f6f6;width:350px;float:$endSide;padding:0;color: $sidebarTextColor;font-size: 83%;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-wrapper1 {background-color: #f6f6f6;width:160px;float:$endSide;padding:0;color: $sidebarTextColor;font-size: 83%;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-wrapper2 {background-color: #f6f6f6;width:160px;float:$endSide;padding:0;margin:0px 20px 0px 0px; color: $sidebarTextColor;font-size: 83%;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*/}

7. Eittt belum selesai anda masih harus mencari kode dibawah ini

<div id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='Label1' locked='false' title='kategori' type='Label'/></b:section></div>


8. Perhatikan tulisan yang berwarna biru karena yang berwarna merah hanya widget dan disetiap blog berbeda-beda.

9. Copy kode yang berwarna biru tadi menjadi seperti ini dan ganti 
sidebar-wrapper yang kolom ke dua menjadi sidebar-wrapper1 dan id='sidebar1' demikian juga pada kolom yang ketiga.

<div id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='Label1' locked='false' title='kategori' type='Label'/></b:section></div><div id='sidebar-wrapper1'><b:section class='sidebar' id='sidebar1' preferred='yes'></b:section></div><div id='sidebar-wrapper2'><b:section class='sidebar' id='sidebar2' preferred='yes'></b:section></div>


10. Kemudian simpan template
11. Dan Kemudian lihat hasilnya di tata letak

Related Post:

4 komentar:

  1. Blogwalking sambil baca² gan :)


    #jangan lupa kunjungan baliknya ya..

    http://ramadhanakurnia.blogspot.com/

    BalasHapus
  2. bagus banget bro tampilan bloqnya, serta tips dan triknya.. ^_^

    BalasHapus

Nama Saya Indra Pramana. Saya adalah blogger pemula yang hanya mencoba untuk blogging dan saya hanya blogging karena iseng - iseng saja karena tidak ada game yang menarik sekian sedikit tentang profil saya Lihat Profil Lengkap Ku
 
Join this site
cyb3rThanks For Visiting Gunakanlah Google Chrome Untuk Tampilan Sempurna