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

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 akan kita bahas dari beberapa referensi yang saya ambil tentang Cara buat Navigasi yang berbeda pada Top atau A Different Top Navigation pada Blogger



Silahkan lihat untuk demo di link  :
http://demo-stylebloggertemplate.blogspot.com/ .

Berikut Cara Sebuah Navigasi yang berbeda-beda bagian atas atau A Different Top Navigation pada 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' type='text/javascript'/>

    Setelah ditambahkan kemudian tambahkan diwahnya Script berikut ini :

    <script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#main-nav li a.main-link&quot;).hover(function(){
            $(&quot;#main-nav li a.close&quot;).fadeIn();
            $(&quot;#main-nav li a.main-link&quot;).removeClass(&quot;active&quot;);                                               
            $(this).addClass(&quot;active&quot;);                                       
            $(&quot;#sub-link-bar&quot;).animate({
                height: &quot;40px&quot;                      
            });
            $(&quot;.sub-links&quot;).hide();
            $(this).siblings(&quot;.sub-links&quot;).fadeIn();
        });
        $(&quot;#main-nav li a.close&quot;).click(function(){
            $(&quot;#main-nav li a.main-link&quot;).removeClass(&quot;active&quot;);                                                                                    
            $(&quot;.sub-links&quot;).fadeOut();
            $(&quot;#sub-link-bar&quot;).animate({
                height: &quot;10px&quot;                      
            });       
            $(&quot;#main-nav li a.close&quot;).fadeOut();
        });
       
       
    });
    </script>


  3. Langkah 3 : Kemudian masukan CSS dibawah ini ke Blog anda ( diatas kode ]]></b:skin> )


    /*--------------------------------------------------
    CSS TOP NAVIGATION
    ---------------------------------------------------*/
    #wrap {
        margin-left: auto;
        margin-right: auto;
        width: 900px;
        position: relative;
    }

    #main-nav {
        margin: 0px 0px 0px 2px;
        text-align: left;
        min-height: 25px;
        padding-top: 10px;
        padding-left: 0px;
    }
    #main-handle {
        width: 605px;
        float: right;
        margin-top: -1px;
    }
    #main-nav li {
        display: inline;
        list-style: none;
    }
    #main-nav li a {
        margin-right: 5px;
        font-size: 15px;
        text-decoration: none;
        color: #f2f2f2;
        font-family: Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        padding: 10px;
        outline: 0;
        position: relative;
        top: -2px;
    }
    #main-nav li a:hover, #main-nav li a.active {
        background: #514539;
    }
    #sub-link-bar {
        background: #514539;
        min-height: 10px;
        border-bottom: #645546 1px solid;
    }
    .sub-links {
        display: none;
        position: absolute;
        width: 100%;
        top: -30px;
        text-align: left;
        left: 0px;
    }
    #main-nav li .sub-links li a:hover{
        background: #2d2620;
    }
    #main-nav li a.close{
        display: none;   
            margin-top: 8px;
        position: absolute;
            background:url(http://lh5.ggpht.com/_HR8egC6j8tg/TEHTPAkPZJI/AAAAAAAAAOE/mvjEVRA-S3I/minus.png) 0px 0px no-repeat;
    }
    #main-nav li a.close:hover{
        display: none;   
            margin-top: 8px;
        position: absolute;
            background:url(http://lh5.ggpht.com/_HR8egC6j8tg/TEHStBuH-BI/AAAAAAAAAOA/HmIDAZ33wYA/plus.png) 0px 0px no-repeat;
    }
    }

    <!--Thanks Spiffy Corners-->
    .round {
        display:block
    }
    .round * {
        display:block;
        height:1px;
        overflow:hidden;
        font-size:.01em;
        background:#645546
    }
    .round1 {
        margin-left:3px;
        margin-right:3px;
        padding-left:1px;
        padding-right:1px;
        border-left:1px solid #443a30;
        border-right:1px solid #443a30;
        background:#56493c
    }
    .round2 {
        margin-left:1px;
        margin-right:1px;
        padding-right:1px;
        padding-left:1px;
        border-left:1px solid #322a23;
        border-right:1px solid #322a23;
        background:#594c3e
    }
    .round3 {
        margin-left:1px;
        margin-right:1px;
        border-left:1px solid #594c3e;
        border-right:1px solid #594c3e;
    }
    .round4 {
        border-left:1px solid #443a30;
        border-right:1px solid #443a30
    }
    .round5 {
        border-left:1px solid #56493c;
        border-right:1px solid #56493c
    }
    .roundfg {
        background:#645546
    }
    /*-- Akhir CSS Top Navigation --*/

  4. Langkah 4 : Masukkan HTML dibawah ini pada blogger, atau pada bagian Body atau dibawah kode <body>

    <div id='sub-link-bar'/>
    <!-- End sub-link-bar -->

    <!-- Top Navigation -->
    <div id='wrap'>
      <div id='main-handle'>
        <div class='roundfg'>
          <ul id='main-nav'>
            <li><a class='main-link' href='http://stylebloggertemplate.blogspot.com'>Home</a>
                <ul class='sub-links'>
                    <li><a class='main-link' href='http://stylebloggertemplate.blogspot.com'>Home</a></li>
                </ul>

            </li>
            <li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Tutorials</a>
              <ul class='sub-links'>
                <li><a href='http://www.reogdesign.co.cc' title='Reog Design'>Design</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/search/label/' title='Tutorial HTML &amp; CSS'>HTML &amp; CSS</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/search/label/Jquery/' title='View all posts filed under HTML &amp; CSS'>Jquery</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tutorial%20Blogger' title='Tutorial Blogger'>Blogger</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/search/label/' title='Tutorial Wordpress'>Wordpress</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tutorial%20Blogger' title='Tutorial PHP'>PHP</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tutorial%20Blogger' title='Tutirial Java Script'>Java Script</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tips%20Trik%20Blogger/' title='Tips &amp; Triks'>Tips &amp; Triks</a> </li>
              </ul>
            </li>

            <li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Articles</a>
              <ul class='sub-links'>
                <li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under General'>General</a> </li>

                <li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Interviews'>Interviews</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under News'>News</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Web Roundups'>Web Roundups</a> </li>
              </ul>
            </li>
            <li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Freebies</a>

              <ul class='sub-links'>
                <li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Books'>Books</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Icons'>Icons</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Lightboxes'>Lightboxes</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Others'>Others</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Plugins'>Plugins</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Themes'>Themes</a> </li>
                <li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Tooltips'>Tooltips</a> </li>
              </ul>
            </li>

            <li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Videos</a>
              <ul class='sub-links'>
                 <li><a href='http://stylebloggertemplate.blogspot.com/' title='Screencasts'>Screencasts</a> </li>
               </ul>
            </li>


            <li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>About</a>
              <ul class='sub-links'>
                 <li><a href='http://stylebloggertemplate.blogspot.com/' title='Screencasts'>Style Blogger Template</a> </li>
                 <li><a href='http://reogdesign.co.cc' title='Screencasts'>Reog Design</a> </li>
               </ul>
            </li>


             <li><a class='close' href='#' title='Click to Collapse'/></li>
          </ul>
        </div>
        <!-- End roundfg -->
        <b class='round'> <b class='round5'/> <b class='round4'/> <b class='round3'/> <b class='round2'><b/></b> <b class='round1'><b/></b></b> </div>

      <!-- End main-handle-->
     </div>
    <!-- End wrap / Akhir Demo Top Navigation -->


  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.
Jika ingin lebih amanya silahkan simpan Java Script jQuery pada hosting anda sendiri dengan cara silahkan buka disini.

Cara buat Navigasi yang berbeda pada Top atau A Different Top Navigation pada Blogger
  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