Wednesday, April 7, 2010

.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

90 comments

saya_arief said...

siap bagi akta agi tuh..
baguih betoi..
huhu.

misslavenderaida said...

wow....
nk try wt la...:)
tp..skrg bz lg...
tgu ye....hehehehehe...

adrinaqamarina said...

sis...
thanks...
da try buat...
oke gak la...
tapi u nyer ag lawa...
heee~

t free...
kte post spesel entry for u...
:)

chenurulhusna said...

hihi..sape tu kak yg tiru akak?nk tgk gak blog die.pe tiru2 nieeeeeeeeeeeeeee

zaza said...

caya la kak intan...
siap taruk akta lg..
btw thanks 4 the tutorial...
tgh nk try buat nie..hhuhu

hrp2 jadi la....

Hazzy Ishak said...

nasib baik dah reti buat tuto ni
hehe

noor afzan said...

akak xkan copy cat urs..
hehe~

my concept different much wif u..
awak punya colourful...
akak punya x..
=)

kata simple me

hehe~

.::WaNiE::. said...

*tepuk tepuk tangannn.. suka baca tutorial tapi xberani nak godek sebab selama ni background2 ke ape2 setting sume my sis yang buatkan, jadi kalau nak tambah ke tukar apa2 terus cari dia huhuhu

sebabnya kalau tetiba preview cam tak center ker tak keluar seperti yang dikehendaki ke ha nangis hahaha

.cikfasya.(◕‿◕✿) said...

alamak..x jadik lak..

dak eina said...

sis...dlu penah r dak eina nk tiru cm bel0g sis...tp skang xnk r...takut kne dakwa pulak. hihi :)

ema.razali said...

HAHA thanx kak :) suka sgt3 tapi tak sure nak buat ke tak . mcm tak sesuai je kat blogg ema . heee ~
btw kak , ema sentiasa credit akk . hee ;)

thanx kak ! ^^

~amalina~ said...

sis!! dah try..jadik..
tenkiew...sonoknyerrr!!!
try la g tgok..xpe kan..xtiru pape kn..:P

enyheartsdiamond said...

tehehehe.. jgn copycat! saya tahu ditujukan kepada siapa :)

nanie ;) said...

sis,tuk main widget ni,lau nk wk border,gune kod yg sidebar 2 ek?

LuVidA^^ said...

nice tutorial. ade mase nti nk try. :)

nanie ;) said...

sis,xjdk :((

tunoor73 said...

intan..tq very much...dah jadi kotak2 tuu..tq.tq.tq

intanurulfateha (◡‿◡✿) said...

~arief

.kasi gegar sikit ;p

intanurulfateha (◡‿◡✿) said...

~lavender

.oke ^^

intanurulfateha (◡‿◡✿) said...

~adrina

.heee oke^^

intanurulfateha (◡‿◡✿) said...

~husna

.ade le minah tuu ;p

intanurulfateha (◡‿◡✿) said...

~zaza

.try ur best! :)

intanurulfateha (◡‿◡✿) said...

~haz

.elehh ;p

intanurulfateha (◡‿◡✿) said...

~wanie

.sis buat back up dulu! ;)

intanurulfateha (◡‿◡✿) said...

~afzan

.a'ah simple! :)

intanurulfateha (◡‿◡✿) said...

~fasya

.buat betul3
.step by step

intanurulfateha (◡‿◡✿) said...

~dak eina

.hahaha gedik ;p

intanurulfateha (◡‿◡✿) said...

~ema

.oke dear

intanurulfateha (◡‿◡✿) said...

~amalina

.heeee welkem ^^

intanurulfateha (◡‿◡✿) said...

~eny

.heheheh shhhhhh ;p

intanurulfateha (◡‿◡✿) said...

~nani

.kod same, edit sikit je :)

intanurulfateha (◡‿◡✿) said...

~ida

.try lah yunk :)

intanurulfateha (◡‿◡✿) said...

~nanie

.uit, how come?

intanurulfateha (◡‿◡✿) said...

~tunoor

.welkem ^^

nanie ;) said...

sis,dh jd dh sidebar gadget..tentiu ^^

Me Chicko Latino said...

*credit to intanurulfateha*
thanks sis....
da jadi da widget i..
thanks la sbb buat tutorial ni smua..
bgus la u...
buat lg tutorial bnyk2 tau..
so i bleh refer je...
kiki...
like your profile..
cute n sweet..

♥ummu 'ulya♥ said...

salam..

thanx sis ats tuto nih..
huhu..tapi knp kat side kiri n kanan xjadik ya..da ikut step nih..huhu..
tulon tulon.. (:

intanurulfateha (◡‿◡✿) said...

~nanie

.welkem ^^

intanurulfateha (◡‿◡✿) said...

~chicko

.hehe tq ;)

intanurulfateha (◡‿◡✿) said...

~ummu

.cube buat slow3
.kwn yg laen buat jd jerr
.buat slowly yer dear ;)

diyana said...

sys!!thanx you

tapi kan kite punya 3 column

die jadi sebelah jer..yg sebelah x de pon T__T

intanurulfateha (◡‿◡✿) said...

@diyana

.kne drag sidebar tu, baru jd 3 column ;)

♥adEq iFa♥ said...

akak,
ifa dah wat sidebar 2,but bile nk ltak background image je tak leyh...nape ekh??

amy alisya said...

intan.akak dh try jadik, tapi die bercantum lak antara satu dengan lain..mcmner nak buat tue?ape yang tersalah masuk yer.akak ikut step by step yang intan tunjuk tue.mimimalisa.blogspot

intanurulfateha (◡‿◡✿) said...

@♥adEq iFa♥

.ltk url image ;)

intanurulfateha (◡‿◡✿) said...

@amy alisya

.kn kite ade ajar cmne die x kan bercntum
.cuba kak check balik

yaya said...

waU!!ade akta lagi.gilek ah.cm tw je sape yg tiru sbjik sejiban page akak nie..marilah sme2 kite boikot dye.haha

intanurulfateha (◡‿◡✿) said...

@yaya

.hahhahhahaha
.diam la
.CIOM kang!
.hahhahhahaha

farhana hanafi said...

thnks intan sbb suke bgi tuto... ;p.

nti kite try ek.

intanurulfateha (◡‿◡✿) said...

@farhana hanafi

.welkem ^^

NadiaShafiqa said...

hye intan...

nak tnye..nape eh border sy tuh ada kat atas jek. tapi kat tepi tak de.. ada silap setting ke??

thanks..

intanurulfateha (◡‿◡✿) said...

@NadiaShafiqa

.aik pelik
.sptutnye ade =.="

NadiaShafiqa said...

hye sekali lagi intan..

okayh dah jadik..sy tukar dekat bahagian px huhu...

trimas wanita gorgeous!

=)

intanurulfateha (◡‿◡✿) said...

@NadiaShafiqa

.hahaha ape lah u neh
.gorgeous apenye ;p

♥ifa tasya♥ said...

akak...
nk ltak url image tu kan,
ltak kt ne....

background-image: url(kt cnie ke???)

or cam nie...

background-image: (kt cnie??)

Rafieq said...

x bleyh r kak..

kak camner nak buat garis2 sempadan tuu??

intanurulfateha (◡‿◡✿) said...

@♥ifa tasya♥

.yg first tuu

intanurulfateha (◡‿◡✿) said...

@Rafieq

.aik cmne plak u wt x bleyh nehh
.cube buat slow3

Rafieq said...

Step 4 tuu masalah dier...

Saya x bleyh nak delete

background:#FFFFFF;
border: 1px solid #000000;

sbb mmg xder kat situ,,

intanurulfateha (◡‿◡✿) said...

@Rafieq

.klu xde, ignore je code tu

Cik Lis said...

tq ya :)

haszuraidah ishak said...

intan..nak mitak ajar aka watla tutorial camana nak letak image utk link comment tuu..

blog akak, templatenya link komen kat atas.ingat nak letak link berupa image ala2 cam intan kat bawah entry..

♥[tahirah]♥ said...

Untuk blog version latest punye tutorial ade tak?

Dari dulu teringin nak buat, tapi sekarang dah tukar yang latest tak tau macam mana nak buat. :'( :'(

Nur Ain Syakina said...

kak Intan , napa ek x jmpe sidebar
widget uh . plik lahh

wan said...

npe xjumpa kode prtam tu ?
hmm

nurul nurshafiqah said...

x jdi pon....:(

AshAnas said...

intan, akak nye blog tak jumpa coding tu...

intanurulfateha said...

@AshAnas

kak, tuto ni kite buat da lame
zmn kite gune tmplate "minima"
bkn gune tmplate designer yg skng neh
yg skng ni mmg xde kot

pelangi_aien said...

akak . kod ye tade kat edit html la ? so cmne ? 1st" daa sangkut ? ala teringin mau buadd la .

amanina13 said...

thanx..
this tuto help me a lot

...Minah BluR... said...

alah x jadi la intan... huhu..
yg second code nk delete tuh i x jumpe lar... cmne ek?

MEOW-MEOW said...

xjupe code yg nk kena delete tuh la kak.. huhu~

aQ!LaH said...

s!s x de p0n c0de yg kene car!k 2

miCh sChazZa said...

sis,tak jadi ar

arezura said...

INTAN..NK TNAYE BLEY X AJA CM NE NK WT BACKGROUND WANE PTH TU..PLSSS AJAKN

sweet said...

Kak nk tnya akak pkai temp ape yg asal nye.......saye x ade lah kod .sidebar .widget, .main .widget {

intanurulfateha said...

gune old template - minima

sweet said...

@intanurulfateha Thanx akak.....

sweet said...

@intanurulfateha Thanx akak.....

susiey said...

x de laa . utk template laen tade ke ?

-Dira Bistro- said...

wa...nice tutorial la....credit 4 u :) n intan kta nak tnya y kta punya blog x leh nk comment???? plz bg advice???

-Dira Bistro- said...

nice tutorial...credit 4 u la :). intan kta nk tnya y kta punya blog x leh nk comment leh bg advice x???

Hazrieyka said...

tq kak intan...yes2 dh berjaya wat..tq2 (^________^)

princess ayu said...

blog ni 3 coloumn or 2 coloumn? sy punya 3..and kenapa kotak dia jauh2?? boleh bantu??

Mashitah said...

x jumpa kod tu lah kak ..

d i s c o d i v a said...

sis , tada laa code tuh ;(

Eyca AJholic said...

Akak omey ♥
Nape tak jumpa ehh code tuu :(

echa cool stiap ary..... said...

hye kak cmne nk buat scroll yg kt tepi tu yg naik turun 2 hehe maaf xtau .. plz tlong ajr kn

nur.syahiba.haseena said...

akak , saya cari kod yg kena delete tu xde pun .
sy guna watermark template . tak boleh ey ??

Mymai Slow said...

sis , sa punya tida melengkung laa , mcm mna tu ?

 

About Me

My Photo
intanurulfateha
Muar, Johor, Malaysia
Eh, dah ada dua orang baby girl! ;) | Berdaftar dengan SSM, Double I Excellent Enterprise : JR0046896-W | For any inquiries, whatsapp 012-7186471
View my complete profile

#our journey

Friends since 2008
Getting Close since Nov 2010

Daisypath Anniversary tickers

Love is not a matter of counting the years, it is about making the years!

Daisypath Anniversary tickers

Alhamdulillah.. :')

Daisypath Anniversary tickers

Jantung, Hati, Limpa, Paru

Wanita di jadikan atas nama cinta.
Kalau cari, mesti jumpa.

Dan kamu,
Mohammad Noor Irfan;
Terima kasih kerana mencari saya semula!

Hep ! ! !
Curik hati kite ekk!

Tapi tak per..
Kite suke~

(^__^)

#irfanintanJR

#irfanintanJR
Aleesya Eryna

Kesayangan 31-3-13

Kesayangan 31-3-13