Tutorial : Cara Pisahkan Widget Di Sidebar Dengan Kotak

Friday, September 24, 2010

48 hours sticky post. scroll down foor new entries. Thanx :)


PEMBERITAHUAN :


Tutorial yang Anna Boleyn buat ni adalah untuk blog yang menggunakan template minima yang lama sahaja. Code2 kat minima ni senang faham and senang nak edit. Bagi yang guna template blogger yang baru tu, den tak tau lah. Sebab html nya lain. Godek2 pon tak paham gak.  Den bukan expert pon. Sikit2 boleh lerr. Sorry ekk...


Salam readers,

Yang ni pon ramai gak yang request. Bukan ape, nampak kemas kan kalau widget-widget ni ada kotak sendiri macam kat sidebar HLN ni. Cuba tengok kanan. Bukan kanan korang.. kanan kat PC ni!Hehe


Step 1

  • Pergi kat Dashboard
  • Click Design/Layout
  • Click Edit HTML
  • Tick Expand Widget Templates

Step 2

  • Tekan CTRL dan F
  • Copy and paste ayat ini pada kotak search :
.sidebar .widget, .main .widget {
  • Anda akan nampak code yang sejibik macam ini :
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Step 3

  • Gantikan semua code di atas dengan code ini :
.sidebar .widget {
background: #FFFFFF (warna yang anda inginkan sebagai sidebar);
border: 1px solid #FF3333 (warna yang anda inginkan sebagai border sidebar);
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Step 4


Edit code yang diwarnakan sahaja :


Color HIJAU ---> Boleh tukar ketebalan border (1px/2px/ 3px/4px./.......)
Color UNGU ---> Ganti dengan jenis boder yang korang nak.. (solid/dotted/dashed/double/outset)
Color BIRU  ---> Ganti dengan code faveret color korang. Code color korang ley dapatkan kat sini :



Color GREY ---> Tolong Padam :)

Step 5
  • Tekan CTRL dan F
  • Copy and paste ayat ini pada kotak search :
#sidebar-wrapper {
  • Anda akan nampak code yang sejibik macam ini :
#sidebar-wrapper {
background-color: #ffffff;
width: 290px;
float: $endSide;
padding-left: 10px;
padding-right: 10px;
margin-right: 20px;
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 */
}
  •  Highlight and delete code yang color biru tu.

Step 6

Lepas dah masuk kan URL dekat code tadi, click PREVIEW dulu naaaaa...

Kalau tak de error baru lah click SAVE TEMPLATE


Macam biasa, jadi ke tak jadi meh datang sini bagitau. Macam biasa jugak kalau jadi, hulur2 lah labtop apple MAC sebijik. Hakhak.

Selamat Mencuba!


p/s : pada yang tak jumpa code.. emm~ cari betol2. kalau tak jumpe gak.. boleh je kalau nak suruh anna boleyn tengok2 kan. itupun klu korang tak keberatan untuk bagi password ngan id. daaa~