Assalamualaikum..
Kali nie Wan nak kongsi tutorial nie lak..tab menu side comel macam nie.
Wan copy Tutorial nie 100% dari http://www.azhafizah.com/2012/03/tutorial-buat-menu-tab-comel-di-tepi.html
Kalau Wan nak buat tutorial sendiri pun sama gak cara nya..Jadi Wan ambik yang dah sedia ada..Dan kreditkan terus ke blog sumber Tutorial nie..
--------
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 ]]>
CTRL+F 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 ]]>
6.Cari code
*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.
Notapink:Kalau dah siap menu tab comel tu..menu tab lama dah boleh delete.^_^
Wan copy Tutorial nie 100% dari http://www.azhafizah.com/2012/03/tutorial-buat-menu-tab-comel-di-tepi.html
.
No comments:
Post a Comment