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? :
- Bertakwalah kepada Allah (QS. Al Hasyr : 18)
- Kendalikan hawa nafsu marah
- Berprasangka baik dapat pahala
- Sesama Manusia Budayakan Saling Menasehati
- Mengingat kebaikan dan memberi pujian bagi orang yang telah meninggal dunia
- Kenapa dan mengapa Para Pejabat Indonesia banyak yang KORUPSI?
- Cara mudah membuat posting Kode HTML Java Script di Blogspot / Wordpress
- Cara membuat Favicon atau Icon di browser Blog anda dengan mudah
- Cara mudah membuat Blog. (Bagi Blogger Pemula)
- Free Download Mp3 Bob Marley (Gratis)
- Blog yang Menghasilkan Uang Milyaran Per Tahun
- Daftar Lengkap Submit ke directory dan Submit ke social bookmark
- Cara Membuat Iklan Melayang di Blog
- Google Adsense Problem Pin
- Kenapa Blog Kluwan dot com Page Rank Turun? Djadwal Google PR up-date
- Cara Membuat Daftar Isi Blog 2
- Cara Membuat Daftar Isi Blog 1
- Hasil Pertandingan Google Page Rank dengan Blogku
- Award From Dhana Arsega / 戴安娜 With Love Best Wishes
- Cantiknya Seri Bahasa Community Blogger Award
- Cara Setiap Posting Blog Tampil di Facebook
- Mulai Bulan Maret 2010 Perfect Money for Business Tidak Bayar kecuali PR 5
- Menu Horizontal Css dengan Drop Down yang Cantik Menarik
- Alexa Semakin Gendut
- Cuma lima menit Hanya Daftar Dapat $50 dari DomainIT
- Bertakwalah kepada Allah (QS. Al Hasyr : 18)
- Kendalikan hawa nafsu marah
- Berprasangka baik dapat pahala
- Sesama Manusia Budayakan Saling Menasehati
- Mengingat kebaikan dan memberi pujian bagi orang yang telah meninggal dunia
- Kenapa dan mengapa Para Pejabat Indonesia banyak yang KORUPSI?
- Cara membuat Favicon atau Icon di browser Blog anda dengan mudah
- Cara Membuat Daftar Isi Blog 1
- Award From Dhana Arsega / 戴安娜 With Love Best Wishes
- Menu Horizontal Css dengan Drop Down yang Cantik Menarik
- Cuma lima menit Hanya Daftar Dapat $50 dari DomainIT
- Ikutan yuk di Review NegeriAds.Com
- Younger Tip with Tomatoes
- Cara Membuat Navbar Blog Auto Show and Hide 3
- Cara Untuk menampilkan navbar blogger 2
- Menampilkan Navbar yang hilang pada Blog
- Khasiat Buah Pare Pencegah Kanker Payudara, Diabetes dan Infeksi
- Cara memasang kode Sign in pada Blogger di Blog
- KPK Telusuri 'Amplop' di Paripurna Century
- Cara Mengetahui Link Internal dan External dengan Addons
- Enam Tips Mencuci Rambut
- Cara Redirect Blogger feed ke FeedBurner feed
- manfaat daun pisang
- Misteri Manfaat dan kegunaan Daun SIRIH
- Cara Membuat Recent Post dan Recent Comment dengan Feed Blog
- Kenapa dan mengapa Para Pejabat Indonesia banyak yang KORUPSI?
- Cara mudah membuat posting Kode HTML Java Script di Blogspot / Wordpress
- Cara membuat Favicon atau Icon di browser Blog anda dengan mudah
- Blog yang Menghasilkan Uang Milyaran Per Tahun
- Daftar Lengkap Submit ke directory dan Submit ke social bookmark
- Cara Membuat Iklan Melayang di Blog
- Google Adsense Problem Pin
- Kenapa Blog Kluwan dot com Page Rank Turun? Djadwal Google PR up-date
- Cara Membuat Daftar Isi Blog 2
- Cara Membuat Daftar Isi Blog 1
- Hasil Pertandingan Google Page Rank dengan Blogku
- Award From Dhana Arsega / 戴安娜 With Love Best Wishes
- Cara Setiap Posting Blog Tampil di Facebook
- Mulai Bulan Maret 2010 Perfect Money for Business Tidak Bayar kecuali PR 5
- Alexa Semakin Gendut
- Cuma lima menit Hanya Daftar Dapat $50 dari DomainIT
- Ikutan yuk di Review NegeriAds.Com
- Cara Mengembalikan "Title / Judul" Blog yang Hilang
- Younger Tip with Tomatoes
- Cara Membuat Navbar Blog Auto Show and Hide 3
- Cara Untuk menampilkan navbar blogger 2
- Menampilkan Navbar yang hilang pada Blog
- Navbar Styles Transparans baru
- Cara memasang kode Sign in pada Blogger di Blog
- Cara Google Translate Widget Tambahkan ke blogger
- Kenapa dan mengapa Para Pejabat Indonesia banyak yang KORUPSI?
- Cara mudah membuat posting Kode HTML Java Script di Blogspot / Wordpress
- Cara membuat Favicon atau Icon di browser Blog anda dengan mudah
- Cara mudah membuat Blog. (Bagi Blogger Pemula)
- Daftar Lengkap Submit ke directory dan Submit ke social bookmark
- Cara Membuat Iklan Melayang di Blog
- Google Adsense Problem Pin
- Kenapa Blog Kluwan dot com Page Rank Turun? Djadwal Google PR up-date
- Cara Membuat Daftar Isi Blog 2
- Cara Membuat Daftar Isi Blog 1
- Hasil Pertandingan Google Page Rank dengan Blogku
- Award From Dhana Arsega / 戴安娜 With Love Best Wishes
- Cara Setiap Posting Blog Tampil di Facebook
- Menu Horizontal Css dengan Drop Down yang Cantik Menarik
- Alexa Semakin Gendut
- Cuma lima menit Hanya Daftar Dapat $50 dari DomainIT
- Ikutan yuk di Review NegeriAds.Com
- Cara Mengembalikan "Title / Judul" Blog yang Hilang
- Younger Tip with Tomatoes
- Cara Membuat Navbar Blog Auto Show and Hide 3
- Cara Untuk menampilkan navbar blogger 2
- Menampilkan Navbar yang hilang pada Blog
- Navbar Styles Transparans baru
- Khasiat Buah Pare Pencegah Kanker Payudara, Diabetes dan Infeksi
- Cara memasang kode Sign in pada Blogger di Blog
- Cara mudah membuat posting Kode HTML Java Script di Blogspot / Wordpress
- Cara mudah membuat Blog. (Bagi Blogger Pemula)
- Blog yang Menghasilkan Uang Milyaran Per Tahun
- Daftar Lengkap Submit ke directory dan Submit ke social bookmark
- Google Adsense Problem Pin
- Kenapa Blog Kluwan dot com Page Rank Turun? Djadwal Google PR up-date
- Award From Dhana Arsega / 戴安娜 With Love Best Wishes
- Cantiknya Seri Bahasa Community Blogger Award
- Cara Setiap Posting Blog Tampil di Facebook
- Mulai Bulan Maret 2010 Perfect Money for Business Tidak Bayar kecuali PR 5
- Alexa Semakin Gendut
- Ikutan yuk di Review NegeriAds.Com
- Younger Tip with Tomatoes
- Cara Membuat Navbar Blog Auto Show and Hide 3
- Cara Untuk menampilkan navbar blogger 2
- Menampilkan Navbar yang hilang pada Blog
- Navbar Styles Transparans baru
- Khasiat Buah Pare Pencegah Kanker Payudara, Diabetes dan Infeksi
- KPK Telusuri 'Amplop' di Paripurna Century
- Seru Maradona Menentang Rencana Pemanasan Piala Dunia
- Cara Google Translate Widget Tambahkan ke blogger
- Cara Menampilkan kode cek Page Rank Google
- Enam Tips Mencuci Rambut
- Usia Pasangan Pengaruhi Jenis Kelamin Bayi?
- Tip Merawat Agar Kopi Tetap Nikmat
39 komentar:
weleh weleh mau jadi tukang tutor nihh,sip sip makasih tipsnya
salam sahabat
wah siip dhek bisa di coba nich thnxs n good luck ya
terima kasih atas tipsnya,
terima kasih atas tipsnya
:)) GONDES... bekajar sambil nutor...
:X Dhana/戴安娜, iya mbak dhana...
tips komputer, v0^ sama-sama ya?
tips blog, :-o kok sama? langsung ke tkp
..........................................
sip
lrebihbagus kalo kamu mau asih scren shot hasil saaat di elemen page :D
AKtifin ymmu huh
Mantabs nich... coba dulu ahhh...
Makasih dek...
mas doyok, betul ya mas...? :X
mas gondes...iya maaf telat...
nas Upex ; :X ayo coba...
wah sip nieh tutornya sukses selalu yah ;))
nice tutorial nieh ;))
good mornig, nice ur blog
wah, ini neh yg aku cari2 buat sidebar jadi 2 kolom.. Thanks yah ...
Happy Blogging :)
mantaps....thank atas pencerahannya....salam kenal ...
wah mantab nih nanti akan mas coba
Q coba dulu ya kak,tar kalo udah berhasil Q laporan deh heheh =))
mantap nih...
nambah lagi deh.
makasih.
Ada Award buat Dinda.
moga sudi dijemput.
tips yg bagus. tapi agak rumit yah harus otak atik html :)
makin mantab tipsnya nih :)
wah mantab Dek Tutorialnya sgt bermanfaat buat aq.... great Blog n nice post
kok ga mau ya???
http://holdingthebeat.blogspot.com/
kereeeeen,,,
q coba ya,,,,
:X
kk ga bisa ngomong banyak kecuali...hebat !!!!...
say...blog m rangkingnya bagus amat...sering di urusin ya say??? rajin ya kamu....main ketempat ku ya...
makasih atas infonya mbak^_^
Wuih pusing juga ngeliatnya. Padahal ingin ngerombak template nih. Ada ndak cara mudahnya?
Oh ternyata begitu ya ,thanx ea nul...:)
bagus banget neh buat dipraktekkan langsung...
thanks ya buat pelajaran ngeblognya...
wow! hebat si dewi ini. amat sesuai tipnya ini buat modifikasi template 2 kolom.
kl bikin 2 jadi 1 gmn???
visiting ur blog
It's nice info and give inspiration !
visit me and follow please...
Wahh...info yang sangat menarik..bermanfaat nih...thanks a lot..
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[]
Post a Comment