Hello, bila anda pernah mengunjungi blog aku maka akan terlihat perubahan, yakni perubahan pada template. Saya jarang menciptakan artikel dikarenakan sedang menciptakan sebuah template yang nantinya aku akan terapkan pada blog saya. Kini template yang aku buat tersebut sudah aku terapkan pada blog saya. Nantinya kalo banyak yang minat, template ini akan aku bagikan. Ok pribadi saja ke intinya, saat anda meliat blog saya, maka akan terlihat Menu Navigasi. Menu Navigasi ialah hidangan yang wajib ada disetiap template, alasannya ialah hidangan ini berkhasiat saat mendaftar Adsense. Jika tidak ada hidangan navigasi ini, maka akan tertolak oleh Google Adsense. Para blogger biasa menggunakannya untuk meletakkan form halaman khusus contohnya contact us. Menu Navigasi yang aku bagikan kali ini sangat responsive baik versi desktop maupun versi mobile. Menu ini akan menyesuaikan dengan perangkat yang anda gunakan. Saya sendiri sudah mendesain hidangan ini seminimalis mungkin semoga super responsive. Ok, pribadi aku 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 arahan ]]></b:skin> atau </style>
2. Copy & Paste arahan 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 arahan 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 arahan berikut ini, dan letakkan diatas arahan </head> atau </body>
<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, hidangan tersebut udah muncul atau belum. . Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Menu Navigasi Responsive di Atas Header
Komentar