MENAMBAH SIDEBAR DI KANAN DAN KIRI



S
ebelum menambah kolom sidebar yang perlu kita perhatikan adalah pada bagian di bawah ini:

Outer-wrapper=660px;

Header-wrapper=660px;
Footer-wrapper=660px;
  • Sekarang masuk ke blog sobat.
  • Klik tata letak.
  • Edit html.
  • Jangan beri centang pada Expand widged template.
Cari kode seperti di bawah ini:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float:right;
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-wrapper {
width: 220px;
float: $startSide;
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 */

Outer-wrapper ini merupakan sebuah bingkai di mana main wrapper dan sidebar berada,termasuk header dan footer berada di dalamnya.

Jika ingin menambah satu sidebar berarti kita harus menambah pula lebar dari bingkai tersebut.Misalnya kita ingin menambah satu sedebar dengan lebar yang sama dari sedebar sebelumnya,kita tinggal cloning dan menambahkan nilai sidebar tersebut pada Outer-wrapper= 660+220=880.

Kemudiann kasih nama sidebar tersebut dengan nama yang berbeda.Agar lebih mudah membedakannya kita beri nama sidebarbaru-wrapper,hingga hasilnya sbb:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float:$endSide;
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-wrapper {
width: 220px;
float: right;
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 */
padding:5px;

#sidebarbaru-wrapper {
width: 220px;
float: left;
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 */
padding:5px

Untuk warna merah adalah hasil cloning dari sedebar-wrapper yang kita beri nama sidebarbaru-wrapper,sedang warna biru tambahan sela agar font tidak terhimpit bingkai sidebar. warna orange dimana letak sidebar berada.

Jangan lupa ganti juga nilai lebar dari:
header-wrapper= 880px;
footer-wrapper= 880px;

Setelah mengganti kode-kode angka dan memberi nama sidebar tersebut,kemudian tarik ke bagian bawah pada kode template sobat. Temukan kode seperti di bawah ini:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Letakkan kode dibawah ini tepat atasnya:

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>


Hingga hasilnya sebagai berikut:

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

  • Klik pratinjau.
  • Jika di rasa sudah sesuai klik simpan template.



24 komentar:

Reyz mengatakan...

mas gmn yah cara memperlebar SIDEBAR blog saya, karena templet blog saya tidak ada keterangan lebar / width sidebarnya.
saya dah capek mengolah templet blog saya itu, tapi tak kunjung berhasil memperlebar sidebarnya. mas kasih petunjuknya yah..,
saya memakai templet JACKBOOK Dark Slined Mod 2.0
SEBELUMNYA SAYA UCAPKAN TERIMA KASIH BANYAK ATAS BANTUANNYA..

Darmasena mengatakan...

@Reyz: Coba tambahkan kode
.sidebar{
padding:65px;}
Letakkan di atas kode ]]></b:skin>
atau letakkan di bawah kode
.imgrecent{width:100px;
}

yahaya mengatakan...

blogspot sudah menyediakan kemudahan untuk design blog sendiri:masuk sini
http://draft.blogger.com/

Mujahid Cinta mengatakan...

kunjungan perdanaaaaaaaa

Untuk Kita Semua mengatakan...

bagaimana cara mengisi artikel kedalam Tombol Navigasi

Devina Cleodora mengatakan...

caranya susah amit gan.. saya cari2 ga ketemu juga... ~x(

Kajian Hukum Islam dan Kemasyarakatan : Abdul Helim mengatakan...

saya ga ketemu kodenya gan, kodenya itu untuk yang klasik apa yang baru gan. terima kasih infonya

tokobajubin mengatakan...

terima kasih infonya

ayushopie foryou mengatakan...

Thanks infonya, sangat berguna

Gopar mengatakan...

sukses gan..tapi saya banyak modif nya..thanks ya?? baru buat blog buat nampung template saya..http://gopar-template.blogspot.com

Abel Tasfir mengatakan...

gan,
saya mau nambahin sidebar di sebelah kanan blog saya untuk penembatan banner ato iklan dengan ukuran 150x150px, dan padding kiri dan kanannya 10px. jd butuh ukuran widget 150+20=170px.

tapi di blog saya ada kode "#wrap2"-nya.
seperti dibawah ini yg ada diblog sya. bagaimana cara modifikasi nya ya gan..?



#main-wrapper {
width: 640px;
padding:0 10px;
margin:0 auto;
float: left;
word-wrap: break-word;
overflow: hidden;
}

#outer-wrapper {
width:970px;
margin:0 auto;
padding:0 10px;
text-align:left;
}

#wrap2{
margin:0 auto;
width:970px;
}



#sidebar-wrapper {
width: 260px;
padding:0;
float: right;
margin:0px 30px 0 0;


seperti ini tampilan blog saya gan : "http://abel-tasfir.blogspot.com/"

terimakasih banyak atas infonya gan..

kurnia mulya mengatakan...

=))
terimakasih infonya

rewinsatria mengatakan...

thanks infonya sangat berguna

1technobee mengatakan...

hiks gagall T_T
lebarnya udah nambah tapi ga bisa ditambah widget ni om >.<

http://1technobee.com

ivan bachtiar mengatakan...

makasih untuk informasi berharganya
http://vandepenter.blogspot.com/

Reinaldi mengatakan...

wah artikel yang menarik gan.

Rizky lucifer mengatakan...

mas template saya posting nya di kiri.. nah supaya buat posting nya di tengah
agar yang bagian kiri bisa di bikin widget
nih blog saya. www.anishare-blog.blogspot.com

Tantry Agustine mengatakan...


kok ga muncul mas?? apa element pada blog saya beda y? :) . makasih salam by
Photography

Handika Sembiring mengatakan...

Makasih banyak ya om, sangat membantu ini artikelnya.

Dewi Aja mengatakan...

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Kisah Motivasi mengatakan...

Saya masih butuh bimbingan mas

LBM-NU Lampung mengatakan...

Mampir Mas

http://lbmnulampung.blogspot.co.id/2016/02/gerhana-pengertian-gerhana-dan-tata.html

lukman sedah mengatakan...

makasih kang sangat memebantu ini yang kucari lihat perumahan di blog saya juga ya mas setelah saya ikuti saran dari blog sampeyan ini: https://bocah-kop.blogspot.co.id/

Jhon mengatakan...

Izin praktek boss, jangan lupa mampir sewa hiace malang thanks

:) :( ;) :D ;;) :P :-* :-o :(( =)) ~x(
Posting Komentar