Cara Buat menu Seperti Blog Saya



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/AVvXsEh4r3dFJxp-6SZJSpdEbu201j58JSo7_bLIo4j2yg4dr1v2ggeUyarwvvwDfIs3UQjJf_LRGXS63PYCSQVZyrMICGn5_Uc3ytyU8ejoVSj0-6PLEzfaoeSKs4MJiJXMUlJrYgXaPkWYXQg/s1600/home.png);
    }
    ul#navixed .about a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjudZlFXtFYAR7xbW8nVYc9vLLl9goMPhWjgaUfqDvZNt6d5VC_gtBxu13WTJzk6Ek_eXYWDMIj3JZhd27KAX5EbF4ZbSaRLlpmZwKUKfJo4Q92E-iBiQqTnjF6N564YPtGCQmIlOHMvTg/s1600/id_card.png);
    }
    ul#navixed .search a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixYcVwedBtXxQHbXFTLLTexFb0uEWWaQTIjr7C2o1eKM7fffB9wxuyVZZhDG68Y5xCLLXzxCyz_vPUe6AX69kQV8RLHD4Qn0rtVO6DJu7B7U1jUUuIL8Si3yyOAPzGYoL_veuY3QhPEYM/s1600/search.png);
    }
    ul#navixed .podcasts a      {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnjNw4ut8Y0Uvx7mPnUflQCc3vi_1ZCII2iKdSmwbyIG0ZA3RoFDZAWNKsof-X-7dba4XKEzLSp7joQWre0BID6e2EuH2i7llyQ1-ZFli5UTry68CIJa8uqD8NLDmg4KjTeNU3vA2rDMc/s1600/ipod.png);
    }
    ul#navixed .rssfeed a   {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipYh9Qcj0IdhfuJ7w2IU9t_jpquOkWvapbEYLKjpmFrWQ0WuODT4Sfx6NBAFb1mVh57NS4XF99khFXUT59XUp7PLmViAmgDxa07KRHImVbSBogMa1lCwJ1JxYGL_GkD4YrFzUQZAiwXPQ/s1600/rss.png);
    }
    ul#navixed .photos a     {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjce2h1-hKJoJMiGuGCFumeBsdLGmnbYmW0LmU0pWEMy8QOFlbNEdPJPP745Z3JsvXCC5qklJxZaU0LpIJ5nXDPdlTU3jY64roAoNb_7Y7-8senwi2GeQyzGbUg_XIvi3HgIrqGq30apw8/s1600/camera.png);
    }
    ul#navixed .contact a    {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8GQ2MavUEglpmzPIQsbJuOJJAn204Z__K1mYFjK-qy1Lq-PsZ8R7h2544abufCal0QuREk8ooyV6I_otUKKMiYo7JmPS2VuOTX3COM8CS2M6HiFyWiDcoRx2bZDEoLncN2E4ojldND4Y/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.
Kalau mau lihat hasilnya disini juga ada.

Leave a Reply