Cara Menciptakan Sajian Navigasi Responsif Di Blog

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

Teknik Membuat Menu Navigasi di Blog

Sudah usang tampaknya tidak memposting sesuatu yang berhubung dengan Teknik Membuat Menu Navigasi Responsif di Blog

Disini kita akan membuat 2 macam sajian navigasi, yang satu ialah sajian navigasi yang simple.

Menu navigasi yang simple ini elok untuk sajian navigasi yang berada di atas header blog, yang isinya wacana halaman about, disclaimer, dll.

Dan yang kedua ialah sajian navigasi drop down.

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

Nah pada postingan kali ini kita spesialuntuk membuat sajian navigasi yang simple saja, yang cocok untuk ditempatkan di atas header.

Untuk membuat sajian navigasi drop down, saya akan mengulasnya di postingan selanjutnya, sebab jikalau disatukan tutorial ini akan menjadi panjang sekali.

Teknik Memasang Menu Navigasi di Blog

Pergi ke blogger > template > edit html.

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

Jika sudah ketemu, salin dan tempel isyarat diberikut 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 penggalan 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 sajian */ 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 sajian */ 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 sajian */   }   /* set the sajian 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 sajian icon */   }      nav input {z-index:4} /* always place the checkbox above the label element */   /* highlight the label element and show the sajian if the checkbox is checked */   nav input:checked + label {color:black}   nav input:checked   ul {display:block} } /*asli script from dte.web.id, thx to him*/

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

Salin dan tempel isyarat diberikut di atasnya.

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

Dan jadinya akan menjadi menyerupai ini jikalau di layar lebar.

Dan ini jikalau di layar yang sempit.

Demo

Untuk sajian navigasi drop down akan dibahas di postingan selanjutnya.

Mungkin sekian dari postingan kali ini, terimakasih sudah mengunjungi blog aku, dan biar bermanfaa.

Silakan untuk berkomentar.