Gratis berlangganan artikel Zykry via mail, join sekarang!

Friday, March 19, 2010

Cara Membuat Sidebar 2 kolom





Ok mari kita mulai..

1. Login ke Blogger. Klik Layout -> 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:$sidebarBgColor url("http://www2.blogblog.com/no897 /corner_sidebar_$startSide.gif") no-repeat $startSide top;
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 masing2 kolom akan kita beri margin sebesar 10px agar terdapat ruang spasi. Sehingga sekarang lebar masing2 sidebar menjadi 117px.

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

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



#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
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:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
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 masing2 kolom menjadi 117px. Lalu tambahkan margin:0px 20px 0px 0px; pada sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini



#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
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:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
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 lalu letakkan dibawahnya. 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.


Selamat mencoba..


Related Post:

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di zykry-trick.blogspot.com
Thx to :
Jangan lupa add facebook Zykry Dark
print this page Print this page
Cara Membuat Sidebar 2 kolomSocialTwist Tell-a-Friend

Comments :

5 comments to “Cara Membuat Sidebar 2 kolom”

Nikmaya John said...
on 

Pertamax nih,,,

LutFiiy Lavhalitya said...
on 

blognya keren nih :D

Yoga Pratama said...
on 

Mas zykry.,, Kalo Cara Buat Template Blog Gmana ya...?
Saya Maunya Buat Sendiri, Bukan Buat Di Dotemplate.com Atau Yang Lainnya...

wahid sahidu said...
on 

mantap gan ane cobain dolo

Rumah Bakulan Murah said...
on 

thank's ilmu nya gan...


Apa pendapat anda?

No spam and no porn yaw!!

Widget By Devils Workshop

Guest Book

Iklan

Pasang iklan anda di Zykry-trick hanya Rp.15.000 /bulan Hubungi : 087 823 177 355 - 085 759 277 896 Facebook : Zykry@programmer.net
 
twitter

Tukeran Link

Tips Dan Trick Blogging

U follow I follow

Statistik


free counters
broadband speed test
Current Events & News Blogs - Blog Rankings Blog Directory
Internet Blogs Web Design & CSS (Graphics) - TOP.ORG
Blogging Blogs - Blog Catalog Blog Directory Online Marketing - OnToplist.com
Web design blogs
The Republic of Indonesian Blogger | Garuda di Dadaku
Top 10 Award