[ WELCOME TO MY SITE DO NOT FORGET TO FOLLOW AND COMMENT]

15/10/11

cara membuat menu slide out navigation

04.17  ME  No comments




Ane Dari kemaren-kemaren bingung nyari cara bikin menu kaya gini,keliling ke om google ngga nemu-nemu eh ane nemu di blog tmn ane,ane mnta cara-caranya ngga di kasih maz bro,malah  disuruh CTRL+U di blognya.weleh suruh nyari sendiri gitu scriptnya,akhirnya ane nemu tuh scriptnya dan mau bagi-bagi nih ma maz bro yang mau nyoba,kan jarang tuh menu kaya gini di blog yang lain.
OK deh langsung ja yu kita mulai cara-cara memasangnya.

Ane Dari kemaren-kemaren bingung nyari cara bikin menu kaya gini,keliling ke om google ngga nemu-nemu eh ane nemu di blog tmn ane,ane mnta cara-caranya ngga di kasih maz bro,malah  disuruh CTRL+U di blognya.weleh suruh nyari sendiri gitu scriptnya,akhirnya ane nemu tuh scriptnya dan mau bagi-bagi nih ma maz bro yang mau nyoba,kan jarang tuh menu kaya gini di blog yang lain.
OK deh langsung ja yu kita mulai cara-cara memasangnya.

  1. Biasa kalau mau edit-edit blog harus Log In dolo dong ke blog kita.
  2. Klik Rancangan
  3. Klik Edit HTML
  4. Jangan lupa centang Expand Template Widget
  5. Cari Kode ]]></b:skin> lalu simpan script di bawah ni tepat diatas kode tadi.
    /*----------------
    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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDDq4dWCkJ58LppMybN1-pWBU9WFRdA6zBI8tC0-8XtZWf1Y7mexEoUQ1Ew_M0sNcktS47t1YDIKRG0n_u-GXSFEVikeXEmLTl2ofudb4oAFM23o1v6Y9m1rwDI3uWqGFIPQweNfp1JQY/s1600/home.png);
    }
    ul#navixed .about a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpjQpjij11IuIx2cq8O4qsmJ1ua3BtpGp5CY1CQKB6ztYapnpw-ZoPxcKDwNjtlbUfhxtwrdI-KkKcduk7HW_6iDC82bAP4AKutR2uGCC_baQ0c-g3UMnlSlb1qtQzJMposBIDYGXfXFs/s1600/id_card.png);
    }
    ul#navixed .search a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjozoNGQQH9Be3G2BfAg52TdW3uhOy-XoePQSiltuFo5rJ8sgtn5dZlP9PF55i2kojT-K-c7Zk9WNbllcAwfFysTNtMVj6VIRBYkqcmglrd5ozYHl8ur0hmpoEpn4yCsgLdZ9Wvu9e67rU/s1600/search.png);
    }
    ul#navixed .podcasts a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6IEMKxeaSYzbWH6ci4pyXBi05_Inyve_xSMGjbeN7A6_TRWrUi5indGJ9VlLjbvDhe1LmIrxEZEPChV3VvrZuhGUknK7ZqH_CUmBV1Kd4p-EFpQnjLUlwwpvgicFLZQONkvZmtmT_JPY/s1600/ipod.png);
    }
    ul#navixed .rssfeed a   {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYU-PWYpFzpq4OqAenaBF4eby-PpOdUCYSjtBZXtkIqjnpbFBlYp1NfsVUwUe3DecTMM6KMZ28gM6SLR1HKoggKroF6ownDHXLjRuzbD-3F90DeNrXOQhVWQ85CHx4L24eOUPup0Rz8zg/s1600/rss.png);
    }
    ul#navixed .photos a     {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLMlKFRccY9ARndhJCWWp0HdbOQe3F5-GYZu4uvahagqOTYKSI7dNiAjPOIvrdYmpAgzDKUOEg27JtSscXT5DmyX0tq7kTQ3qnDsqNXSeKI3angpBQ8VywVHqZnWslyU2lA0Nxs_2jR_8/s1600/camera.png);
    }
    ul#navixed .contact a    {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_oC1Ue-t2jpgP8Akn7gdvOL2xuMv8VV5MZtmdelDaiaX_jZ34n2CXfLakW0L9a8i7YpRN3ictN8XN33HDYxxiyhI6S-iOp7ESni2EiNa-iZnWm_XgD_ymtgMxDhZAILCBvyA1kq72Su4/s1600/mail.png);
  6. Cari Kode </head> dan letakan script di bawah ni tepat di atasnya
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script src='http://alfiandikha.googlecode.com/files/slide-color.js'/>
    <script type='text/javascript'>
    $(function() {
    var d=300;
    $(&#39;#navixed a&#39;).each(function(){
    $(this).stop().animate({
    &#39;marginTop&#39;:&#39;-80px&#39;
    },d+=150);
    });

    $(&#39;#navixed &gt; li&#39;).hover(
    function () {
    $(&#39;a&#39;,$(this)).stop().animate({
    &#39;marginTop&#39;:&#39;-2px&#39;
    },200);
    },
    function () {
    $(&#39;a&#39;,$(this)).stop().animate({
    &#39;marginTop&#39;:&#39;-80px&#39;
    },200);
    }
    );
    });
    </script>
  7. Ni Script yang terakhir dah cari kode <body> lalu COPAS script di bawah dan letakan tepat di atsa kode ini.
    <ul id='navixed'>
    <li class='home'><a href='URL_LINK_SOBAT'><span>Home</span></a></li>
    <li class='about'><a href='URL_LINK_SOBAT'><span>About</span></a></li>
    <li class='search'><a href='URL_LINK_SOBAT'><span>Search</span></a></li>
    <li class='photos'><a href='URL_LINK_SOBAT'><span>Photos</span></a></li>
    <li class='rssfeed'><a href='URL_LINK_SOBAT'><span>Rss Feed</span></a></li>
    <li class='podcasts'><a href='URL_LINK_SOBAT'><span>Podcasts</span></a></li>
    <li class='contact'><a href='URL_LINK_SOBAT'><span>Contact</span></a></li>
    </ul>

Selesai dah tinggal simpen template dan lihat hasilnya.
Oh ya maz bro,supaya gampang nyari kode ]]></b:skin>,</head>,<body>silahkan tekan F3 atau CTRL+F semoga berhasil.
  1. Biasa kalau mau edit-edit blog harus Log In dolo dong ke blog kita.
  2. Klik Rancangan
  3. Klik Edit HTML
  4. Jangan lupa centang Expand Template Widget
  5. Cari Kode ]]></b:skin> lalu simpan script di bawah ni tepat diatas kode tadi.
    /*----------------
    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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDDq4dWCkJ58LppMybN1-pWBU9WFRdA6zBI8tC0-8XtZWf1Y7mexEoUQ1Ew_M0sNcktS47t1YDIKRG0n_u-GXSFEVikeXEmLTl2ofudb4oAFM23o1v6Y9m1rwDI3uWqGFIPQweNfp1JQY/s1600/home.png);
    }
    ul#navixed .about a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpjQpjij11IuIx2cq8O4qsmJ1ua3BtpGp5CY1CQKB6ztYapnpw-ZoPxcKDwNjtlbUfhxtwrdI-KkKcduk7HW_6iDC82bAP4AKutR2uGCC_baQ0c-g3UMnlSlb1qtQzJMposBIDYGXfXFs/s1600/id_card.png);
    }
    ul#navixed .search a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjozoNGQQH9Be3G2BfAg52TdW3uhOy-XoePQSiltuFo5rJ8sgtn5dZlP9PF55i2kojT-K-c7Zk9WNbllcAwfFysTNtMVj6VIRBYkqcmglrd5ozYHl8ur0hmpoEpn4yCsgLdZ9Wvu9e67rU/s1600/search.png);
    }
    ul#navixed .podcasts a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6IEMKxeaSYzbWH6ci4pyXBi05_Inyve_xSMGjbeN7A6_TRWrUi5indGJ9VlLjbvDhe1LmIrxEZEPChV3VvrZuhGUknK7ZqH_CUmBV1Kd4p-EFpQnjLUlwwpvgicFLZQONkvZmtmT_JPY/s1600/ipod.png);
    }
    ul#navixed .rssfeed a   {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYU-PWYpFzpq4OqAenaBF4eby-PpOdUCYSjtBZXtkIqjnpbFBlYp1NfsVUwUe3DecTMM6KMZ28gM6SLR1HKoggKroF6ownDHXLjRuzbD-3F90DeNrXOQhVWQ85CHx4L24eOUPup0Rz8zg/s1600/rss.png);
    }
    ul#navixed .photos a     {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLMlKFRccY9ARndhJCWWp0HdbOQe3F5-GYZu4uvahagqOTYKSI7dNiAjPOIvrdYmpAgzDKUOEg27JtSscXT5DmyX0tq7kTQ3qnDsqNXSeKI3angpBQ8VywVHqZnWslyU2lA0Nxs_2jR_8/s1600/camera.png);
    }
    ul#navixed .contact a    {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_oC1Ue-t2jpgP8Akn7gdvOL2xuMv8VV5MZtmdelDaiaX_jZ34n2CXfLakW0L9a8i7YpRN3ictN8XN33HDYxxiyhI6S-iOp7ESni2EiNa-iZnWm_XgD_ymtgMxDhZAILCBvyA1kq72Su4/s1600/mail.png);
  6. Cari Kode </head> dan letakan script di bawah ni tepat di atasnya
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script src='http://alfiandikha.googlecode.com/files/slide-color.js'/>
    <script type='text/javascript'>
    $(function() {
    var d=300;
    $(&#39;#navixed a&#39;).each(function(){
    $(this).stop().animate({
    &#39;marginTop&#39;:&#39;-80px&#39;
    },d+=150);
    });

    $(&#39;#navixed &gt; li&#39;).hover(
    function () {
    $(&#39;a&#39;,$(this)).stop().animate({
    &#39;marginTop&#39;:&#39;-2px&#39;
    },200);
    },
    function () {
    $(&#39;a&#39;,$(this)).stop().animate({
    &#39;marginTop&#39;:&#39;-80px&#39;
    },200);
    }
    );
    });
    </script>
  7. Ni Script yang terakhir dah cari kode <body> lalu COPAS script di bawah dan letakan tepat di atsa kode ini.
    <ul id='navixed'>
    <li class='home'><a href='URL_LINK_SOBAT'><span>Home</span></a></li>
    <li class='about'><a href='URL_LINK_SOBAT'><span>About</span></a></li>
    <li class='search'><a href='URL_LINK_SOBAT'><span>Search</span></a></li>
    <li class='photos'><a href='URL_LINK_SOBAT'><span>Photos</span></a></li>
    <li class='rssfeed'><a href='URL_LINK_SOBAT'><span>Rss Feed</span></a></li>
    <li class='podcasts'><a href='URL_LINK_SOBAT'><span>Podcasts</span></a></li>
    <li class='contact'><a href='URL_LINK_SOBAT'><span>Contact</span></a></li>
    </ul>

Selesai dah tinggal simpen template dan lihat hasilnya.
Oh ya maz bro,supaya gampang nyari kode ]]></b:skin>,</head>,<body>silahkan tekan F3 atau CTRL+F semoga berhasil.

Posted in:

0 komentar:

Posting Komentar

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites