Download File: sidebar

Showing posts with label sidebar. Show all posts

Thursday, April 6, 2017

MENAMBAH SIDEBAR DI KANAN DAN KIRI

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.

Available link for download