.tutorial #24 - sidebar gadjets dalam kotak

.salam readers~

.untuk kesekian kali nya i nak buat tutorial kembali! .yayyyy~~~ .kali ni, i nak buat tutorial membuat sidebar gadjet macam i atau dalam bahasa skema-nya, sidebar gadjets dalam kotak yang berasingan .huhu~

1) .mula-mula, back up dulu template lama anda in case i ajar ajaran sesat pada korang semua .haha!

2) .then bukak Dashboard - Layout - Edit HTML dan cari code di bawah ini dengan menggunakan CTRL+F
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
3) .bila dah jumpa code dekat atas tu, DELETE dan REPLACE dengan code di bawah ini
.sidebar .widget {
background:#FFFFFF;
border: 1px solid #000000;
margin:0 -5px 1.5em -5px;
padding:5px 7px 5px 7px;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.untuk tulisan merah tu, korang boleh tukar code warna ikut suka korang .size border pun sama .nak pilih warna, boleh tengok code dia dekat SINI .lepas tu, untuk background tu, if korang nak letak gambar, just simply replace code warna tu background:#FFFFFF; dengan
background-image: url(URL BACKGROUND IMAGE KORANG)
yang tulisan oren pulak, korang boleh adjust padding dia. kalau padding tu 0px, tulisan dekat gadjet sidebar korang akan rapat ke border. ada faham?

4) .then korang carik pulak code dekat bawah ni dengan menggunakan CTRL+F
#sidebar-wrapper {
background:#FFFFFF;
border: 1px solid #000000;

width: 220px;
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 */
}
5) .bila dah jumpa, DELETE code yang warna merah. Save it and preview your blog! dan sidebar gadjet korang yang baru dah siap! =)

6) .kalau tak faham, tanya k .ha lagi satu, bila dah berjaya buat apa yang i ajar, buat lah entry dan bagi lah credit dekat i
.contoh ;
.credit to intanurulfateha yang comel
sebab ajar buat tutorial neh .heh!

.Selamat Mencuba!

.errr andddddd

.STRICTLY,
JANGAN COPY CAT
ENTRY I
& BLOG I

.TAK PAYAH LAH NAK BUAT SAMPAI ALMOST SAMA
BLOG TUU DENGAN BLOG I!

.SOOOOO IMMATURE
.PLEASE CARI IDENTITI SENDIRI
.TAKKAN DAH TAK ADA IDEA KOT

.KEPADA YANG BERKENAAN;

.ANDA BOLEH DI DAKWA DI BAWAH
AKTA 588,
AKTA KOMUNIKASI DAN MULTIMEDIA
1998

.SEKIAN! =)

Photobucket