Tutorial 17 - Menu bar rotate di tepi blog

Bila kita gerak kan cursor kat situ dia akan rotate nanti =)

Jom try !

Dashboard > Design > Edit HTML > Tick Expand Widget Templates

1- Macam biasa tekan Ctrl+F serentak dan cari code bawah ni. *Ctrl+F ni untuk mudahkan korang cari code bawah ni. =)

]]></b:skin>

2- Dah jumpa ?  Seterusnya copy code bawah ni dan paste atas " ]]></b:skin> "tu.

/* LIST #8 */
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px;margin:1px; }
#list8 ul li a { display:block; width:80px; height:28px; background-color:#333; border-right:10px solid #F7819F; padding-left:40px;
text-decoration:none; color:#F7819F; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

3- Yang warna purple tu korang boleh ganti code warna yang korang suka.  Kalau nak kekal kan pun takpe tapi tu warna biru.

4- Eh belum siap lagi. Macam biasa tekan Ctrl+F serentak dan cari code bawah ni. *Ctrl+F ni untuk mudahkan korang cari code bawah ni. =)

</body>

5- Dah jumpa ?  Seterusnya copy code bawah ni dan paste atas "  </body>  "tu.

<div style='display:scroll; position:fixed; top:150px; left:-40px;'>
<div id='list8'>
<ul>
<li><a href='URL ENTRY KORANG'>TAJUK</a></li>
<li><a href='URL ENTRY KORANG'>TAJUK</a></li>
<li><a href='URL ENTRY KORANG'>TAJUK</a></li>
<li><a href='URL ENTRY KORANG'>TAJUK</a></li>
</ul></div></div>

6- Last kali SAVE !  Kalau takut tak jadi korang PREVIEW dulu lepas tu baru SAVE =)

Dah jadi ?  Sila tinggal kan comment ye =)

Jom Terjah SINI =)

---

dah baca??? Tinggalkanlah comment. Tengkayu =)

---

Tutorial 16 - Cara buat BACKGROUND dan BORDER di MAIN INNER

Hyte !

Sekarang ni aku nak kongsikan sedikit tuto memandangkan ada yang tanya =)

Nampak tak background biru dan border tu ?

Selalu background luar je orang buat kan.

Hari ni aku nak ajar yang dalam pulak =)

Jom !

Dashboard > Design > Edit HTML > Tick Expand Widget Templates

1- Macam biasa tekan Ctrl+F serentak dan cari code bawah ni. *Ctrl+F ni untuk mudahkan korang cari code bawah ni. =)

.main-inner {

2- Dah jumpa ?  Seterusnya copy code bawah ni dan paste bawah " .main-inner " tu.

background : url(URL BACKGROUND);
  padding: 15px $(main.padding.sides) 30px ;border-top-left-radius: 30px 30px; border-top-right-radius: 30px 30px; border-bottom-left-radius: 0px 0px; border-bottom-right-radius: 0px 0px;

3- Isi warna merah tu kepada url background yang korang suka okeyh ! =) Dah siap save la, tapi kalau takut tak jadi korang preview la dulu >_______0

Selamat mencuba =)  Apa-apa hal boleh tanya =)

Dah jadi ? Kalau dah jadi jom terjah minyak wangi di KLIK SINI =)

---

dah baca??? Tinggalkanlah comment. Tengkayu =)

---

Tutorial 15 - Cara pasang LAGU dalam blog

Hyte !

Dah lama aku tak buat tutorial kan.

Okay kali ni aku nak kongsikan macam mana nak letak lagu dalam blog macam aku punya =)

Mungkin ramai yang dah tahu.

Aku buat ni pun ada yang tanya kat aku hehe =)

Apa lagi jom !

Dashboard > Design > Add a Gadget > HTML / JavaScript

1- Dah tekan semua tu ?  Seterusnya PASTE kan CODE dibawah ni dekat content (ruang kosong ).

<object height="200" width="25"><param name="movie" value="http://www.youtube.com/v/zDo50i2R84I?fs=1&amp;autoplay=1&amp;hl=en_US&amp;rel=0"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/zDo50i2R84I?fs=1&amp;autoplay=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="25" width="200"></embed></object></div>

2- Belum habis lagi.  Sekarang pergi SINI.  Pilih / cari lagu yang korang suka. Nanti bawah video yang korang pilih tu ada macam bawah ni kan.  Klik SHARE .

3- Nanti akan keluar kat bawah macam ni.  Nampak tak EMBED ?  So KLIK EMBED TU.

4- Lepas tu akan keluar macam bawah ni.  Korang COPY code yang biru dan PASTE kan kat tempat lain seperti kat WordPad ( mana-mana je ).

CONTOH CODE ATAS

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/tNf6e_RExlg?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/tNf6e_RExlg?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

5- Yang warna PURPLE ATAS ni korang COPY CODE tu dan PASTE kan kat CODE yang FIRST aku bagi tu yang bewarna MERAH =) . PASTI kan CODE tu adalah SAMA.
 
5- Seterusnya SAVE.  Kalau nak macam aku punya, korang just masuk kan code yang dah siap tu di AKHIR sekali.  Kira macam sambung kan dengan code lain.

Selamat mencuba =)

---

dah baca??? Tinggalkanlah comment. Tengkayu =)

---

Tutorial 14 - Cara buat PENANDA BLOG

Hyte ! Dah lama tak buat tutorial.

Hari kebetulan ada yang tanya aku macam mana buat tuto ni.

Anda berminat ? 

Jom kita sama-sama cuba !

1. Tekan LINK ni.

2. Klik mana-mana gambar yang korang nak.

3. Pilih antara dua code yang korang nak.  Samada ATAS atau BAWAH. 

4. Lepas tu korang tukar TEXT ANDA DI SINI kepada ayat korang nak dalam code yang korang pilih tadi.

5. 

 Dashboard > Design > Add a gadget > HTML / Javascript

Copy code yang korang pilih dan paste di ruang HTML / Javascript.

6. Preview dulu baru Save ye.

p/s : Kalau dah cuba tinggalkan komen ye =)

---

dah baca??? Tinggalkanlah comment. Tengkayu =)

---

Tutorial 13 - Title sidebar bercantum entry sidebar

Hyte !

Dulu ada gak nak buat pasal tutorial ni tapi nanti la.

Memandangkan sekarang ni tengah rajin jadi aku nak kongsi dengan korang semua.

Eh tak faham apa tu ?

Kejap ye..

Jom !

Dashboard > Design > Edit HTML > Tick Expand Widget Templates

 1- Cari kod seperti bawah ni (ctrl F untuk memudahkan pencarian )

 h2{

2- Pastekan code dibawah ni di BAWAH code h2{ .

text-align:center;
border-top-left-radius: 35px 35px; border-top-right-radius: 35px 35px; border-bottom-left-radius: 0px 0px; border-bottom-right-radius: 0px 0px;
margin:0 0 0em 0;

    font:$(widget.title.font);

    color:$(widget.title.text.color);

    text-transform:uppercase;

    background: code warna }

3- Gantikan warna merah tu dengan code warna.  Siap ! Preview dulu dah okay baru save.

p/s : kalau jadi atau tak jadi bagi la tau okay, baru tau tutorial ni menjadi atau tak. =)

---

dah baca??? Tinggalkanlah comment. Tengkayu =)

---