Tutorial : Rotate Tab Menu *New, Hot

ุงู„ุณّู„ุง ู… ุนู„ูŠฺฉู… ูˆุฑุญู…ุฉุงู„ู„ู‡ ูˆุจุฑฺฉุฉ | Salam Sejahtera :)



Sekarang ni, kalau bw dari blog ke blog kan, banyak juga yang ada tab menu macam tu. So, korang semua boleh la cuba.. Senang je caranya :)

1st step :
Dashboard - Design - Edit HTML

2nd step :
Click Expand Widget Templates

3rd step :
Copy code kat bawah neh dan paste kan SEBELUM code ]]></b:skin>
/* 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:100px; height:28px; background-color:#000000; border-right:10px solid #FFFFFF; padding-left:40px;
text-decoration:none; color:#FFFFFF; }
#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; }
4th step :
Copy code di bawah neh dan paste kan SEBELUM code </body>
<div style='display:scroll; position:fixed; top:150px; left:-40px;'>
<div id='list8'>
<ul>
<li><a href='URL BLOG KORANG'>Home</a></li>
<li><a href='URL/LINK KORANG'>Tajuk</a></li>
<li><a href='URL/LINK KORANG'>Tajuk</a></li>
<li><a href='URL/LINK KORANG'>Tajuk</a></li>
</ul>
</div>
</div>


5th step :
Preview dulu, kalau takde apa apa error, terus SAVE! :')

p/s : Korang boleh tukar warna yang ikut kesesuaian blog korang. Yang BIRU tu untuk background, dan yang MERAH tu untuk tulisan dan border kanan. Korang boleh pilih code warna kegemaran korang di sini. HTML COLOR CODE

Kan? 5 cara dah siap :) Korang boleh adjust sikit-sikit. Ohya. Korang kena try banyak kali. Insyallah jadi. Tutorial asal from kak Nurul. If ada pape, boleh tanya kat blog dia :)

Comments

Post a Comment

Your words defines you

Popular posts from this blog

Tutorial : How To Use Blogskin? Cara nak Guna Blogskin

Senarai Pemenang Anugerah Melodi 2016