Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Minggu, 17 Oktober 2010

Penerapan Menu Horizontal Subnav Di Blogspot

Kategori : ,
Penerapan Menu Horizontal Subnav Di Blogspot
Setelah menjelaskan penerapan Menu navigasi Mega Dropdown di blogspot, apakah anda sekalian menemukan kendala? ataukah tidak suka dengan menu dropdown tersebut? Memang Mega Dropdown tersebut menggunakan script yang lumayan banyak dan lumayan juga memberatkan blog anda namun kalau di bandingkan fungsinya mega dropdown tidak bisa kita salahkan sebagai widget pemeberat blog karena keuntungan dan kerugian yang di dapat itu hampir bisa di bilang seimbang menurut saya sendiri.

Mega Dropdown tersebut tidak anda sukai? Baik saya akan memberikan solusinya dengan Horizontal Subnav. Menu Horizontal Subnav ini memang beda dengan Menu Mega Dropdown, apa perbedaanya? link subnav yang di tampilkan oleh Mega Dropdown lebih banyak sedangkan link sub pada Menu Horizontal Subnav ini tidak sebanyak Mega Dropdown. Menu Horizontal Subnav ini juga menggunakan script jquery yang memungkinkan akan memberatkan blog anda namun menurut saya menu yang satu ini tidak memberatkan blog anda soalnya script yang di gunkan tidak terlalu banyak. Coba lihat Screenshout dari menu ini.


Screenshout

Penerapan Menu Horizontal Subnav

Cara Pemasangan :
  1. Login ke blogger

    Penerapan Menu Horizontal Subnav

  2. Masuk ke Rancangan >> Edit HTML

    Penerapan Menu Horizontal Subnav
    Penerapan Menu Horizontal Subnav

  3. masukan kode di bawah ini tepat diatas ]]></b:skin>


    ul#topnav {
    margin: 0; padding: 0;
    float: left;
    height:50px;
    width: 970px;
    list-style: none;
    position: relative;
    font-size: 1.2em;
    background: url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_stretch.gif) repeat-x;
    }
    ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;
    }
    ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
    }
    ul#topnav li:hover { background: #1376c9 url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_active.gif) repeat-x; }
    ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none;
    width: 970px;
    height:50px;
    background: #1376c9;
    color: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    }
    ul#topnav li:hover span { display: block; }
    ul#topnav li span a { display: inline; }
    ul#topnav li span a:hover {text-decoration: underline;}


    Penerapan Menu Horizontal Subnav

  4. Setelah itu cari kode </head> dan tambahkan kode di bawah ini tepat di atasnya


    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    $("ul#topnav li").hover(function() { //Hover over event on list item
    $(this).css({ 'background' : '#1376c9 url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
    $(this).find("span").show(); //Show the subnav
    } , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    $(this).find("span").hide(); //Hide the subnav
    });

    });
    </script>


    Penerapan Menu Horizontal Subnav

  5. Lalu cari kode yang hampir sama seperti kode dibawah ini


    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Oketrik (Header)' type='Header'/>
    </b:section>
    </div>


  6. Kemudian Tambahkan kode di bawah ini ke dalamnya


    <ul id="topnav">
    <li><a href="#">Home</a></li>
    <li>

    <a href="#">About</a>
    <span>
    <a href="#">The Company</a> |
    <a href="#">The Team</a> |
    <a href="#">Careers</a>
    </span>
    </li>

    <li>
    <a href="#">Services</a>
    <span>
    <a href="#">What We Do</a> |
    <a href="#">Our Process</a> |
    <a href="#">Testimonials</a>
    </span>

    </li>
    <li>
    <a href="#">Portfolio</a>
    <span>
    <a href="#">Web Design</a> |
    <a href="#">Development</a> |
    <a href="#">Identity</a> |
    <a href="#">SEO & Internet Marketing</a> |
    <a href="#">Print Design</a>

    </span>
    </li>
    <li><a href="#">Contact</a></li>
    </ul>


  7. Setelah di tambahkan kode akan menjadi seperti di bawah ini


    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Oketrik (Header)' type='Header'/>
    </b:section>

    <ul id="topnav">
    <li><a href="#">Home</a></li>
    <li>

    <a href="#">About</a>
    <span>
    <a href="#">The Company</a> |
    <a href="#">The Team</a> |
    <a href="#">Careers</a>
    </span>
    </li>

    <li>
    <a href="#">Services</a>
    <span>
    <a href="#">What We Do</a> |
    <a href="#">Our Process</a> |
    <a href="#">Testimonials</a>
    </span>

    </li>
    <li>
    <a href="#">Portfolio</a>
    <span>
    <a href="#">Web Design</a> |
    <a href="#">Development</a> |
    <a href="#">Identity</a> |
    <a href="#">SEO & Internet Marketing</a> |
    <a href="#">Print Design</a>

    </span>
    </li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>


  8. Pada langkah no 5-7 itu adalah bagaimana memasangkan kode tersebut langsung pada template anda tanpa menambahkan widget, namun kalau cara tersebut kurang efektif atau mengalami kesulitan silahkan jangan menggunakan cara tersebut.
  9. Setelah langkah no 4 telah dilakukan, simpan template sobat dan menuju ke elemen halaman
  10. Pada elemen Halaman tambahkan sebuah gadget yang letaknya di bawah header (kalau belum ada, anda bisa menambahkannya dengan tutorial yang satu ini >> Menambahkan elemen baru)
  11. Pilih yang HTML/javascript dan masukan kode di bawah ini kedalamnya


    <ul id="topnav">
    <li><a href="#">Home</a></li>
    <li>

    <a href="#">About</a>
    <span>
    <a href="#">The Company</a> |
    <a href="#">The Team</a> |
    <a href="#">Careers</a>
    </span>
    </li>

    <li>
    <a href="#">Services</a>
    <span>
    <a href="#">What We Do</a> |
    <a href="#">Our Process</a> |
    <a href="#">Testimonials</a>
    </span>

    </li>
    <li>
    <a href="#">Portfolio</a>
    <span>
    <a href="#">Web Design</a> |
    <a href="#">Development</a> |
    <a href="#">Identity</a> |
    <a href="#">SEO & Internet Marketing</a> |
    <a href="#">Print Design</a>

    </span>
    </li>
    <li><a href="#">Contact</a></li>
    </ul>


  12. Setelah itu simpan

Penerapan Menu Horizontal Subnav Di Blogspot ini diharapkan dapat bermanfaat bagi kalian. Script dan kode - kode saya dapatkan dari sohtanaka, seorang web designer asal luar negeri. Mungkin itu saja yang bisa saya sampaikan kepada anda. Terima kasih dan Happy Blogging.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

4 Komentar untuk Penerapan Menu Horizontal Subnav Di Blogspot

keren nih, thank sob...kapan2 bisa dicoba nih

wah... ganti template bro....? mantabbs lah...
subnav yang keren... mungkin gue bakal menerapkannya....
nice info.....

si gan, langsung terapkan aja coz g terlalu berat dan nice juga tuh :)