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 =)

---