Sabtu, 24 Maret 2012

Cara Membuat Beauty Slide Navigation

Posted by alex marz 10.31, under | No comments

Y sobat blogger smuanya .. kali ini saya akan memberi taukan cara membuat slide navigation .. karena ada yang mananyakan cara membuatnya .. Ok langsung saja klo begitu ..



              by: alex matz

    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]>
  3. Dan Simpan kode berikut diatasnya : 


/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#fff url(title.png) no-repeat top left;
        }
ul#navixed {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navixed li {
    width: 103px;
    display:inline;
    float:left;  
}
ul#navixed li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
     background-color:#000;
}
ul#navixed li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFF;
     
}
ul#navixed .home a{
    background-image: url(http://3.bp.blogspot.com/-aXrFVyf4QsA/TZBebt8Z8jI/AAAAAAAAAgY/wHMKwyDH86g/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(http://4.bp.blogspot.com/-U0VzmKiVx3k/TZBeclR4x5I/AAAAAAAAAgc/c6T4Q-__HTw/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(http://2.bp.blogspot.com/-84f0jEeeffc/TZBehJq90AI/AAAAAAAAAgs/w4UaF1VPgLs/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(http://1.bp.blogspot.com/-sbloKktswgc/TZBed0gK93I/AAAAAAAAAgg/avwmYOErpGI/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(http://1.bp.blogspot.com/-Ro686lePoM8/TZBef9OyGcI/AAAAAAAAAgo/e_QaROPLVx0/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(http://3.bp.blogspot.com/-fi5XP0zvpB8/TZBeael-n5I/AAAAAAAAAgU/bwS_VlGvi-U/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(http://4.bp.blogspot.com/-RTxgq3NFIYM/TZBeei8J4-I/AAAAAAAAAgk/Zgo-9V-JXss/s1600/mail.png);
}
dan simpan script ini di atas kode :
 


[-] terakhir simpan cara pemanggilannya di atas kode :




Code di atas adalah code pemanggilannya .. ganti font yg berwana Biru dengan Link" sobat" blogger .


Selesai Jangan Lupa Simpan Template ... Selamat Mencoba~Good Luck ..

Jangan Lupa berikan Commentnya juga .. comment sobat" sangatlah berharga buat saya .. :D

0 comments:

Posting Komentar

AbouT Me

Mengenai Saya

Foto saya
Saya Ingin Belajar Dari Hasil Postingan Yang Saya Share Kembali, Saya Tidak Pintar ,Saya Tidak Mahir, Saya Pun Tidak Sok Tahu, Kami Ingin Lebih Mengenal Atau Kami Ingin Sekali Belajar !!

ViSiToR

-=Alex-Marz-Onlin=-

FaVoriT

Entri Populer