Guest Book UT24-WEB.INFO Silahkan Tinggalkan Jejak Disini, Tapi Ingat Jagalah Kesopanan...!!
.:: Happy Blogging ::.

Cara Membuat Navigasi Dropdwon Menu Unik Style Kompas


Cara Membuat Navigasi Dropdwon Menu Unik Style Kompas - Dalam postingan kali ini Saya akan share tetang Cara Membuat Dropdown Menu dengan gaya seperti pada Web Kompas.com. Navigasi Dropdown memang banyak digemari oleh para blogger karena dropdown dapat menghemat banyak tempat dan menyediakan banyak tempat untuk berbagai kate gori. Navigasi yang akan kita buat seperti pada gambar dibawah ini.



Berikut cara Memasang Menu Navigasi Ala Kompas.com
  1. Login Ke blogger anda
  2. Masuk ke halaman Edit HTML dengan cara, Dari dashboard pilih Template --> Edit HTML --> Proses/lanjutkan
  3. Download Lengkap Template  blog terlebih dahulu untuk antisipasi kesalahan
  4. Sekarang Cari Kode ]]></b:skin> (Gunakan CTRL + F dan F3 untuk mempermudah pencarian)
  5. Setelah Ketemu Copas kode berikut dan letakan diatas kode ]]></b:skin>
  6.  .nav {
    height:35px;
    background: url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif) repeat-x;
    position:relative;
    font-family:arial, verdana, sans-serif;
    font-size:11px;
    width:100%;
    z-index:100;
    margin:0;
    padding:0;
    }
    .nav .table {
    display:table;
    margin:0 auto;
    }
    .nav .select,
    .nav .current {
    margin:0;
    padding:0;
    list-style:none;
    display:table-cell;
    white-space:nowrap;
    }
    .nav li {
    margin:0;
    padding:0;
    height:auto;
    float:left;
    }
    .nav .select a {
    display:block;
    height:35px;
    float:left;
    font-weight:bold;
    background: url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif);
    padding:0 30px 0 30px;
    text-decoration:none;
    line-height:35px;
    white-space:nowrap;
    color:#2b3238;
    }

    .nav .select a:hover,
    .nav .select li:hover a {
    background: url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif);
    padding:0 0 0 15px;
    cursor:pointer;
    color:#2b3238;
    }
    .nav .select a b{
    font-weight:bold;
    }
    .nav .select a:hover b,
    .nav .select li:hover a b {
    display:block;
    float:left;
    padding:0 30px 0 15px;
    background:url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif) right top;
    cursor:pointer;
    }
    .nav .select_sub {
    display:none;
    }
    /* IE6 only */
    .nav table {
    border-collapse:collapse;
    margin:-1px;
    font-size:1em;
    width:0;
    height:0;
    }
    .nav .sub {
    display:table;
    margin:0 auto;
    padding:0;
    list-style:none;
    }
    .nav .sub_active .current_sub a,
    .nav .sub_active a:hover {
    background:transparent;
    color:#2b3238;
    }
    .nav .select :hover .select_sub,
    .nav .current .show {
    display:block;
    position:absolute;
    width:100%;
    top:35px;
    background:url(http://1.bp.blogspot.com/-ha6EhdiZxBI/Ti1qXa6bmsI/AAAAAAAAE1c/A7NU-qQ_-Ls/s1600/back.gif);
    padding:0;
    z-index:100;
    left:0;
    text-align:center;
    }
    .nav .current .show {
    z-index:10;
    }
    .nav .select :hover .sub li a,
    .nav .current .show .sub li a {
    display:block;
    float:left;
    background:transparent;
    padding:0 10px 0 10px;
    margin:0;
    white-space:nowrap;
    border:0;
    color:#2b3238;
    }
    .nav .current .sub li.sub_show a {
    color:#2b3238;
    cursor:default;
    }
    .nav .select .sub li a {
    font-weight:normal;
    }
    .nav .select :hover .sub li a:hover,
    .nav .current .sub li a:hover {
    visibility:visible;
    color:#73a0d2;
    }
    <!--[if IE]>
    .nav ul {display:inline-block;}
    .nav ul {display:inline;}
    .nav ul li {float:left;}
    .nav {text-align:center;}
    .nav .select a:hover b,
    .nav .select li:hover a b {float:none;}
    <![endif]-->
  7. Jika sudah cari salah satu kode dibawah ini
  8. <div id='header-wrapper'>  
    .............
    </b:section>
        </div>

    Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini

    <div class='header-outer'>
        ...............................
    </b:section>
        </div>
  9. Jika salah satu kode diatas sudah ketemu Copas kode berikut dan letakan disalah satu kode tersebut
  10. <div class="nav">
    <div class="table">
    <ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    </ul>
    </div>
    </li>
    </ul>
    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    </ul>
    </div>
    </li>
    </ul>

    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    </ul>
    </div>
    </li>
    </ul>

    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    </ul>
    </div>
    </li>
    </ul>
    </div>
    </div>
  11. Silahkan menu Navigasi Dropdown diisi sesuai dengan kebutuhan.
  12. Terakhir Klik Simpan Template dan lihat hasilnya
  13. Selesai
Demikian Cara Membuat Navigasi Dropdwon Menu Unik Style Kompas. Selamat mencoba and Thanks !.

Original Posted by : ADMIN

Komentar anda sangat membantu perkembangan blog ini!!


Share this article now with your friends !

Posted by : Alfon Ritonga ~ / Tuorial , Tips Trik , Gadget , SEO

Artikel Cara Membuat Navigasi Dropdwon Menu Unik Style Kompas diposting oleh Alfon Ritonga pada . Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging

+ Create Comment + 2 Responses so far.

9 September 2013 02.13

keren lho mas>>

jangan lupa kunjungi kumpulanilmupengetahuann@blogspot.com

16 Desember 2014 09.06

hebat banget,,,,,,lihat kami juga di hubbizul.blogspot.com

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Leave a comment

Get Update Via E-Mail

Cukup Masukkan alamat email Anda untuk berlangganan di blog ini dan menerima pemberitahuan artikel terbaru melalui email anda. Bergabunglah dengan 245 pengikut lainnya...!



 

Copyright © - Tutorial Blogspot / All Rights Reserved.
Copyright © 2012 -