Thursday, 12 April 2012

Menu Tab Comel Rotate (-5deg)

Assalammualaikum . Sebelum baca nie tolong klik SINI boleh ? :)
Ade seorang Princess bertanya kepada patik *ceyy

Macam mane nak buat tab menu joget2 ke kiri macam Arin punye tu :)
Macam ni haa ..

Arin try nak tolong .. setakat yang mampu lah hihi~
Sebelum tu, tutorial ni daripada blog [N comel]
Edit HTML-->Tick Expand Widget
Carik kode :
]]></b:skin>
Kalau tak jumpe, cer tengok sama ada awak tick expand widget template tak
Pastu kalau sudah jumpe kode tu, copy kode di bawah & paste kat ATAS ]]></b:skin> tadi

/* 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:#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; }
Awak cuma perlu mengubah suai font, warna, size font, background & lagii

Pastu, carik kode nie pulak :
</body>
Copy kode di bawah & paste di atas/sebelum  </body>
<div style='display:scroll; position:fixed; top:150px; left:-40px;'>
<div id='list8'>
<ul>
<li><a href='http://www.blogger.com/home'>Home</a></li>
<li><a href='LINK TAB KORANG'>Tajuk</a></li>
<li><a href='LINK TAB KORANG '>Tajuk</a></li>
<li><a href='LINK TAB KORANG'>Tajuk</a></li>
</ul>
</div>
</div>
P/s : LINK TAB KORANG contoh macam ni :
http://aduduvsalienpink.blogspot.com/p/tutorial-d.html
Tajuk tu contoh macam ni :
Tuto+Free
Kalau nak jelas, ni contoh kode Arin, kalau berkenan cuma ubah ape yang patut taw
 /* LIST #8 */
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li { font-family:Trebuchet ms,Verdana; font-size:13px;margin:1px;center; }
#list8 ul li a { display:block; width:100px; height:30px; background-color:#00bfff; border-right: 8px solid #ffc0cb; #Trebuchet ms,Verdana; padding-left:40px;
text-decoration:none; color:#ffffff; }
#list8 ul li a:hover { background-color:#00bfff;-moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #ffffff;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #58ACFA;
transform:rotate(-5deg); box-shadow:10px 10px 20px #Trebuchet ms,Verdana; }
 [Preview dulu ! Tak de error baru lah SAVE]
Tu je yang Arin nak share buat tab menu joget2 comel tu
Baii Assalammualaikum ~

10 comments:

Mr. Doctor said...

serious cantek.. nak blaja gak la :)

♥Arin Anis said...

@Mr. Doctor cantik kn..:) blaja la :)

Sofia MochAifos said...

Cam ne nak entry post under column tu? Contohnya, kita nak wat entry mengenai tutor, cam ne nak make sure entry kita tu betul2 berada dalam column tutor ?

♥ Anis said...

@Sofia MochAifos kurang jelas lah, kena buat page dulu.. :)

Sofia MochAifos said...

@♥ Anis Dah buat dahh . Cam ni , maksud aku ... Kalau aku nak buat entry pasal Tutor , nak buat kat "New Post" jugak ke ? Kalau tak termasuk kat dalam HOME cam ne ? Padahal kat Tutor kosong . Faham ?

♥ Anis said...

@Sofia MochAifos Yup..kat New Post jugak..pastu masukkn link tu dlm page tutor :)

sufi kisra said...

@♥ Anismacam mana nk msukkan link dlm page tutor..??

anis Sk said...

@sufi kisra ohh mcm ni.. Buka post yg page tutor tu ,

taip nama tutorial ,

highlightkan yg nak dilinkkan,

klik link di atas,

masukkn link dalan box tu. tekan ok. :)

eika said...

nak tny la..contoh macam kie da klik kat slh satu box tu kan,macam mane nk link kan link dgn 'isi' dia??

anis Sk said...

Dear @eika yang saya taip LINK BLOG KORANG tu tukar dengan link page/ facebook/ tw atau apa2 jelah. Gitulah (: