Tutorial buat menu tab comel di tepi blog[ hover rotate -5deg]

Dah 2 hari kot menu tab comel di tepi blog saya ni menapak tanpa ada masalah buat masa ni. So, selamat untuk digunakan sebab tak mengganggu loading blog dan mudah nak navigate blog juga. 

Paling best bila hover ada effects -5deg dan buatkan korang suka nak main main dengan hover tu.Seriously nampak style dan comel.


Disebabkan ada yang bertanya dan ada masa nak buat tutorial simple ni.


Sebelum mulakan tutorial ni, save dulu template blog masing-masing.

1. Log in blogger>>Dashboard>>Design>>Edit HTML

2. Click pada expand widget templates

3. Cari code ]]></b:skin> (klik sini untuk copy code)
*tekan serentak ctrl+f dan masukkan code no 3 di dalam box untuk memudahkan pencarian

4.Copy code bawah ni
/* 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; }
*Customize coding ikut kesesuaian blog,korang boleh tukar jenis font,warna font,size font,warna background dan position tab menu tu.

code warna: http://userabbe.xtgem.com/code_warnai

5. Pastekan code no4 sebelum code  ]]></b:skin>

6. Cari code </body>
*tekan serentak ctrl+f dan masukkan code no 5 di dalam box untuk memudahkan pencarian

7. Copy code bawah ni
<div style='display:scroll; position:fixed; top:150px; left:-40px;'>
<div id='list8'>
<ul>
<li><a href='URL BLOG'>Home</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
</ul>
</div>
</div>
*letak link menu dan tajuk menu pada code di atas ni

8. Paste code no 7 sebelum code </body>

9. Preview

10 .Kalau dah ok tekan SAVE

Mula mula saya buat tak menjadi, mungkin ada masalah coding dalam template. So, saya switch template baru dan buat  semula macam template asal. 

Alhamdulillah menjadi menu tab comel ni. So, kalau tak jadi masa first time buat tu, korang kena switch pada template baru dan buat balik blog. Sebelum switch template baru, save dulu template lama.

Selamat mencuba.

sumber : Nurulcomel

33 Comments

Segala komen-komen yang telah disiarkan adalah tanggungjawab sepenuhnya ke atas penulis itu sendiri. Pemilik blog tidak akan bertanggungjawab jika berlaku sebarang permasalahan berkaitan dengan komen yang disiarkan. Mana-mana komen yang berbentuk iklan, mengandungi link/url, mengandungi kata-kata maki hamun, soalan yang jawapannya terang lagi bersuluh ada dalam entri, atau tidak menyenangkan tidak akan disiarkan. Begitu juga dengan unknown profile. Harap Maklum.

Sekian Terima kasih.

  1. cute la..mcm main piano pun ye jugak! :D

    http://pastelovegood.blogspot.com/

    ReplyDelete
  2. menarik2, terima ksh untuk tutorial ini =)

    ReplyDelete
  3. patutla mira buat tak jadi..tapi bila test dekat second blog jadi je..padahal dua2 sama template..huhu..

    ReplyDelete
  4. baru folo sini. tq sudi folo blog gua :)

    ReplyDelete
  5. nak buat yang menu tab awal2 tu macam mane? pening dah.. nak dapat kan (link/url) tu..

    ReplyDelete
  6. THANXX SIS !

    dah buat da . comell sangat ! :))

    ReplyDelete
  7. Jadi la ! Comell sangat ! ^^ May God bless you :) Thnxx

    ReplyDelete
  8. hi dear :) menu tab saya dah menjadi :)
    thanks atas tutor ni dear :)

    seweeettttt je..

    ReplyDelete
  9. yg dekat blog awok ni guna font ape ? :p

    ReplyDelete
  10. kaka. saya dah guna tuto nhh ! terima kasih ! comel. follow me tau

    ReplyDelete
  11. tak jadi lah , sebab qina tak pandai main code , macam mane erk ?

    ReplyDelete
  12. macam mana nak tukar font lain? boleh tolong inform kat blog sy . tengs :)

    ReplyDelete
  13. mohon share..wan creditkan terus ke link nie k

    ReplyDelete
  14. macam mana nak buat bila kita klik tu dia keluar new tab..saya dah letak code untuk new tab,,tapi tak menjadi kat tab tepi ni..please response

    ReplyDelete
  15. saya telah mengambil tutorial navigation tab ini,dan saya mengucapkan terima kasih yang teramat sangat xD

    ReplyDelete
  16. DIK KENAPA AKK BUAT , BILA PREVIEW , DIA KUAR PAGES BROKEN ! .. HUHU TOLONG DIK .. PENING DAH NIE .. DAH BANYAK KALI BUAT HUHU

    ReplyDelete
  17. mohon share ya... deno akan kreditkan ke blog ni ... :)

    ReplyDelete
  18. Ahahah !! dah jadi ,, thank you akak !!

    ReplyDelete
Previous Post Next Post

نموذج الاتصال