Cara Membuat Menu Navigasi di Bawah Header Blog - Hallo sahabat Situs Pendidikan Masa Kini - Patih Akbar, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Menu Navigasi di Bawah Header Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Internet, Tutorial Blog Untuk Pemula, yang kami tulis ini dapat anda pahami. dengan mudah, selamat membaca.

Judul : Cara Membuat Menu Navigasi di Bawah Header Blog
link : Cara Membuat Menu Navigasi di Bawah Header Blog

Cara Membuat Menu Navigasi di Bawah Header Blog

Masih di tutorial Blog untuk pemula , pada pertemuan kali ini Saya ingin memberikan tip dan bagaimana cara memasang menu navigasi di bawah header.

Baca juga : Membuat menu navigasi diatas header

Navigasi dibawah Header

1. Cara memasang Menu Navigasi di bawah Header
2. Login ke Akun Blog Anda
3. Pilih TEMPLATE > EDIT TEMPLATE
4. Cari kode ]]></b:skin> atau </style>
Kemudian Copy kode dibawah ini diatas ]]></b:skin> atau </style>

#menu{background:#464646;color:#eee;height:35px;}
    #menu ul,#menu li{margin:0;padding:0;list-style:none}
    #menu ul{height:35px}
    #menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
    #menu li a{color:#ccc}
    #menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
    #menu li:hover > a,#menu li a:hover{color:#fff}
    #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
    #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
    #menu label span{font-size:13px;position:absolute;left:35px}
    #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
    #menu ul.menus a{color:#333}
    #menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
    #menu li:hover ul.menus{display:block}
    #menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
    #menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
    #menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
    #menu ul.menus a:hover{background:#BABABA;}
    #menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}

5. Kemudian tambahkan juga kode CSS responsive di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>.

    @media screen and (max-width: 768px){
    #menu{position:relative}
    #menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
    #menu ul.menus{width:100%;position:static;border:none}
    #menu li{display:block;float:none;width:auto;text-align:left}
    #menu li a{color:#fff}
    #menu li a:hover{color:#333}
    #menu li:hover{background:#BABABA;color:#333;}
    #menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
    #menu ul.menus a{background:#BABABA;}
    #menu ul.menus a:hover{background:#fff;}
    #menu input,#menu label{position:absolute;top:0;left:0;display:block}
    #menu input{z-index:4}
    #menu input:checked + label{color:white}
    #menu input:checked ~ ul{display:block}
    }

6. Kemudian Anda Copy kode dibawah ini di bawah </header>

<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>Navigation</span></label>
<ul>
<li><a href='/' title="Home">Home</a></li>
<li><a href='#' title="Menu 1">Menu 1</a></li>
<li><a class='prett' href='#' title="Drop Menu">Drop Menu</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu3">Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title="Menu 2">Menu 2</a></li>
<li><a class='prett' href='#' title="Drop Menu1">Drop Menu 1</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu 1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu 2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu 3">Drop Menu 3</a></li>
</ul>

7. Simpan Template Anda.
Selamat mencoba semoga sukses.....

Demikianlah Artikel Tentang Cara Membuat Menu Navigasi di Bawah Header Blog

Semoga dengan membaca artikel Cara Membuat Menu Navigasi di Bawah Header Blog ini, bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel kami yang lainnya. Dan jangan lupa di share yaa

Anda sekarang membaca artikel Cara Membuat Menu Navigasi di Bawah Header Blog dengan alamat link https://patihakbar.blogspot.com/2016/04/cara-membuat-menu-navigasi-di-bawah.html