Tab Sendirian Berhad

Tab tu yg macam dlm gambar kat atas tu..nampak tak, kalau x nampak klik kat gambar tu ok....

cara-caranya :

1. Mula-mula, kena buat dulu tab tu sama ada buat dekat photoshop atau mana-mana pun. Tapi yg tak ada photoshop, pakai Paint pon boleh. 

2. Dah siap...save kan gambar-gambar tu ke dalam my picture.

3. Lepas tu, gambar-gambar tadi, di uploadkan ke dalam photobucket. So, nak buat ni mesti ada photobucket la.. Sbab apa..sebab kita nak ambik url gambar tu.

4. lepas dah siap, Dashboard > Design > Add A gadget

5. kat situ korang isikan url gambar- gambar tu..contohnya macam yg dikotakkan tu ja...bila nak letak url gambar yg seterusnya, press enter baru letakkan url gambar yg seterusnya..ok

klik utk besar

6. Sekarang, kalau perasan, dekat atas tu ada Rich Text kan...haa, u all klik yang itu ..dan dia akan keluar macam ini

7. U all, highlightkan satu persatu gambar tu... and create link...macam mana...juz klik seperti yg dalam kotak  hitam yg ada dalam gambar atas tu...

8. Kalau yg tab tu untuk home, so buka home untuk blog u all dan copy link untuk home macam yang dikotakkan dgn kaler merah tu..tau kan..copy ja link tu and isikan dalam tempat yang dia suruh enter url..ok..begitu juga seterusnya.

klik utk besar

9. Lepas tu..siap...kalau nak bagi tab u all tu center juz tambah kod ni di permulaan dan last punya tab ok ..contoh..boleh tgok kat gambar yg second...ada ayat center kat awal sekali kan...

<center/>

10. Kalau nak tambah gambar macam rama-rama tu...juz letakkan url dia di tempat yg u all nak..contohnya gambar tu nak diletakkan di antara home dgn owner so, letakkan sama ada selepas home atau sebelum owner..kalau letakkan kat dua-dua tu ponn boleh tp dia akan kelaur dua gambar la...ada faham

SIAP...SEMOGA BERJAYA 

Background Post Title

Tadi ada request daripada seorang blogger ni untuk buat benda ni. Sebenarnya, nak buat benda ni sangat la confuse sebab saya pon buat sampai naik tension. Cuba teka berapa kali buat. 10 n above. Bila dah jadi lega sangat. Ok, tak pa, apa salahnya try. Cara-caranya :

1. Dashboard > Design > Edit HTML
2. Cari kod bawah ni ( tekan ctrl + F )

h3.post-title

3. Kalau tak jumpa cari kod ni

h4 }

4. Lepas tu, copy kod bawah ni pulak ( kod ni hanya untuk yang cari kod h3.post-title )

 border: 3px solid #C0C0C0; background: url(URL BACKGROUND); 

5. Paste di bawah kod  h3.post-title . 


6. Bagi yang cari kod  h4 }, copy kod bawah ni..sama juga pastekan di bawah kod h4 } tu ok.

   border:0px dashed #cc99cc; 
    text-align: center;
    margin:.5em 0 .5em;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.2em;
    background:url(URL BACKGROUND);
    color:$titlecolor;
    }

7.  Sebelum save, preview dulu...nanti kalau koding salah habis blog u all.
8. Eeeh. Sebentar. Aishah rajin la plak nak tunjuk contoh dari blog aishah ni supaya mudah untuk u all nka tengok kan..... skrg tengok bawah ni

nampakkan..jadilah. ok skrg cuba tengok yang dalam highlight kelabu tu saja. boleh bayangkan tak. 

1. Sebelum u all pastekan kod yang panjang tu  kat bawah kod h3.post-title , dia cuma macam ni ja

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

2. Lepas kita copy kod

 border: 3px solid #C0C0C0; background: url(URL BACKGROUND); 

tu kat bawah h3... tu , dia akan jadi macam ni pulak....

 h3.post-title, h4 {
  border: 3px dashed #66FFCC;
  background: url(http://i177.photobucket.com/albums/w223/peetzie/Background/back154.jpg);
  font: $(post.title.font);
  color: $(post.title.text.color);

3. sekarang tu dah selesai...kalau u all nak tukar warna border dia boleh tukar.  u all nampak tak kod ni kat dalam highlight kelabu tadi tu

border: 3px dashed #66FFCC;

ok, yg lepas dashed tu kan ada kod kan. kod tu adalah kod warna. kalau nak tukar kena letak kod warna yg betul la..kalau nak letak kod warna boleh tgk kat sini.

SEMOGA BERJAYA

# yang warna merah tu letak la url bacground yang sesuai ok..sebaik-baiknya jgnlah warna yang terlalu terang ok. background tu boleh dapat di photobucket... pilihlah nak yang jenis macam mana ok. 


Kalau jadi bagi tau, kalau tak faham, comment la..and yang tak jadi pon try lagi

Icon Di Sebelah Post Title

Icon apakah yang dimaksudkan....ok skrg cuba tgok dekat mana-mana post title blog ni....ada gambar matahari kan..ha itulah yg dimaksudkan.ok..car-caranya :

1.Dashboard > Design > Edit HTML > Tick Expand WIdget Template
2. Then tekan ctrl + F untuk cari kod ni

<a expr:href='data:post.url'><data:post.title/></a>

3. Lepas tu, copy kod yang bawah ni pulak

 <img src="LinkGambar"/> 

4. Paste di antara kod yang kita crai tadi. Maknanya dia akan jadi macam ini :

 <a expr:href='data:post.url'><img src="URL GAMBAR"/><data:post.title/></a>

5. Faham, tak..ok then, preview dulu baru save. Yang warna merah tu url gambar la ok. Gambar tu boleh dapatkan di sini 

* bawah ni ada contoh berserta url nya sekali..kalau nak just take it, ok

http://dl4.glitter-graphics.net/pub/438/438894serbnpz7w6.gif

http://dl4.glitter-graphics.net/pub/2831/2831034npzbqo30rd.gif

http://dl7.glitter-graphics.net/pub/478/478407lt9n39vae2.gif

http://dl7.glitter-graphics.net/pub/315/315867d100yirwak.gif

http://dl8.glitter-graphics.net/pub/471/471688z7umisdxx7.gif

Floating Button

Cuba tengok kat belah kiri blog ni. Ada macam-macam button kan. Antaranya, fb, myspace, gmail n many more. Haa, itulah floating button.

1. Dashboard > Design > Add Gadget > HTML/JavaScript
2. Copy kod bawah ni

<style type='text/css'>a.linkopacity img {filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;-khtml-opacity: 0.5;}

a.linkopacity:hover img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;-khtml-opacity: 1.0; }</style>

<div style='display:scroll; position:fixed; top:500px; left:-12px;'>

<a class='linkopacity' href='http://www.facebook.com/profile.php?id=100000640510332' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://i668.photobucket.com/albums/vv43/iomallard/facebook-button.gif" /></a><br />

<a class='linkopacity' href='http://www.myyearbook.com/aishah_youtube' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='myyearbook'><img border="0" src="http://i936.photobucket.com/albums/ad209/shadowstorm09/Gaia%20Stuff/commyyearbookm_icon.png" /></a><br />

 </div>

* Yang warna biru tu link website ok.
* Yang warna merah pulak url gambar yang bersesuaian.
* Yang warna ungu pulak tittla. Contohnya website yang kita letakkan Facebook, so tittle dia facebook la.
* Kalu nak tambah lagi just copy yang bawah ni, cuma ubah yang warna biru, purple dan merah tu ja.

 <a class='linkopacity' href='http://www.myyearbook.com/aishah_youtube' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='myyearbook'><img border="0" src="http://i936.photobucket.com/albums/ad209/shadowstorm09/Gaia%20Stuff/commyyearbookm_icon.png" /></a><br />

3. Save Siap.

Kalau tak jadi bagi tau. Takut ada kesilapan dalam tutorial ni.

Ayat Bergerak ( Marquee )

What is that ? Akrg try tegok kat bahgian atas blog header ada ayat bergerak kan. Itulah marquee.

1. Dashboard > Design > Add Gadget > HTML ? JavaScript
2. Copy, kod bawah ni

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.11NXC/bT*xJmx*PTEyOTE4OTA3ODU3NjEmcHQ9MTI5MTg5MDgwNDcwOCZwPTc2MTcxJmQ9TWFycXVlZSUyMEdlbmVyYXRvciZnPTE=.gif" /><marquee style="background-color:FFDDFF; border: 1px solid DDBBDD; color:000000; font-family:verdana; font-size:9pt; width:700px; height:50px; " direction="left" behavior="scroll" scrollamount="5" >TEXT KORUNK</marquee>

3. Yang highlight kuning tu x perlu ubah pon x pa, Tapi kalau nak ubah saiz ubah la. Ikut kesesuaian blog. Yang highlight purple plak arah ayat tu bergerak, kalau nak tukar ke kanan tulis RIGHT . Yang text kaler merah tu ayat yang kita nak gerakkan.

4. Save Siap.

Letak Icon Sebelah Comment

Icon yang dimaksudkan ialah icon yang ada kat sebelah Comment bawah entry. Kan ada macam kotak mailbox kaler merah. Haa. Itulah icon yang dimaksudkan. Car-caranya :

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

2. Kemudian cari kod bawah ni ( tekan ctrl + F )

<span class='post-comment-link'>

3. Then, Copy kod bawah ni plak dan pastekan di sebelah code yang kita cari tadi.

<img src="LinkGambar"/>

4. Maknanya dia akan jadi macam ini ...

 <span class='post-comment-link'><img src="LinkGambar"/>

5. Preview dulu, baru save.

* Yang warna biru tu, letakkan url gambar ... cara nak dapatkan url gambar boleh rujuk kat sini
* Icon tu boleh ambil dari sini 

Letak Like Button Selepas Entry

Button LIKE ni untuk pengguna facebook sahaja. Jadi , sekiranya sesiapa baca entri kita dan dia tertarik so, dia akan tanda LIKE. Itulah fungsi button like. Dalam blog ni pon ada, cuba jenguk.

1. Dashboard > Design > Edit HTML > Tick Expand Widget Template.
2. Cari kod bawah ni, tekan ctrl + F

<data:post.body/>

3. Then, copy kod bawah ni dan letakkan di bawah kod yang kita cari tadi.

 <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

4. Kalau boleh, yang kod langkah ketiga tu , sebelum paste tekan enter dulu supaya dia selang sebaris baru paste kan. kalau kurang jelas klik dekat tutorial untuk blog kat bawah tu,
5. Sebelum, kita save..preview dulu.Takut tak jadi. nanti tak boleh buka blog terus.

Credit to : tutorial untuk blog