Cara Membuat Menu Slide Out Navigation

Posted on
  • 28 April 2011
  • by
  • Alfiandika Nmp
  • in
  • Label:

  • 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(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);
    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.


    6 komentar:

    Devil-404 mengatakan...

    ijin nyoba gan... :D tx dah share :)

    alfiandika mengatakan...

    @Devil-404 sipp maz bro,eh bkanya maz bro dah tau...?

    wawasan dunia mengatakan...

    sob lok buat About Me yang di samping ini gimana?

    Widget Tampil di Homepage mengatakan...

    wah, menunya keren.. kapan" saya coba gan

    Hendrik mengatakan...

    sy udh cb ko gak brhasil bro...http://hendrikhamzah.blogspot.com/

    alfiandika n.m.p mengatakan...

    @Hendrik bisa atuh gan,yg lainnya ja dah pada jd.
    mngkin salah naro yg di script bodynya,kan ada banyak tuh.
    cari yg pas.

    semangat gan,ayo coba lagi.

    Posting Komentar

    Yang dah mampir di Blog Ane Jangan Lupa ninggalin KOmen ea gan.

     
    (◕‿-) Designer By Alfiandika Nur Muhammad Putra
    Sponsored By Blog Newb1e