Cara Menciptakan Hidangan Navigasi Responsif Di Blog

Sudah usang tampaknya tidak memposting sesuatu yang berhubung dengan blog hehe. Pada postingan kali ini kita akan membahas perihal bagaimana cara menciptakan hidangan navigasi di blog, hidangan navigasi yang akan dibahas di sini ialah hidangan navigasi yang responsive yang artinya ukuran hidangan navigasi tersebut sanggup menyesuaikan ukurannya dengan lebar browser. Berikut kita bahas.

Cara Membuat Menu Navigasi di Blog

Disini kita akan menciptakan 2 macam hidangan navigasi, yang satu ialah hidangan navigasi yang simple.

Menu navigasi yang simple ini cantik untuk hidangan navigasi yang berada di atas header blog, yang isinya perihal halaman about, disclaimer, dll.

Dan yang kedua ialah hidangan navigasi drop down.

Menu navigasi drop down ini cantik untuk diisi perihal kategori-kategori yang dibahas pada blog kita, contohnya perihal komputer, android, dan lain-lain.

Nah pada postingan kali ini kita hanya menciptakan hidangan navigasi yang simple saja, yang cocok untuk ditempatkan di atas header.

Untuk menciptakan hidangan navigasi drop down, aku akan membahasnya di postingan selanjutnya, alasannya ialah bila disatukan tutorial ini akan menjadi panjang sekali.

Cara Memasang Menu Navigasi di Blog

Pergi ke blogger > template > edit html.

Cari isyarat <header id="headerblog" atau <div id="header-wrapper" atau bila tidak ada sanggup mencari isyarat yang homogen menyerupai isyarat tersebut yang membuktikan bab header dari suatu template blog.

Jika sudah ketemu, salin dan tempel isyarat berikut di atasnya.

 <nav>     <input type="checkbox">     <label>&equiv;</label>     <ul>         <li><a href="#">Home</a></li>         <li><a href="#">About</a></li>         <li><a href="#">Archive</a></li>         <li><a href="#">Contact</a></li>     </ul> </nav>

Lalu cari isyarat <style> atau <b:skin> atau bab template yang isinya sebagai css.

Salin kemudian tempel isyarat dibawah ini di dalamnya.

 * {   margin:0;   padding:0; } /*horizontal navigation: define the navigation font and basic background */ nav {   background-color:white;   font:normal bold 11px Arial,Sans-Serif;   color:gray;   height:30px; } /* lists: remove the nested list margin, padding & bullets */ nav ul, nav li {   margin:0 0;   padding:0 0;   list-style:none; } /* navigation height */ nav ul {height:30px} /* inline layout hidangan */ nav li {   float:left;   display:inline; } /* the anchor */ nav a {   display:block;   line-height:30px;   padding:0 14px;   text-decoration:none;   color:black; } /* hover state hidangan */ nav a:hover {background-color:#39f} /* checkbox element: for mobile navigation button */ nav input {   display:none;   margin:0 0;   padding:0 0;   width:30px;   height:30px;   opacity:0;   cursor:pointer; } /* for visual purpose */ nav label {   display:none;   font-size:200%;   width:30px;   height:30px;   /* center vertically and horizontally */   line-height:30px;   text-align:center; } /* MOBILE NAVIGATION */ @media (max-width:767px) {   nav {     /* we want to absolute positioning the menu, checkbox and label element to its parent, so this is needed */     position:relative;   }   nav ul {     background-color:white;     position:absolute;     top:100%;     right:0;     left:0;     height:auto;     display:none; /* hide the hidangan */   }   /* set the hidangan as a block list item */   nav li {     display:block;     float:none;     width:auto;   }   /* now show the checkbox and label element in mobile device */   nav input,   nav label {     position:absolute;     top:0;     right:0;     display:block; /* show the hidangan icon */   }      nav input {z-index:4} /* always place the checkbox above the label element */   /* highlight the label element and show the hidangan if the checkbox is checked */   nav input:checked + label {color:black}   nav input:checked   ul {display:block} } /*original script from dte.web.id, thx to him*/

Selanjutnya cari bab </body> atau scroll ke bawah sampai akhir, nanti niscaya akan ketemu isyarat tersebut.

Salin dan tempel isyarat berikut di atasnya.

 <script type="text/javascript">  window.onresize = function() {     document.getElementsByTagName('h1')[0].style.display = "none"; };  </script>

Dan balasannya akan menjadi menyerupai ini bila di layar lebar.

Dan ini bila di layar yang sempit.

Demo

Untuk hidangan navigasi drop down akan dibahas di postingan selanjutnya.

Mungkin sekian dari postingan kali ini, terimakasih telah mengunjungi blog saya, dan biar bermanfaat.

Silakan untuk berkomentar.

Share this post