Contoh macam bawah ni.Takpun korang click je kat tepi blog Fiza ni.
Disebabkan ada yang bertanya dan ada masa nak buat tuto simple ni.
So,Fiza akan buat tuto ni untuk dikongsi bersama.Dah mintak izin pada tuan punya tuto dan dia dah izinkan pun.Fiza buat ni pun dari tuto si dia[N comel] ni.Thanks a lot ye.^__^. OK,jomlah try jugak
[Sebelum mulakan tutor ni,save dulu template blog korang>>download]
1.Log in blogger>>Dashboard>>Design>>Edit HTML
2.Click pada expand widget templates
3.Cari code ]]></b:skin>
*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>
8.Paste code no 7 sebelum code </body>
9.Preview
10.Kalau dah ok tekan SAVE
Mula mula Fiza buat tak menjadi,mungkin ada masalah coding dalam template.So,Fiza 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.
Credit tuto to [Nurulcomel]Thanks!
Notapink:Kalau dah siap menu tab comel tu..menu tab lama dah boleh delete.
Notapink:Kalau dah siap menu tab comel tu..menu tab lama dah boleh delete.
Ni untuk template ape erk?
ReplyDeletewah mcm comel jer..nnt nk try
ReplyDeletemenarik ! :) nanti wia nak cuba la..
ReplyDeletecute la..mcm main piano pun ye jugak! :D
ReplyDeletehttp://pastelovegood.blogspot.com/
menarik2, terima ksh untuk tutorial ini =)
ReplyDeletepatutla mira buat tak jadi..tapi bila test dekat second blog jadi je..padahal dua2 sama template..huhu..
ReplyDeletebaru folo sini. tq sudi folo blog gua :)
ReplyDeleteaah mas pun suka usik2 ni..hihihi.tapi tutup sikit side bar ek. n nape fiza xwat click jadi new tab?mesti lebih nice.
ReplyDeletepe2 pun suka2 usik2..hihih
cantik! boleh cuba ni..
ReplyDeletecute!
ReplyDeletenak buat yang menu tab awal2 tu macam mane? pening dah.. nak dapat kan (link/url) tu..
ReplyDeletethanks for ur credit syg!
ReplyDelete:)
thanks...da buat..jadi...hehe
ReplyDeleteTHANXX SIS !
ReplyDeletedah buat da . comell sangat ! :))
kenapa tak boleh.dia kata error.
ReplyDeleteJadi la ! Comell sangat ! ^^ May God bless you :) Thnxx
ReplyDeletehi dear :) menu tab saya dah menjadi :)
ReplyDeletethanks atas tutor ni dear :)
seweeettttt je..
yey..cantik da menu tabs sy..thank akak...muah.muah.hihi
ReplyDeleteyg dekat blog awok ni guna font ape ? :p
ReplyDeletetq.i guna k
ReplyDeletecomel sangat !terima kasih
ReplyDeletekaka. saya dah guna tuto nhh ! terima kasih ! comel. follow me tau
ReplyDeleteThanks memg comel. Kk cmna nk buat kt tngah?
ReplyDeletethanx akk :)
ReplyDeletetak jadi lah , sebab qina tak pandai main code , macam mane erk ?
ReplyDeletemacam mana nak tukar font lain? boleh tolong inform kat blog sy . tengs :)
ReplyDeleteda lme cari. terime kasih ye kak.
ReplyDeletedah buat..menjadi..sukanya..thanks
ReplyDeletesaya nak cuba ni..harap2 jadi.
ReplyDelete=)
mohon share..wan creditkan terus ke link nie k
ReplyDeletekalu nak wat menu navbar kat bwah header mcam mna plak?
ReplyDeleteyg ada home,contact us... macam mna nak wat page contact us tu,cthnya?
Dah jadi...tapi macam mana pulak nak letak benda ni ikut kategori...tekan semua benda tu...tapi keluar "home" sahaja..cth resepi dok dlm tab resepi
ReplyDeletemacam 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
ReplyDeletesaya telah mengambil tutorial navigation tab ini,dan saya mengucapkan terima kasih yang teramat sangat xD
ReplyDeleteDIK KENAPA AKK BUAT , BILA PREVIEW , DIA KUAR PAGES BROKEN ! .. HUHU TOLONG DIK .. PENING DAH NIE .. DAH BANYAK KALI BUAT HUHU
ReplyDeleteSalam. Sy rujuk tutorial blog Azhafizah ntk wat tab kat tepi. Jadi. Tq sgt utk tutorial. tp sy buat cam xmnarik.he2.. jd nak tnye cmne nk wat cam admin pnye. mksd sy nak tuka shape kotak tab tu. TQ :)
ReplyDeleteThanks for the tuto ^^
ReplyDeletesalam. boleh tak terangkan mcmna nak buat url link tu? kurang faham -.-"
ReplyDeletesalam..kak..kalau buat image sndri pastu letak kat tepi mcm dlm tuto ni boleh ke? kalau blh..mohon bt tuto.huhuh
ReplyDeletemohon share ya... deno akan kreditkan ke blog ni ... :)
ReplyDeletetq ♥
ReplyDeleteAhahah !! dah jadi ,, thank you akak !!
ReplyDeletenpe xleh nk buat huhu
ReplyDeleteakak , macam mana nak dapatkan link ? pening lah ,
ReplyDeletesusah jugak tapi tak pe kita cuba ye...tq tau..
ReplyDeletejom la singgah
suzana8378.blogspot.com
salam,sis fiza. boleh tak buat tuto tentang menubar sekali kotak search macam blog sis ni? puas cari tuto utk menubar mcam blog sis ni tapi tak jumpa. hope sis dpat bantu. tq. :)
ReplyDeleteALHAMDULILLAH.. jadi!! haha. best. thanks dear. May Allah Bless you always. Aminn..
ReplyDelete