Cara Membuat Menu Navigasi Responsive di Atas Header
Hello, kalau anda pernah mengunjungi blog saya maka akan terlihat perubahan, yakni perubahan pada template. Saya jarang membuat artikel dikarenakan sedang membuat sebuah template yang nantinya saya akan terapkan pada blog saya. Kini template yang saya buat tersebut sudah saya terapkan pada blog saya. Nantinya kalo banyak yang minat, template ini akan saya bagikan. Ok langsung saja ke intinya, ketika anda meliat blog saya, maka akan terlihat Menu Navigasi. Menu Navigasi adalah menu yang wajib ada disetiap template, karena menu ini berguna ketika mendaftar Adsense. Jika tidak ada menu navigasi ini, maka akan tertolak oleh Google Adsense. Para blogger biasa menggunakannya untuk meletakkan form halaman khusus misalnya contact us. Menu Navigasi yang saya bagikan kali ini sangat responsive baik versi desktop maupun versi mobile. Menu ini akan menyesuaikan dengan perangkat yang anda gunakan. Saya sendiri sudah mendesain menu ini seminimalis mungkin agar super responsive. Ok, langsung saya ke proses pembuatan.
Cara Membuat Menu Navigasi Responsive di Atas Header
Cara Pertama :
1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema.
3. Edit HTML.
Proses Pembuatan :
1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
/*Top Menu Navigasi */
.menu-wrapper {background:#374760;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:5px;border-radius:2px;}
.top-menu {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menu li a {position:relative;font-family:'Open Sans Condensed';font-size:16px;font-weight:400;background-color:transparent;color:#fff;display:block;margin:5px;padding:8px 12px;line-height:100%;transition:color 0.3s;height:20px;border-radius:4px;}
.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menu ul li a:hover {background:#36a7f2;color:#fff;border-radis:2px;text-decoration:none;}
.top-menu li.socialwrap {float:right;}
.top-menu li.socialwrap a i{text-align:center;color:#fff;transition:initial;}
.top-menu li.socialwrap a:hover{background:#36a7f2;color:#fff;}
.top-menu li.socialwrap.pinterest {border-right:0;}
.top-menu a#pull {display:none;}
@media only screen and (max-width:768px) {
.menu-top li ul { background:#222222; border:none; box-shadow:none; }
.menu-wrapper {margin:0;border:1px solid #e6e6e6;}
.top-menu {display:block;width:100%;padding:0}
.top-menu ul {text-align:center;}
.top-menu ul {display:none;height:auto;}
.top-menu a#pull{height:30px;color:#fff;display:inline-block;font-family:"Open Sans";font-size:12px;font-weight:700;padding:10px;position:relative;text-align:center;font-size:20px;width:100%;float:left;}
.top-menu a#pull:before{content: '\f0c9';font-family: FontAwesome;font-style: normal;font-weight: bold;text-decoration: none;font-size: 30px;color: #999;display: inline-block;position: absolute;left: 15px;top: 20%;}
.top-menu a#pull:hover{background:transparent}
.top-menu li {display:block;width:50%;text-align:left;border-right:none;}
.top-menu li a {padding:15px 20px;display:block;}
.top-menu li a:hover, nav a:active {background:#ef4824;border:none;color:#fff;}
.top-menu ul li a:hover {background:#36a7f2;color:#fff;border-radius:4px;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}
@media only screen and (max-width: 480px)
.top-menu a#pull {
height:35px;
}
@media only screen and (max-width:640px) {
.menu-wrapper {margin:0 auto 20px auto;border-radius: 4px;}
}
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}4. Copy & Paste kode berikut ini, dan letakkan diatas kode <header id='header-wrapper'> , </header> , <div class='header-wrapper'>
<div class='menu-wrapper'>
<nav class='top-menu'>
<ul>
<li><a href='/p/blog-page_51.html' title='Contact us'><i class='fa fa-envelope'/> CONTACT US</a></li>
<li><a href='/p/daftar-isi-postingan.html' title='Sitemap'><i class='fa fa-list'/> SITEMAP</a></li>
<li><a href='/p/disclaimer.html' title='Disclaimer'><i class='fa fa-check-circle'/> DISCLAIMER</a></li>
<li><a href='/p/privacy-policy.html' title='Privacy Policy'><i class='fa fa-unlock-alt'/> PRIVACY POLICY</a></li>
<li><a href='###' title='Advertisement'><i class='fa fa-gg-circle'/> ADVERTISEMENT</a></li>
<li><a href='/p/partner_3.html' title='My Partner'><i class='fa fa-external-link'/> LINK PARTNER</a></li>
</ul>
<a href='#' id='pull'>MENU</a>
</nav></div>6. Copy & Paste kode berikut ini, dan letakkan diatas kode </head> atau </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>Demikian Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage anda, menu tersebut udah muncul atau belum. . Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Menu Navigasi Responsive di Atas Header
Related Post
0 Response to "Cara Membuat Menu Navigasi Responsive di Atas Header"
Post a Comment