51
Cara Membagi Sidebar Menjadi 2 kolom

Cara Membagi Sidebar Menjadi 2 kolom - Postingan ini saya buat untuk para blogger yang mau membuat sidebarnya menjadi 2 kolom,  Terus terang sudah sekitar 2 minggu saya tidak pernah utak-atik template jadi dah rada-rada lupa. Tapi karena saya melihat ada blog yang sidebarnya di bagi menjadi dua dan dia pun membagi tutorialnya saya share aja deh. sengihnampakgigi Semoga tutorial ini bermanfaat terutama untuk blogger yang membutuhkan
Ok mari kita mulai..

1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
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 */
}
Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.

Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.

Sebagai contoh nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing-masing kolom akan kita beri margin sebesar 10px agar terdapat ruang jarak. Sehingga sekarang lebar masing2 sidebar menjadi 117px.

Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.

5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti ini

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
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:254px;
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 */
}
6. Ganti nilai width masing-masing kolom menjadi 117px. Lalu tambahkan margin:0px 20px 0px 0px; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini

#sidebar-wrapper {
background-color: #f6f6f6;
width:117px;
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:117px;
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. Setelah itu, cari kode

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>
8. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.

9. Copy kode yang berwarna biru diatas lalu letakkan dibawah </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Jadi hasilnya menjadi seperti ini.

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

<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
10. Jika sudah klik Save Template.
11. Selesai. Klik Page Element untuk melihat hasilnya.
sekian artikel tentang Cara Membagi Sidebar Menjadi 2 kolom semoga bermanfaat dan semga berhasil...
dan baca juga artikel ini Cara Menambahkan Add a Gadget pada Template Blogger

Do you want to share?

Do you like this story?

Anda sedang membaca artikel Cara Membagi Sidebar Menjadi 2 kolom dan artikel ini url permalinknya adalah http://info-adit.blogspot.com/2011/12/cara-membagi-sidebar-menjadi-2-kolom.html
Semoga artikel Cara Membagi Sidebar Menjadi 2 kolom ini bisa bermanfaat.

Article :

5 komentar: — Skip to Comment.

Official Blog Of ALDI-XP mengatakan...

Blogwalking :D, Kunjungi balik dan kasih komentar ya sob! :D

Aditya Harviansyah mengatakan...

@Official Blog Of ALDI-XP siap sob :D

Anonim mengatakan...

[url=http://www.slotsplay.se]casino[/url] [url=http://www.orderthepill.biz]viagra online[/url] [url=http://www.c-online-casino.co.uk]casino[/url]

Anonim mengatakan...

hiya info-adit.blogspot.com admin discovered your website via search engine but it was hard to find and I see you could have more visitors because there are not so many comments yet. I have found website which offer to dramatically increase traffic to your website http://xrumerservice.org they claim they managed to get close to 1000 visitors/day using their services you could also get lot more targeted traffic from search engines as you have now. I used their services and got significantly more visitors to my website. Hope this helps :) They offer most cost effective backlink service Take care. Jason

Cyber_Newby Community [CNC] mengatakan...

wah, bagus nih artikel nya. numpang BM skalian blogwalking gan..

mampir jg ya gan ke blog ku. http://cyber-newby.blogspot.com