PORTFOLIO MAKEOVER BLOG TUTORIALS FREEBIES AUTHOR BLOG HOME PAGE

Tutorial Customize Followers Box .

Salam blogger .

Yeahh, blog saya penuh dengan reqeust tutorial saja ! Adek Nureen ada tanya macam mana nak buat follower box macam saya ni . Oke, harini saya ajarkan . Credit To Empayar Bintang :]

1. Pergi goggle, search dekat goggle perkataan ini ;
Goggle Friend Connect





3. Dah click itu ? Bagus ikut step seterusnya.


4. Lepastu, awak edit kotak followers awak macam dalam gambar bawah ni ;


5. Dah edit semua tu? Awak scroll down . Awak ada nampak GENERATE CODE kan ? Awak tekan tu, nanti dia kasi code . Lepastu, awak copy code tu .


6. Dah copy code tu, awak paste dekat gadget awak tu oke . Okey, itu saje step die . Goodluck :]

Share or Like, thank you.

Tutorial Buat Status Box .


Salam blogger .

Ada stalker ni tanya macam mana nak buat status box macam saya punya . Oke, sebenarnya benda tu saya baru belajar jugak dari Sys Cynthia . Dia yang ajarkan buat benda tu . Credit to Sys Cynthia


1. Dashboard > Design > Add A Gadget > Html Javascript

2. Lepastu, copy code bawah ni then paste dekat gadget awak tu ;
<center style="text-align: right;"><b>Status</b></center><div style="background-image: url(URL BACKGROUND); padding: 5px; border: 2px solid #000000;"><center><marquee>Status Awak Status Awak</marquee></center></div>

3. Dah paste ? Bagus. Semua yang warna merah tu awak tukar ikut suka awak oke .

4. Sabar dulu belum sudah! Awak jangan tulis tajuk gadget tau, biarkan kosong macam gambar bawah ni ;



5. Lepas tu, tekan SAVE. Dah siap? Goodluck :]

Share or Like, thank you.

Tutorial Letak Background Pada Main Background.


Salam blogger.

Ada tutorial request dari Adek Tiqah. Dia mintak saya buatkan tutorial macam mana nak letak background dekat main background macam saya ni. Tahu tak ? Kalau tak tahu, bole tengok gambar bawah ni .

[Tekan Untuk Tumbesaran]

1. Dashboard > Design > Edit HTML > Tick Expand Widget Template

2. Tekan ctrl+f(untuk search code lebih cepat) then search code ni ;
.content-inner {

3. Dah jumpa? Bagus, tambah code ni pulak dekat bahagian code .content-inner { tadi ;
background:url("URL BACKGROUND");

4. Contoh kedudukan code tu nanti ;
.content-inner {
"Code"
background:url("URL BACKGROUND")
}

5. Yang URL BACKGROUND tu awak tukar dengan url background yang awak dah cari.

6. Lepastu, preview tengok jadi ke tak? Kalau jadi, save terus. Goodluck :]

Share or Like, thank you.

Tutorial Buang Subscribe Atom .


Salam blogger .

Ada orang request tutorial macam mana nak buang subscribe atom . Semua dah tahu kan ? Oke,jum kita mula belajar macam mana nak buang nya . Credit To AKK FIEQA .

1. Dashboard > Design > Edit HTML > Tick Expand Widget Template

2. Tekan ctrl+f(untuk search code lebih cepat) then search code ni ;
<!-- Blog feed links -->

3. Dah jumpa ? Bagus . Nanti jumpa code keseluruhan dia macam ni kan ?
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

4. Oke, delete code yang aten merah kan tu . Delete code tu je . Lepas tu, save . K goodluck :]

Share or Like, thank you.

Tutorial Buat Scroll Box Pada Blog Archive .


Salam blogger .

Ada orang request tutor macam mana nak buat scroll box pada blog archive . Oke, kalau tak tahu ? Tengok kat atas tu ada gambar dia . Okey, jum kita mulakan :D

1. Dashboard > Design > Edit HTML > Tick Expand Widget Template

2. Then, tekan ctrl+f(untuk search code lebih cepat) then search code ni ;
<div id='ArchiveList'>

3. Dah jumpa ? Tapi, nanti awak akan jumpa code ni dulu kan ;
<div class='widget-content'>

4. Okey, sekarang focus pada code ni <div class='widget-content'> . Gantikan code <div class='widget-content'> ni code bawah ni ;
<div class='widget-content' style='overflow:auto; height:200px'>

5. Yang warna merah tu ialah height dia . Awak tukar lah ikut suka awak . Lepas tu, preview jadi ke tak ? Kalau jadi terus save :P K goodluck :]

Share or Like, thank you.

Tutorial Background Dalam Kotak .


Salam blogger .

Ada orang tanya macam mana nak buat kotak yang ada background macam saya punya ni . Oke, jum kita buat benda ni . Kalau tak faham, cuba lah sampai faham oke .

1. Dashboard > Design > Add a gadget > HTML Javascript

2. Lepas tu, copy code bawah ni then paste dekat gadget .

Kotak Ada Background

<div style="background-image: url(URL BACKGROUND); padding: 5px; border: 2px solid #000000;"><center>LETAK APA KORANG NAK</center></div>

Kotak Tanpa Background
<div style="border: 2px solid #FAAFBE"><center>LETAK APA KORANG NAK</center></div>

3. Yang saya warnakan merah tu . Awak tukar lah ikut suka awak Oke . Kalau ada yang tak faham boleh tanya saya . Goodluck :]

Share or Like, thank you.

Tutorial Shadow Belakang Blog .


Salam blogger .

Today, ada tutorial request dari eraa viera . Dia request tutorial belakang blog . Oke, jum kita belajar :] Sebelum terlupa, tutorial ni Credit to Akak Myra .


1. Dashboard > Design > Edit HTML > Tick Expand Widget Template

2. Tekan ctrl+f(untuk search code lebih cepat) then search code bawah ni ;
.content-outer {

3. Dah jumpa? Bagus . Awak padam code ni ;
-moz-border-radius: 18px;
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

Gantikan code atas tu dengan code bawah ni ;
-moz-box-shadow: 0px 0px 30px #000000;
-webkit-box-shadow: 0px 0px 30px #000000;

4. Yang saya warnakan biru tu, ialah besar shadow tu . Yang warna merah tu pulak, warna shadow tu .

5. Kedudukan code macam ni nanti ;

.content-outer {
-moz-box-shadow: 0px 0px 30px #000000;
-webkit-box-shadow: 0px 0px 30px #000000;

margin-bottom: 1px;
}

6. Okey, lepas tu preview jadi ker tak ? Kalau jadi, tekan button save . Goodluck :]

Share or Like, thank you.

Tutorial Buat Header Guna Photoscape .


Salam blogger .

Semalam, ada seorang kawan blog saya tanya macam mana nak buat header . Oke, untuk orang yang baru belajar nak buat header . Saya sarankan, awak guna photoscape lah ye . Sebab, photoscape senang sikit . Tapi, photoscape tak boleh buat header transparent macam aten . Oke, jum kita belajar macam mana nak buat header guna photoscape .

1. Siapa tak ada photoscape, boleh download SINI . Dah download ? Bagus, boleh mula belajar tutorial ni .

2. Bukak photoscape awak dan pilih EDITOR, macam dalam gambar bawah ni ;

3. Dah pilih editor ? Bagus . Lepas tu pilih antara 2 icon yang saya tunjuk dalam gambar tu . Lepas tu, click then pilih NEW PHOTO . Lihat gambar bawah ni :

4. Dah click NEW PHOTO, awak ubah pulak width and height dia . Width dia tu, ikut width blog awak ye, supaya nanti header awak tak melebihi blog awak tu . Lihat gambar bawah ni :

5. Lepas dah tentukan width and height header awak, awak pilih OBJECT . Macam dalam gambar bawah ni . Kalau awak ada gambar nak letak kat header awak tu, awak click yang ada GAMBAR yang saya tandakan arrow tu . Kalau nak letak text dekat header , pilih icon T . Macam dalam gambar bawah ni :

6. Lepastu, pandailah awak edit k header awak ? Bila dah siap header awak, awak SAVE . Ikut cara dalam gambar bawah ni :


7. Lepas tu, tekan SAVE AS . Macam dalam gambar bawah ni .


8. Lepastu, tulis nama header tu . Then, save sebagai GIF atau PNG macam dalam gambar bawah ni . Lepas tu tekan SAVE, then da siap . 

Senang kan ? Oke, goodluck yaa :]
# kalau ada yang awak tak faham, boleh tanya ? Dan, saya akan cuba buat awak faham .



Share or Like, thank you.

Tutorial Cara Tukar Warna Main Background .


Salam blogger . Today, ade tutorial request . Dia tanya macam mana nak tukar warna background . Oke, memang ada separuh orang tak tahu sangat macam mana nak tukar itu tukar ini right? Harini, saya ajarkan .


# Macam Biasa, dashboard > design > template designer .


1. Click dekat ADVANCED tu . Bila dah click, nanti dia keluar macam list dalam gambar tu .

2. Lepas dah keluar list banyak-2 tu, awak pilih BACKGROUND macam dalam gambar tu .

3. Dah pilih BACKGROUND, nanti dia keluar pulak OUTER BACKGROUND, MAIN BACKGROUND and HEADER BACKGROUND . Oke, awak pilih MAIN BACKGROUND macam saya tunjuk dalam gambar tu .

- Tekan anak panah kecil macam kat dalam gambar yang saya tunjuk . Nanti dia akan keluar warna banyak-2, awak pilih warna main background yang awak nak .

4. Lepastu, kalau dah puas hati dengan warna main background awak tu, awak tekan lah APPLY TO BLOG . Thats all, goodluck :]

Share or Like, thank you.

Tutorial Melengkung Blog .


Salam blogger .

Today, saya buatkan tutorial untuk awak semua. Tutorial kali ni ialah melengkungkan blog. Macam blog saya tu. Kalau nak blog cantik, jum lah ikut tutorial saya ni :P Credit to Akak Hana.

1. Dashboard > Design > Edit Html > Tick Expand Widget Template .

2. Tekan ctrl+f (untuk search code lebih cepat) then search code ni :
.content-outer {

3. Dah jumpa? Bagus. Sekarang, copy code bawah ni then paste dekat bahagian code .content-outer { tadi :
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;

4. Kedudukan code dia macam ni nanti : (contoh)
.content-outer {
"code"
"code"
"code"
"code"

  margin-bottom: 1px;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
}

5. Yang saya warnakan merah tu, awak boleh tukar ikut suka awak. Awak nak blog awak tu melengkung macam mana oke?

6. Belum siap, preview dulu jadi ke tak awak buat. Kalau jadi tekan button save, goodluck :]

Share or Like, thank you.

Tiga Penjuru Kini Sudah Tamat :P


Salam Blogger .

Today, sekolah saya ada buat tiga penjuru . Tak kan tak tahu kot ? Yang makbapak jumpa cikgu tu ambil repotkad :P Okey, makbapak kena datang selepas pukul 4 . Nak tunggu tak de lah lama . Kitaorang lagi suka makbapak datang lambat . Tapi, tengok-2 sume makbapak datang awal . Cehhhh, tak de chance langsung nak bergambar lama-2 .

Mase rehat, saya and geng tak turun tau . Kitaorang makan dalam kelas . Contohilah budak pandai macam kami ni . Cehhh, bajet budak pandai je :P Kitaorang ambik gambar , macam sakai saje kiteorang ni tau .Nak tengok gambar kiteorang ? Nanti, tengok di facebook yaa :P

Huhu, lepas tu ayah alin datang . Kiteorang stop lah bergambar . Duduk diam-2 berlakon lah konon kan ? Hehe, tunjuk baik depan makbapak . Lepas gedebak gedebuk bak kata ustaz saya, ayah saya pun sampai . Yaa, saya pergi lah dekat ayah saya dan cikgu . Tengok repokad .

Huh, naseb baik result memuaskan tau . Sebab ada perubahan . Cewahhhh, dah pandai lah tu kan ? Hehe :P Bangga gila tau bila saya punya result ada perubahan . Tak sia-sia baca buku :P Hope exam lagi sekali, dapat buat lagi terbaik .


Cuba tengok ini paper ? Ini slip ujian saya yang bulan pertama tau . Cek-2 . Kedudukan dalam kelas berubah tau . Ada yang berubah menaik , ada yang berubah menurun . Hee, cer tengok yang ni pulakk :P


Yang ini baru dapat tadi, kan ade perubahan kan ? Hehe, tak sia-sia usaha saya :P Eh, jangan marah yaa . Saya cuma nak bangga diri sekejap je . Hee, dah abes dahh . Kbai :))

Share or Like, thank you.

Tutorial Marquee / Ayat Bergerak .


Salam blogger .

Tutorial baru kali ni . Tutorial ni direqeust oleh Riza . Dia tanya macam mana nak buat marquee . Okey Jum Kita belajar :P


1 . Untuk Marquee Code Asas . (dari kiri ke kanan)
<marquee>Ayat Awak</marquee>

Preview :
Ayat Awak

2 . Untuk ubah pergerakan perkataan . (left, right, up, down) . Contoh code dia ialah ;
<marquee direction="right" >Ayat Awak</marquee>

Preview :
Ayat Awak

3 . Ubah Kelajuan Marquee . Contoh code dia ialah :
<marquee scrollamount="2">Ayat Awak</marquee>

Preview :
Scroll Amount 2
Ayat Awak

Scroll Amount 4
Ayat Awak
Ada banyak lagi . Tapi, malas nak buat lah . Hehe :P Oke, Goodluck :]

Share or Like, thank you.

Tutorial Sembunyikan Navigation Bar .


Salam blogger .

Saya harap awak tak boring oke . Sebenarnya saya sedang kemaskini kan tutorial . Okey, tutorial kali ini ialah sembunyikan navigation bar . Navigation bar tu, yang dok bertenggek dekat ats blog tu . Sekarang, jum kita belajar hidekan dia . Tu pun kalau berminat lah ye .

1 . Dashboard > Design > Edit HTML > Tick Expand Widget Template .

2 . Tekan ctrl+f (untuk search code lebih cepat) then search code ni ;
]]></b:skin>

3 . Dah jumpa ? Bagus . Copy code bawah ni then paste dekat atas code ]]></b:skin> tadi ;
#navbar-iframe {
display: none;
}

4 . Tunggu dulu, belum siap lagi . Tekan preview tengok jadi tak, kalau jadi tekan button save oke . Goodluck :]

Share or Like, thank you.

Tutorial Tukar Warna Highlight .


Salam blogger .

Tutorial lagi, hope awak tak boring . Tutorial kali ini tutorial tukar warna highligt . Tahu tak ? Hmm, kalau tak tau susah lah . Sebab nak explain pun susah ohh . Oke, macam ni lah . Apa kata awak try highlight text bawah ni , nampak tak perubahan warna die ?
Saya Sayang Suffian Shah Anak Encik Fadzil :P

1 . Dashboard > Design > Edit HTML > Tick Expand Widget Template .

2 . Tekan ctrl+f (untuk search code lebih cepat) then search code ;
]]></b:skin>

3 . Dah jumpa ? Bagus . Copy code ni pulak then paste dekat atas code ]]></b:skin> tadi .
::-moz-selection{
background:#000000;
color:#ffffff;

4 . Okey, yang warne merah tu untuk background dia . Dan yang warna biru tu untuk warna text . Oke, goodluck :]

Share or Like, thank you.

Tutorial Letak Border & Background di Post Title .


Salam blogger .

Tutorial lagi . Tutorial kali ni ialah tutorial letak border & background di post title . Awak nak cantikkan tak awak punya post title ? Kalau nak cantikkan, jum ikut tutorial ini .

1 . Dashboard > Design > Edit HTML > Tick Expand Widget Template .

2 . Tekan ctrl+f (untuk seacrh code lebih cepat) then search code ni ;
h3.post-title, .comments h4 {

3 . Dah jumpa ? Bagus . Copy code ini then paste dekat bahagian code h3.post-title, .comments h4 { ni tadi ;
border:2px solid #000000;
background:url("URL GAMBAR");

4 . Nanti kedudukan dia jadi macam ni ; (contoh)
h3.post-title, .comments h4 {
"code"
"code"
"code"
"code"
border:2px solid #000000;
background:url("URL GAMBAR");
}

5 . Okey, Tulisan yang saya warnakan purple ialah tebal border . Warna pink, jenis border . Warna biru pulak, warna garisan border . And yang warna hijau tu, URL GAMBAR atau URL BACKGROUND untuk border . Okey, goodluck :]

Share or Like, thank you.