Kuroi KENSHIN
KUROI KENSHIN
HTTP://FARANYMBOBOIBOY.BLOGSPOT.COM
posted by Fara_nym | Hyoukurona Thursday, 30 May 2013 @3:32 am 2 comments
Tutorial : Navigation di atas tepi blog
Bismillahirahmanirah...
Assalamualaikum dan Salam Sejahtera~

doodle Fara lukis [me in Instax]
Fara nak ajar korang cam mana nak buat menu tab yang tergantung macam kat bawah ni~

                           Live preview:
                                               .        
Jom ikut step ni..

1.Sign in => Dashboard => layout => add gadget => html/java script

2.Copy code kat bawah ni dan paste kan pada ruang html/java script
<style type="text/css">
.raejun{
width:96px;
padding:2px;
margin-top:5px;
box-shadow:2px 2px 4px #DFDFDF;
background:#eee;
font:8px tt;
text-align:center;
Text-decoration:none;
color:#FF8888;
text-transform:uppercase;
display:block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
border-left:0px solid #D0A9F5;
}
.raejun:hover{
width:66px;
border-left:30px solid #D0A9F5;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<div style="background:#eee;color:#fff; position:fixed; top:0px;leftt:35px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="background:#eee;color:#fff; position:fixed; top:0px;left:90px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="position:fixed; top:100px;left:20px;width:100px; color:#aaa;">
<div style="background:#D0A9F5;color:#fff;width:100px; box-shadow:2px 2px 4px #bbb;text-align:center; font-size:12px; text-transform:uppercase;">
Navi</div>
<img src="https://si0.twimg.com/profile_images/3727191971/45180ca88b66a524e7da3bad9eede8eb.jpeg" style="width:80px;border:10px solid #eee;margin-top:5px;box-shadow:2px 2px 4px #ddd;" />
<a class="raejun" href=" link "> tajuk </a>
<a class="raejun" href=" link "> tajuk </a>
<a class="raejun" href=" link "> tajuk </a>
<a class="raejun" href=" link "> tajuk </a>
<a class="raejun" href=" link "> tajuk </a>
</div>

  • warna merah tu kod warna background      NAVI        dan hover navi.
  • 'Left ' korang BOLEH tukar kepada 'right' kalau nak navi korang belah kanan.
  • pink untuk link navi korang dan hijau ubtuk tajuk [contoh : home ]
  • kalau nak tambah banyak lagi ,tambah lagi kod ni
<a class="raejun" href=" link "> tajuk </a>

ok itu saja then save.
bye assalamualaikum dan semoga berjaya!

Labels:


FARANYM | HYOUKURONA 2017