22 December 2013

Tutorial : Navigation bar (ribbon)

Aina Sofea | 2:45 PM | 4Comments |
Assalamualaikum dan Salam Sejahtera !

Bismillahirrahmanirrahim ....

Ha , kali ni saya buka peluang untuk korang semua request tutorial kat page . Dan , ada seorang yang request buat navigation ni . betul ke tak eh ? o.O Harap betul lah , yang ni yang di minta eh ;) Hasilnya macam yang saya pakai sekarang ni :) Permintaan dari Kak Aisyhah

PERHATIAN : HANYA UNTUK TEMPLATE DESIGNER SAHAJA


Step 1 : Dashboard -> Layout -> Add gadget (berpandukan gambar di atas) -> HTML/Javascript -> Copy & paste kod di bawah -> Save !
<div class="ribbon">
    <a href="#"</span></a>Home ♥</a>
    <a href="#"</span></a>Stuffies ♥</a>
    <a href="#"</span></a>Owner ♥</a>
    <a href="#"</span></a>Linkies ♥</a> 

 Note: merah - link page
         biru - nama page

Step 2 : Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Copy & Paste kod di bawah -> Tengok hasil -> Apply to blog
.ribbon:after, .ribbon:before {
    padding-left:100px;
margin-bottom: 1.2em;
    margin-top:0.5em;
    content: "";
    float:left;
    border:1.5em solid #F7819F;
}
.ribbon:after {
    border-right-color:transparent;
}
.ribbon:before {
    border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.ribbon span {
    background:#F7819F;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
    -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
    background:#E3CEF6;
    margin-top:0;
}
.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #F7819F;
}
.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #F7819F;
Note: merah - warna riben yang anda mahu
          biru - warna gelap sikit daripada warna riben
          pink - warna riben (hover)
          hijau - panjang riben (sekiranya mahu memenuhi panjang body blog , buat 280px -kalau body     saiz 1000px)

Step 3 : View blog & Siap !

Extra ! Panduan untuk dapatkan kod biru (Step2)
1. Buka ini 
2. Scroll ke bawah dan ikut gambar di bawah

p/s:kalau ada apa-apa soalan , boleh tanya di ruang komen . Kalau dah/tak jadi tolong beritahu k ?

 Selamat Mencuba ! :D
Sekian , Assalamualaikum ...

4 comments:

  1. Thanks sayang~~ Nak tuto yg header ribbon tu lak okay:P hehehe.Muahks!

    ReplyDelete
  2. KAWAII! Blog ni pun comel gak. Jeles much! :D

    ReplyDelete

Tinggalkan komen , jom ?? LIKE SINI dan FOLLOW SITU lah juga yaa ?? ^_^



"Budi Bahasa Budaya Kita"