Saturday 30 November 2013

Tutorial : Letak Lagu Dalam Blog

1. Korang pergi kat link ini dulu KLIK SINI

2. Then, korang pilih lagu yang korang nak kat sebelah kanan. Ada tak macam pic kat bawah ni


3. Lepas klik mana satu pilihan korang, sebelah kanan akan keluar abjad nama artis. Then, pilihlah mana2 yang korang suka. Tapi ingat,  ada lagu yang tak akan keluar code or lagu dia. So , pilihlah lagu lain 

4. Lepas pilih, akan keluar SATU code kat tengah2 halaman

5. Copy Code tu dulu

CARA-CARA PASANG MASUK DALAM BLOG
1. Log in > Layout> Add Gadget > Html/JavaScript

2. Paste code kat HTML/Javascript

3. Dah siap. SAVE !

4. Try tengok. Ada tak lagu tu kat blog korang ? Kalau takde, tukar lagu lain cepat

Tutorial : Cute Icon Kat Dalam Post

Okay ni sesiapa guna MOZILLA FIREFOX je :)


1. Korang pegi kat link ini KLIK SINI


2. Lepas dah klik Add Firefox > Install > Restart Firefox

3. So , greasemonkey korang dah active :)

4. Korang INSTALL pulak Cute Emotion. Klik link kat bawah ni 


5. Dah Habis install kan ? Pergi blog korang

6. Cara - caranya ialah :

1. Pergi kat Setting
2. Scroll ke bawah dan cari Global Setting
3. Tick Old Editor
4. Save Settings
5. Korang pegy kat New Post. Try tengok


Tutorial : Signature di Bawah Setiap Post

CARA PERTAMA


1. Korang klik link ini dulu >  KLIK SINI

2. Ada 4 cara tuh . Korang pilih yang "Using The Signature Creation Wizard"

3. Masukkan nama korang di textfield yang disediakan. Lepas tue, klik button "Next step"

4. Pilih font yang korang suka. Lepas tue, klik button "Next step"

5. Pilih size signature yang korang nak . Then , klik "Next Step"

6. Pilih background color untuk signature korang. Kalau tak nak ada color klik kat checkbox tulis 'transparents'. Pilih pula text color tuk signature tu. Lepas tu, klik button "Next step".

7. Pilih slope yang korang suka k. ? Nak senget banyak ke sikit ke terpulang la kat korang. Lepas tu, klik button "Next step"

8. Lepas tue dia akan keluar "Finished! The signature is ready" means da siap la signature anda. Then anda klik pada link "Want to use this signature?"

9. Korang akan ke page "Generating signature code". Klik pada "Generate HTML code"

10. Korang akan diberi 2 pilihan samada nak generate code tuk signature sahaja atau signature dan sedikit info spt slogan @ website anda. Klik mana yang anda suka

11. Copy HTML code yang di dlam textbox

CARA-CARA NAK PASANGKAN SIGNATURE MASUKKAN DALAM BLOG
1.  Log in > Setting > Formatting 

2. Scroll ke bawah sampai korang jumpa "post template"

3. Paste HTML Code yang korang copy tadi .

4. Klik "Save Settings"

5. Untuk melihat samada korang ni  berjaya atau tidak ,  klik pada "Posting" tab dan klik pada "new post". Signature korang akan automatik ada apabila anda membuat entry baru pada blog

CARA KEDUA

1. Log in >Template > Edit Html

2. Tekan Ctrl + F dengan serentak and cari code ni

<data:post.body/>

3. Paste URL Signature korang di bawah code yang korang tadi. Contohnya :

<img src="Url Signature Korang" />

And save!























Tutorial : Tulisan Membesar

Log in > Template > Edit Html

Then, korang cari code di bawah : (Tekan Ctrl + F serentak utk memudahkan pencarian )'


a:hover


Then, korang paste pulak code kat bawah ni, kat bawah code yang korang cari tadi 

font-size: 22px;font-weight: bold;text-decoration: none;}

*Yang warna merah tu, korang boleh tukar dengan saiz kebesaran tulisan yang korang nak


















Tutorial : Cute Icon Di Shoutbox

Kalau nak tengok icon cute cuba tengok pic kat bawah ni haaa

Dah tau kan ? Follow step ni
1. Log in Shoutbox korang dulu. Sesiapa yang belus daftar KLIK SINI and terus ke settings

2. Then, korang klik Smileys yang macam bawah ni


3. Lepas korang klik "Smileys" tu korang scroll bawah  Korang ada jumpa tak macam yang ini :


4. Ada kan ? Okay skrng paste URL korang kat Smiley Image URL. Kalau taktau nak amik icon kat mana KLIK SINI and sesiapa taktau nak copy URL pergi SINI

5. Isikan jugak code yang korang suka. Sebagai contoh :  



6. Lepas dah masuk kan satu  image URL and satu code korang. jangan lupa pula TEKAN ADD. Kalau tak, icon korang tak jadi

7. Korang boleh masukkan seberapa banyak yang korang nak, tapi jgn banyak sgt nanti sape masuk blog korang akan pening

8. Dah siap. TEKAN SAVE SETTINGS.


Friday 29 November 2013

Tutorial : Shadow Effect Dekat Post Entry

C;lick kalau tak nampak

1. Log in > Template > Edit Html

2. Cari code ini : ( tekan ctrl + F dgn serentak untuk memudahkan pencarian )

.post {

 Ada jumpa tak ? kalau ada, bagus la. Kalau tak jumpa, aku tak au nak tolong macam mana lagi dah.

3. Copy code di bawah ni, dan paste kat BAWAH code .post {

text-shadow: 2px 2px 3px #000000;

*Kalau nak tukar colour amik kat sini

4. Cuba korang preview dulu. Kalau jadi, Save




Tutorial : Letak Button Follow

Tutorial ini , pada sesiapa yang dah buat button dashboard ok ?

1. Copy code kat bawah ni, and paste kan sebelum code dashboard korang tu

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID KORANG" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" border="0" /></a>

2. So , kod korang tuh , akan jadi macam ini :

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID KORANG" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div>

*Warna Merah : Code untuk Button Follow
*Warna Purple : Code untuk Button Dashboard
*Blog ID boleh dapat kan DISINI







Tutorial : Kotak Code Untuk Banner


1. Log in > Dashboard > Layout > Add Gadget > Html/JavaScript

2. Copy code kat bawah ni, and paste kat HTML/Javascript tadi

<center>
<img style="width: 167px; height: 157px;" src="URL BANNER KORANG" />
<center>*Copy And Paste it into your blog ok?:)</center>

<textarea cols="13" rows="3" style="text-align: center;"><a href="LINK URL BLOG KORANG/"><img src="URL BANNER KORANG" /></a></textarea></center>

1. Warna Oren : Korang boleh ubah size yang korang suka
2. Warna Merah : Url Banner Korang
3. Warna Coklat : Sukati korang nak letak ayat apa pun
4. Warna Biru : Link Blog Korang




Tutorial : Letak Button Dashboard



1. Log in > Dashboard > Layout > Add Gadget > HTMLJavaScript

2. Paste code di bawah ini , kat HTML/Javascript

<div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div>

Save :)








Tutorial : Double Underline

1. Log in > Dashboard > Template > Edit Html

2. Tekan Ctrl +F and cari code ni (kalau tak jumpa tu, pakai manual je)

/* Header 

3. Copy code kat bawah ni pulak :

u {
text-decoration:underline;
border-bottom: 2px dotted #FF0080;
padding: 0px; 
}

4. Paste code yang telah di copy ATAS code /* Header 

5. Edit tulisan bewarna purple mengikut citarasa masing²
*Contoh : dotted boleh ditukar dengan > solid
*#FF0080 boleh ditukarkan dengan kod color yang korang suka kat sini













Tutorial : Menu Tab (Navigation Bar)

1. Log in > Dashboard > Layout > Add Gadget > HTML/JavaScript

2. Copy code kat bawah ni , and pastekan kat Html/JavaScript

<center><a href="LINK BLOG URL KORANG" target="_blank"><img style="width: 142px;
height: 51px;" src="LETAK IMAGE URL DI SINI" border="0" /></a>
<a href="LINK PAGES  PERTAMA" target="_blank"><img style="width: 143px; height: 51px;"
src="LETAK URL IMAGE DI SINI" border="0" /></a>
<a href="LINK PAGES KEDUA" target="_blank"><img style="width: 142px; height: 51px;"
src="LETAK URL IMAGE DI SINI " border="0" /></a
<a href="LINK PAGES KETIGA" target="_blank"><img style="width: 142px; height: 51px;"
src="LETAK URL IMAGE DISINI" border="0" /></a>
</center>

* Warna Biru = Letak Link Yang Nak Dibuka Disini (Create Page terlebih dahulu)
*Warna Merah = URL Image yang sesuai dengan link korang
*Warna Oren = Kelebaran dan ketinggian mengikut kesesuaian blog korang :)
*Kan yang warna MERAH tu kan, aku kata URL IMAGE ? Image tu  copy boleh la create sendiri, guna photoshop ke, GIMP ke. Then, korang upload image korang itu dekat sini

3 . Dah siap, SAVE 




















Tutorial : Buang Image Border

1. Dashboard > Template > Edit Html 

2. Tekan Ctrl + F dan korang cari code kat bawah ini :

.post-body img, .post-body .tr-caption-container,

3. After korang jumpa code tu, korang akan nampak code yang ada kat bawah ni juga :

.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

4. No yang dimerahkan tu, korang tukarkan dengan no 0

5. Lepas dah siap , SAVE






























Tutorial : Centerkan Header

CARA PERTAMA


1. Dashboard > Layout > Edit Html

2. Tekan Crtl + F , dan cari code bawah ni :

#outer-wrapper {

3. Pastu, bawah code yang korang carikan tadi tu, ada code ni kan ?

background:#FFFFFF;width: 1000px;

*Itu sebagai contoh je

4. Maknanya, outer wrapper tu 1000px. Korang punya tengok sendiri

5. Tapi, tak siap lagi ni. Then, korang cari pulak code ni

#header-wrapper {

6. Dah jumpa kan ? Pastikan width dekat header dengan outer wrapper tu sama. So korang punya header akan jadi center la

7 . Preview dulu. Dah jadi  baru SAVE

CARA KEDUA

1. Dashboard > Template > Edit Html

2. Tekan Ctrl + F  cari :

/* Content

3.  Lepas tu, copy code kat bawah ni  then paste ATAS kod yang korang carikan tadi

.Header img {margin-$startSide: auto;margin-$endSide: auto;}

4. Faham ke tak ? If korang tak faham, tengok contoh ni :

.Header img {margin-$startSide: auto;margin-$endSide: auto;
}
/* Content----------------------------------------------- */

5 . Preview dulu. Kalau jadi, SAVE
























Tutorial : Wishlist

1. Dashboard > Layout > Add Gadget > HTML/JavaScript

2. Copy code kat bawah ni, and paste kat HTML/Javascript

<form name=myform>
<input type="checkbox" name="mybox" value="satuchecked />satu <br />
<input type="checkbox" name="mybox" value="duachecked />dua <br />
<input type="checkbox" name="mybox" value="tigachecked />tiga <br />
<input type="checkbox" name="mybox" value="empatdisabled />empat <br />
</form>

*Tulisan warna MERAH tu, korang ubah dengan benda/barang yang korang nak
*Tulisan warna BIRU pula boleh di ubah dgn perkataan "checked" atau "disabled" je

3. Dah siap. SAVE :)



Tutorial : Divider Bawah Post

Kalau, sesiap yang nak cantik post post dia , boleh lah letak divider di bawah setiap post korang :)


1. Dashboard > Template > Edit HTML 

2. Tekan CTRL+F and search :

<div class='post-footer-line post-footer-line-3'/>

3. Copy code bawah ni :

<center><img height='20' src='urldivider'/></center>

4. Paste dekat bawah kod yang korang cari tadi ok ?

BIRU = Ubah ketinggian divider
MERAH = URL divider boleh amik kat sini

5. Siap. SAVE





Tutorial : Back To Top Button

1. Dashboard > Layout > Add Gadget > Html/JavaScript

2. Copy and paste code ni kat HTML/Javascript

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Top"><img src="http://i214.photobucket.com/albums/cc18/KoRn_sTaR60291/Profile%20Stuff/redicon.png" /></a>

Yang warna MERAH tu , korang tukar kan ler dgn URL korang sendiri. Boleh cari kat sini