DAPATKAN HARGA ISTIMEWA UNTUK PEMBACA BLOG SIHATIMERAHJAMBU

afzalsukasuki

Saturday, March 10, 2012

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

Dah 2hari kot menu tab comel di tepi blog Fiza 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.^__^

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[di sini]

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 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.^_^

50 comment (s):

Puteri Minho said...

Ni untuk template ape erk?

Sheda Argos ツ said...

tenkiu fiza cyg hihi sheda nk test kt second blog nanti hihi

Syasya Johan said...

haha.serius comel,sya suka main2 jugak kat situ nak tengok die senget2.*childish

Nyamuk Terbang said...

wah mcm comel jer..nnt nk try

Dawia.Honeyputri said...

menarik ! :) nanti wia nak cuba la..

Pastelove Good said...

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

http://pastelovegood.blogspot.com/

Ida Roslan said...

menarik2, terima ksh untuk tutorial ini =)

CikPuan Azizah said...

aci tak jijah nak buat kat tepi kiri tu..agak2 menganggu org nak baca entry tak fiza? huhuhu

Amirah Zulhijjah said...

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

Awie Omar said...

baru folo sini. tq sudi folo blog gua :)

CikPuan Azizah said...

tq fiza! dah jadik :)

MaYa MustWany said...

aah mas pun suka usik2 ni..hihihi.tapi tutup sikit side bar ek. n nape fiza xwat click jadi new tab?mesti lebih nice.

pe2 pun suka2 usik2..hihih

mas saari said...

cantik! boleh cuba ni..

:: Dhiya :: said...

cute!

PUTRI LAGU said...

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

Nurulchumel said...

thanks for ur credit syg!
:)

Cik Atin Bubbly said...

thanks...da buat..jadi...hehe

waniey20~ said...

THANXX SIS !

dah buat da . comell sangat ! :))

ɱąȥȵɉȥąɧąȥЩąȵɉ said...

kenapa tak boleh.dia kata error.

Nur Rishah Ahmad Muzahar said...

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

Arina Shamsul said...

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

seweeettttt je..

Farhana Ahmad said...

yey..cantik da menu tabs sy..thank akak...muah.muah.hihi

feeza macho said...

yg dekat blog awok ni guna font ape ? :p

Che Faiz Bong said...

tq.i guna k

kyrun said...

comel sangat !terima kasih

kyrun said...

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

Pinky Aina said...

Thanks memg comel. Kk cmna nk buat kt tngah?

HaNiFaH HiDaYaH said...

thanx akk :)

qieynnabo0 said...

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

Busyra Bt Takiyudin said...

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

FITRAH JAMIL said...

da lme cari. terime kasih ye kak.

Cik Tie@Akak said...

dah buat..menjadi..sukanya..thanks

Mummy Akmar said...

saya nak cuba ni..harap2 jadi.

=)

Wan_hazel said...

mohon share..wan creditkan terus ke link nie k

Rniz Emran said...

Fiza, cantik blog,tutor ni jadi
tapi tab menu home sy
tk btul (link pegi ke lain)
mcmn nk buat? new blogger.

Ida said...

kalu nak wat menu navbar kat bwah header mcam mna plak?
yg ada home,contact us... macam mna nak wat page contact us tu,cthnya?

Lee Aziz said...

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

예쁜 said...

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

alice YGK said...

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

ieda said...

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

nekounited said...

Salam. 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 :)

Nurul Erin Qallisya said...

Thanks for the tuto ^^

sahizatul sahimi said...

salam. boleh tak terangkan mcmna nak buat url link tu? kurang faham -.-"

Nana Liena said...

salam..kak..kalau buat image sndri pastu letak kat tepi mcm dlm tuto ni boleh ke? kalau blh..mohon bt tuto.huhuh

deno said...

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

Sabrina SA said...

tq ♥

farrah hanim said...

Ahahah !! dah jadi ,, thank you akak !!

Zana Hassan said...

npe xleh nk buat huhu

El Arifah said...

akak , macam mana nak dapatkan link ? pening lah ,

suzana yahaya said...

susah jugak tapi tak pe kita cuba ye...tq tau..
jom la singgah
suzana8378.blogspot.com