Tutorial : Menu tab tepi blog

Advertisement

Tutorial : Menu tab tepi blog

Haaa.. ada perasan tak menu tab tepi blog zati tu.. yang ni...


 

Okay sini cara dia ....

1) Mula-mula macam biasalah korang kena Sign in blog > Dashboard > Template > Edit HTML
2) Dah?? Kemudian korang Ctrl +f (serentak)
3) Korang copy code dibawah ini dan paste di kotak find.

 Code Tab Menu:
    ]]></b:skin>

4. Dah..korang copy dan paste Code dibawah ini pula pula sebelum code ]]></b:skin>
    /* 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; }


Backgroud : warna pada kotak (ikut kesukaan korang)
Border: (kotak kecil kat tepi) boleh tukar right or left
Transform rotate: ( ukuran sengit bila cursor menyentuh) boleh tukar jadi 6, 7, 8
#000000 : tukar colour ikut korang suka [code warna]  >> SINI <<

5. Kemudian korang kena cari code nie pula (tekan ctrl+f serentak untuk cari code)
    </body>

6. dah jumpa?? baiklah copy dan paste code dibawah ini sebelum code </body> tadi
    <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>


warna Ungu : letak URL korang sendiri (https://z3tty.blogspot.my/)
warna Pink : Letak tajuk (ikut suka korang)
position fixed : adjust tinggi tau

7. dah buat??...try buat dulu k...dah siap..PREVIEW dulu dan SAVE kalau tak menjadi tanya yek =)



Post a Comment

1 Comments

Terima kasih sudi baca artikel ini. Sila berikan komen anda. Jemput follow blog ini ye!