Cara Membuat Menu Navigasi Dropdown Responsive Valid Amp HTML

Kemarin ada yang minta source kode menu navigasi seperti blog otomologi ini. Sebab itulah,Pada artikel kali ini saya ingin berbagi kode cara membuat navigasi blog amp html dengan fitur dropdown menu yang kalian bisa lihat demonya di blog ini. Menu navigasi ini senaja di buat simple tapi responsive bila di buka di berbagai ukuran layar handphone.Pada ukuran handphone yang lebih kecil menu navigasi ini di buat dropdown.

Menu navigasi yang pertama itu biasa saja karena saya senaja membuatnya supaya mudah di akses penguna.Menurut beberapa blogger pencari Dollar menu yang seperti itu juga yang di Google Adsense.Membuat menu yang mudah dengan menautkan link langsung ke halaman seperti halaman About,Contact,Privacy Policy dan lainya itu salah satunya yang kalian harus buat dulu sebelum Mendaftar ke Google Adsense.

Menu navigasi yang kedua itu adalah menu yang menautkan ke halaman indek post terbaru berdasarkan label.Menu ini sederhana sekali nanun cocok untuk blog minimalais seperti blog otomologi ini yang memakai template Amp html Droidbuzz.Sebenarnya menu ini juga menu bawaan template originalnya tapi saya memodifikasi sedikit untuk tampilan pada handphone skala kecil agar lebih simple lagi menjadi show hide dropdown.

[ Baca Juga : Download Amp HTML Blogger Template Terbaru ]

Jika kalian tertarik ingin mencoba membuat kedua-dua menu diatas untuk blog amp,silakan copy paste saja kodenya di bawah ini.

Cara Membuat Menu Navigasi Dropdown Di Blog Amp.Dua Menu Sekaligus...

Pastekan CSS Kode ini pada template amp di semua halaman,seperti halaman Home page,halaman Posting dan statistis.Untuk penguna template droidbuzz pastekan di semua halaman costum mobile.

/* CSS MENU NAVIGATION START */ .navi{clear:both;text-transform:uppercase;font:bold normal 12px Roboto,Arial,sans-serif;width:100%;padding:0;margin:0 auto;z-index:999} .navi ul{background:#A52A2A;margin:0 auto;padding:0;padding-left:8px;} .navi li{display:inline-block;margin:0 auto} .navi li a{display:block;color:#fff;padding:0 8px;line-height:34px} .navi li a:hover{background-color:#8B0000} .show-menu {background: #A52A2A;text-decoration: none;color: #fff;text-align: left;padding: 5px 2.5px 5px 0px;display: none;} .show-menu svg{padding-right:3px;width:24px;height:24px;vertical-align:-20%} .show-menu span{margin-right: 0.5em;float:right;} #navi input[type=checkbox]{display: none;} #navi input[type=checkbox]:checked ~ #menus {display: block;} .menu{margin:0;padding:0;position:relative;background:#8b0000;border-top:1px solid #ddd} .menu ul{margin:5px;padding:5px;text-align:left;max-width:728px;margin:0 auto} .menu ul li{display:inline-block;margin:5px 0 5px} .menu ul li a{display:block;color:#fff;padding:0 14px;border-right:1px solid#f5f5f5;font-size:13px;text-transform:uppercase;font:bold normal Roboto,Arial,sans-serif;} .menu ul li a:hover{color:#ffce00} .menu-color{background-color:#8B0000} /* CSS MENU NAVIGATION END */

Tambahkan Lagi Kode CSS Agar menu navigasi menjadi responsive,bisa menyesuaikan tampilanya bila di buka di berbagai gadget seperti mobile dan tablate. Berikut kodenya:

@media only screen and (max-width:768px){ .menu ul li a{display:block;color:#fff;padding:0 10px;font-size:12px} } @media only screen and (max-width:640px){ #navi ul {position: static;display: none;} #navi li {border-bottom: 1px solid #333;} #navi ul li{width:48%;float:none;} #navi li a {width:100%;padding:0px;} #navi li a{display:block;height:auto;line-height:34px;} #navi li a {text-align:left;} .menu-color{background:transparent} .show-menu {display:block;line-height:25px;} .menu ul li a{display:block;color:#fff;padding:0 7px;font-size:10px} } @media only screen and (max-width:480px){ .menu ul li a{display:block;color:#fff;padding:0 4px;font-size:8px} }

Setelah itu,tempatkan kode html di bawah ini di bawah tag </header> dan ganti https://otomologi.blogspot.com dengan URL Blog tujuan Kalian Masing-masing

[ Baca Juga : Cara Membuat Daftar Isi Valid Amp Html ]

<!--HTML MENU TEMPATKAN DI BAWAH KODE HEADER-->
<div class='mobile-hide'>
<div class='menu'>
<ul id='menus'>
<li><a href='https://otomologi.blogspot.com' title='Home'>Home</a></li>
<li><a href='https://otomologi.blogspot.my/p/tentang_21.html' title='About'>About</a></li>
<li><a href='https://otomologi.blogspot.my/p/contact.html' title='Contact'>Contact</a></li>
<li><a href='https://otomologi.blogspot.my/p/privacy-policy.html' title='Privacy Policy'>Privacy</a></li>
<li><a href='https://otomologi.blogspot.my/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
<li><a href='https://otomologi.blogspot.my/p/sitemap_15.html' title='sitemap'>Sitemap</a></li>
<li><a href='https://otomologi.blogspot.my/p/advertise-with-otomologi.html' title='Advertise'>Advertise</a></li>
</ul>
</div>
<nav class='navi' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'><ul>
<nav id='navi'>
<label class='show-menu' for='show-menu'><svg viewBox='0 0 24 24'>
<path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' fill='#fff'></path>
</svg>
<span>Show Menu</span></label>
<input autocomplete='off' id='show-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a class='menu-color' href='https://otomologi.blogspot.com/search/label/Tehnologi?&amp;max-results=8'>Tehnologi</a></li>
<li><a href='https://otomologi.blogspot.com/search/label/Otomotif?&amp;max-results=8'>Otomotif</a></li>
<li><a href='https://otomologi.blogspot.com/search/label/Internet?&amp;max-results=8'>Internet</a></li>
<li><a href='https://otomologi.blogspot.com/search/label/Online?&amp;max-results=8'>Online</a></li>
<li><a href='https://otomologi.blogspot.com/search/label/Blog?&amp;max-results=8'>Blogging</a></li>
<li><a href='https://otomologi.blogspot.com/search/label/Android?&amp;max-results=8'>Android</a></li>
<li><a href='https://otomologi.blogspot.com/search/label/Perbaikan?&amp;max-results=8'>Perbaikan</a></li>
<li><a href='https://otomologi.blogspot.com/search/label/Mesin?&amp;max-results=8'>Mesin</a></li>
<li><a href='https://otomologi.blogspot.com/search/label/Peralatan?&amp;max-results=8'>Peralatan</a></li>
<li><a href='https://otomologi.blogspot.com/search/label/Lainya?&amp;max-results=8'>Lainya</a></li>
</ul></nav></ul></nav>
</div>
<div class='clear'></div>
<!--MENU END-->

Untuk demonya silakan lihat blog ini pada versi destop atau paste URL ini di browser kalian https://otomologi.blogspot.com?m=0 . Pada template amp,menu navigasi ini dapat berfungsi dengan baik.Semoga Tutorial cara membuat menu navigasi show hide pada blog amp html ini bisa menbantu kalian yang kebetulan ingin menambah menu navigasi atau membuat baru menu navigasi.Dengan membuat menu navigasi yang mengarah langsung ke halaman page seperti yang sudah di sebutkan tadi kalian juga akan lebih mudah di terima google adsense.

[ Baca Juga : AMP HTML Blogger Template GooampV700 Otomologi ]

Jangan lupa jika merasa artikel ini bermanfaat,bantu kami untuk berbagi artikel ini di media sosial.Silakan juga tingalkan jejak komentar sekiranya terdapat kesalahan kode pada menu ini agar kami bisa memperbaiki.

SHARE

Related Posts