Cara buat Top Navigasi yang berbeda pada Blogger - A Different Top Navigation

A Different Top Navigation
Dalam tutorial ini kita tetap menggunakan jQuery, sepertihalnya tutorial sebelumnya yang membahas Cara membuat Sexy Vertical Sliding Panel mengggunakan jQuery And CSS3 di Blogger dan Cara membuat Tab Slick menggunakan Java Srcipt jQuery sekarang kita buat Top Menu Navigation yang berbeda dengan istilah A Different Top Navigation, disebut berbeda kerana biasanya menu anak menampilkan sub menu pada bagian bawah, sementara ini submenu akan tampil pada bagian atas.
Download
Berikut Cara membuat Menu Navigasi yang berbeda pada template blogger :
  1. Langkah 1 : Silahkan Login dan masuk pada Edit Blogger kemudian Back Up template.
  2. Langkah 2 : Tambahkan Script jQuery dibawah ini pada bagian <head> atau diatas kode <b:skin><![CDATA[
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

    Kemudian dibawahnya tambahkan Script berikut ini :
    <script type="text/javascript">
    $(document).ready(function(){
        $("#main-nav li a.main-link").hover(function(){
            $("#main-nav li a.close").fadeIn();
            $("#main-nav li a.main-link").removeClass("active");                                                 
            $(this).addClass("active");                                         
            $("#sub-link-bar").animate({
                height: "40px"                       
            });
            $(".sub-links").hide();
            $(this).siblings(".sub-links").fadeIn();
        });
        $("#main-nav li a.close").click(function(){
            $("#main-nav li a.main-link").removeClass("active");                                                                                      
            $(".sub-links").fadeOut();
            $("#sub-link-bar").animate({
                height: "10px"                       
            });        
            $("#main-nav li a.close").fadeOut();
        });
    });
    </script>
  3. Langkah 3 : Kemudian tambahkan CSS dibawah ini diatas kode ]]></b:skin>
    #main-nav{margin:0;padding:0;text-align:left;height:40px}
    #main-handle{width:100%;margin-top:-1px;margin-bottom:20px;float:right}
    .roundfg{background:#645546;width:650px;float:right;border-radius:0 0 5px 5px}
    #main-nav li{display:inline-block;list-style:none}
    #main-nav li a{display:inline-block;margin-right:5px;font-size:15px;text-decoration:none;color:#f2f2f2;text-transform:uppercase;font-weight:700;outline:0;position:relative;line-height:40px;height:40px;padding:0 10px}
    #main-nav li a:hover,#main-nav li a.active{background:#514539;height:40px;line-height:40px}
    #main-nav li:first-child a:hover{border-radius:0 0 0 5px}
    #sub-link-bar{background:#514539;min-height:10px;border-bottom:#645546 1px solid}
    .sub-links{display:none;position:absolute;width:100%;top:-41px;text-align:left;left:0}
    #main-nav li .sub-links li a:hover{background:#2d2620;border-radius:0}
    #main-nav li a.close{display:none;position:absolute;right:0;top:7px;background:#c00;border-radius:30px;height:25px;line-height:25px;font-size:12px}
    #main-nav li a.close:hover{background:#900}
    

  4. Langkah 4 : Masukkan HTML dibawah ini pada blogger, atau pada bagian Body atau dibawah kode <body> :
      <div id="main-handle">
        <div class="roundfg">
          <ul id="main-nav">
            <li><a class="main-link" href="https://www.oke.my.id">Home</a>
                <ul class="sub-links">
                    <li><a class="main-link" href="https://www.oke.my.id">Home</a></li>
                </ul>
            </li>
            <li><a class="main-link" href="https://www.oke.my.id">Tutorials</a>
              <ul class="sub-links">
                <li><a href="https://www.oke.my.id" title="View all posts filed under Design">Design</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under HTML &amp; CSS">HTML &amp; CSS</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Other">Other</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under PHP">PHP</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Ruby">Ruby</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Site Builds">Site Builds</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Tools &amp; Tips">Tools &amp; Tips</a> </li>
                <li class="cat-item cat-item-35"><a href="https://www.oke.my.id" title="View all posts filed under Wordpress">Wordpress</a> </li>
              </ul>
            </li>
            <li><a class="main-link" href="https://www.oke.my.id">Articles</a>
              <ul class="sub-links">
                <li><a href="https://www.oke.my.id" title="View all posts filed under General">General</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Interviews">Interviews</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under News">News</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Web Roundups">Web Roundups</a> </li>
              </ul>
            </li>
            <li><a class="main-link" href="https://www.oke.my.id">Freebies</a>
              <ul class="sub-links">
                <li><a href="https://www.oke.my.id" title="View all posts filed under Books">Books</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Icons">Icons</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Lightboxes">Lightboxes</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Others">Others</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Plugins">Plugins</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Themes">Themes</a> </li>
                <li><a href="https://www.oke.my.id" title="View all posts filed under Tooltips">Tooltips</a> </li>
              </ul>
            </li>
            <li><a class="main-link" href="https://www.oke.my.id">Videos</a>
                <ul class="sub-links">
                <li><a href="https://www.oke.my.id" title="Screencasts">Screencasts</a> </li>
                 </ul>
            </li>
            <li><a class="main-link" href="https://www.oke.my.id">About</a>
                <ul class="sub-links">
                    <li><a href="https://www.oke.my.id" title="About">About</a></li> 
                    <li><a href="https://www.oke.my.id" title="Join Plus">Join Plus</a></li> 
                    <li><a href="https://www.oke.my.id" title="RSS Feeds">RSS Feeds</a></li> 
                    <li><a href="https://www.oke.my.id" title="Submit a Freebie">Submit a Freebie</a></li> 
                    <li><a href="https://www.oke.my.id" title="Terms">Terms</a></li> 
                    <li><a href="https://www.oke.my.id" title="Write a Tutorial">Write a Tutorial</a></li> 
                </ul>
            </li>
            <li><a class="close" title="Click to Collapse" href="#">X</a></li>
          </ul>
        </div>
    </div>
    


  5. Langkah terakhir silahkan Save Tempalte dan lihat hasilnya.
Jika Java Script jQuery sudah ada/terpasang di template maka Java Script pada Langkah 2 tidak perlu ditambahkan kembali.

Baca juga :

3 comments:

  1. tutorial bagus, thank buat Style Blogger Template ...

    ReplyDelete
  2. Bagus nich tutorial ada Referensinya, jadi dengan cara ini saya rasa penulis bisa menghargai karya yang menulisnya, padahal sering orang asal Copy tulisan orang dan mengklaim bahwa tulisan itu adalah tulisannya sendiri.

    Ide yang bagus buat Style Blogger Template, karena telah membuat artikel dengan catatan kaki, seperti skripsi ajach, he he he he

    ReplyDelete

to Top