.

About....... Linkies.... Stuffies... Other..... Home.
.

Minggu, 05 Juni 2016

Floating Navigation Like mine

Hai, balik lagi nih *mumpung libur on terus dahh..*
aku mau kasih tuto cara bikin floating navigation kayak aku...
ini sih req kak Ratih,
 tapi ini bukan cuma untuk kak ratih ini untuk semua..!
Oke, Lets Start!


Codenya aku dapet di blog ini Tapi udah aku edit.

  • Buka blogger
  • Tata letak
  • add a gadget
  • html/javascript
  • copas code ini
 <style>
  
a.raejun {
border: 2px solid #ffe4e1;
width:60px;
    padding:15px;
    margin-top:15px;
    box-shadow:2px 2px 4px #ffe4e1;
    background:#ffeeee;
    font:8px Comic sans MS;
    text-align:center;
    Text-decoration:none;
    color:white;
    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 #000;
    -webkit-border-top-right-radius: 333px;
    -webkit-border-bottom-right-radius: 333px;
    -moz-border-radius-topright: 333px;
    -moz-border-radius-bottomright: 333px;
    border-top-right-radius: 333px;
    border-bottom-right-radius: 333px;
}

a.raejun:hover {
color:#fff;
border: 2px solid #ffe4e1;}
    }
    @font-face {
    font-family:tt !important;
    src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
    }
    </style>

    <div style="position:fixed; top:100px;left:0px;width:100px; color:#aaa;">
   <a class="raejun" href="link" />apa</a>
<a class="raejun" href="link" />apa</a>
<a class="raejun" href="link" />apa</a>
<a class="raejun" href="link" />apa</a>
    </div>
 Selesaii, di save,
oh iya codenya bisa diedit-edit dulu yaa!!..


Tidak ada komentar:

Posting Komentar