Wednesday, December 09, 2009

Cara Menambah 2 kolom di sidebar

Langsung saja Cara Menambah 2 kolom di sidebar :
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;
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 dibawah ini 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='Kluwan 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='Kluwan 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..

Anda Sudah Baca Yang Ini? :

39 komentar:

Klik Here To Show All Comment


Khairul Anwar Thursday, December 10, 2009 12:15:00 AM  

weleh weleh mau jadi tukang tutor nihh,sip sip makasih tipsnya

Unknown Thursday, December 10, 2009 12:21:00 AM  

salam sahabat
wah siip dhek bisa di coba nich thnxs n good luck ya

Mr. X Thursday, December 10, 2009 12:48:00 AM  

:)) GONDES... bekajar sambil nutor...

:X Dhana/戴安娜, iya mbak dhana...

tips komputer, v0^ sama-sama ya?

Mr. X Thursday, December 10, 2009 12:54:00 AM  

tips blog, :-o kok sama? langsung ke tkp
..........................................

mas doyok Thursday, December 10, 2009 1:16:00 AM  

sip
lrebihbagus kalo kamu mau asih scren shot hasil saaat di elemen page :D

Upex Thursday, December 10, 2009 1:57:00 AM  

Mantabs nich... coba dulu ahhh...
Makasih dek...

Mr. X Thursday, December 10, 2009 2:00:00 AM  

mas doyok, betul ya mas...? :X

mas gondes...iya maaf telat...

Vienka Thursday, December 10, 2009 2:06:00 AM  

wah sip nieh tutornya sukses selalu yah ;))

H4ura Thursday, December 10, 2009 4:19:00 AM  

wah, ini neh yg aku cari2 buat sidebar jadi 2 kolom.. Thanks yah ...

Happy Blogging :)

HB Seven Thursday, December 10, 2009 10:07:00 AM  

mantaps....thank atas pencerahannya....salam kenal ...

Rizkyzone Thursday, December 10, 2009 10:29:00 AM  

wah mantab nih nanti akan mas coba

blog tips dan trik Thursday, December 10, 2009 11:49:00 AM  

Q coba dulu ya kak,tar kalo udah berhasil Q laporan deh heheh =))

FATAMORGANA Thursday, December 10, 2009 12:23:00 PM  

mantap nih...
nambah lagi deh.
makasih.

FATAMORGANA Thursday, December 10, 2009 12:30:00 PM  

Ada Award buat Dinda.
moga sudi dijemput.

the international times Thursday, December 10, 2009 2:28:00 PM  

tips yg bagus. tapi agak rumit yah harus otak atik html :)

Rival Aditya Thursday, December 10, 2009 3:37:00 PM  

wah mantab Dek Tutorialnya sgt bermanfaat buat aq.... great Blog n nice post

Unknown Thursday, December 10, 2009 3:48:00 PM  

kok ga mau ya???

http://holdingthebeat.blogspot.com/

Unknown Thursday, December 10, 2009 5:57:00 PM  

kk ga bisa ngomong banyak kecuali...hebat !!!!...

Anonymous,  Thursday, December 10, 2009 6:08:00 PM  

say...blog m rangkingnya bagus amat...sering di urusin ya say??? rajin ya kamu....main ketempat ku ya...

afdil Friday, December 11, 2009 7:23:00 AM  

Wuih pusing juga ngeliatnya. Padahal ingin ngerombak template nih. Ada ndak cara mudahnya?

Mx Axrom Friday, December 11, 2009 10:36:00 AM  

Oh ternyata begitu ya ,thanx ea nul...:)

Anonymous,  Friday, December 11, 2009 12:16:00 PM  

bagus banget neh buat dipraktekkan langsung...

thanks ya buat pelajaran ngeblognya...

Crockie Friday, December 11, 2009 12:22:00 PM  

wow! hebat si dewi ini. amat sesuai tipnya ini buat modifikasi template 2 kolom.

PingugOblOg Saturday, December 12, 2009 5:08:00 AM  
This comment has been removed by a blog administrator.
Zamrud Saturday, December 12, 2009 5:54:00 AM  

It's nice info and give inspiration !
visit me and follow please...

Cangkru'an Rek...!!! Saturday, December 12, 2009 2:06:00 PM  

Wahh...info yang sangat menarik..bermanfaat nih...thanks a lot..

Ariana Sunday, December 13, 2009 9:50:00 AM  

hehehehe...saya sering pengen buat sidebar di kanan ada 2 kolom tapi gak pernah berhasil..., akhirnya saya putuskan tetap satu walaupun kayak gitu adanya...:p 0[]

Toernip Wednesday, January 06, 2010 10:51:00 PM  
This comment has been removed by a blog administrator.

Post a Comment

newer page older page home
top