HOME ABOUT TUTORIAL FREEBIES REVIEW BANNER TEMPAHAN

Saturday, 14 April 2012

Tutorial buat menu tab comel di tepi blog



Assalamualaikum semua..
Hari ni wawa nak buat satu tutor and ni first tutor wawa buat..
Akey, act.. tutor ni paling susah bg wawa.. Tapi bagi korang mesti senang je kan..
Terima kasih kat Biey Sha yang sudi membantu wawa dan tak lupa juga kat tutor ni yang sangat membantu wawa, sampai jadi dah pun menu tab comel tersebut..
Siap buat tutor ni lagi..
Akey ! Tanpa membuang masa..
Jum kita try buat menu tab comel ditepi blog..

Ini adalah contoh menu tab comel tu.


Sebelum tu korang kena 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; }

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.

code warna boleh cari [disini]

credit: Sihatimerahjambu

No comments:

Post a Comment