Cara membuat Side NavBar keren dan responsive

January 24, 2021 January 24, 2021

tutlenc.blogspot.com - Hai sahabat tutlenc, kali ini kita akan membagikan cara memasang side bar keren untuk blog kamu.

dalam dunia blogger, menu navigasi sangat dibutuhkan, mungkin bisa dibilangkan diharuskan oleh google, apalagi untuk kamu yang ingin blog kamu cepet keterima oleh google adsense.

pasti kalau tidak isi navigasi yang jelas, akan ada notification : navigasi blog belum ada

Apa saja fungsi Navigasi blog. navigasi ini akan memudahkan pengunjung untuk menemukan isi dari blog kamu. dengan navigasi ini juga kamu akan membuat pembaca akan betah diblog kamu yang tentunya isi artikelnya menarik untuk dibaca. Kadang kalau blog tanpa navigasi yang jelas dan bagus, akan membuat pembaca hanya membaca artikel yang ia cari saat browsing.

itulah beberapa alasan sebuah blog wajib ada menu navigasinya.

Cara membuat sidebar Navigation

1. buka blogger

2. pilih tema blog kamu

3. masuk ke bagian HTML

4. masukkan kode berikut di atas </head> , </style>, </b:skin>

5. masukkan kode berikut di atas </body>

<div id="tutlenc" class="sidenav">
    <div class="author-profile">
      <div class="background"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoFwaom61TnnT3sFi_kKNtnCI76QjH6yWS3KYNrAfmzCFbPWHwveIp9gOls3ZQODD-r4trlZZK_dHhpvyaxfcN3z309VZRcbcz7c9HfPx0GFzsJDx2tIU8LdU68vuS3bjg9WkK3K0Altc/w140-h138-p/kutabeach+gate.png"/></div>
      <div class="author-avatar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodAlkrUbuRVDwZ1Di8rZteHxhWFqXrwfYmvx8J5r-YrFprioP0oCZZreJ-JjuHOyJiCAONd4bP1n106_C8CxibO5PKTFpNxjPsiDodNDMP49myobqZ_6vic0kRwfjHmL1nV209y2AyYoH/s512/tutlenc-avatar.png"/></div>
    <span class="author-title">I Ketut Sunarta</span>
    </div>
    <div id="searching">
    <form action="/search" method="get">
      <input name="q" placeholder="Cari artikel..." type="text" title="Search Content"/>
    </form>
    </div>
    <span class="closebtn"><a onclick="closeSideNav()" title="Close">✕</a></span>
    <ul class="menu">
     <li><a href="https://tutlenc.blogspot.com"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
     <li><a id="submenu-1" href="" onclick="showresponddiv(this.id)"><i class="fa fa-download" aria-hidden="true"></i> Download</a>
     <ul id="opensubmenu-1" class="submenu" style="display: none;">
     <li><a href="https://tutlenc.blogspot.com/2020/08/buku-saku-aksara-bali.html">Buku saku aksara Bali</a></li>
     <li><a href="https://tutlenc.blogspot.com/2021/01/kumpulan-satua-bali.html">kumpulan satua bali</a></li>
     <li><a href="https://tutlenc.blogspot.com/p/ruang-guru.html">Kurikukul Bahasa Bali</a></li>
     </ul>
     </li>
     <li><a id="submenu-2" onclick="showresponddiv(this.id)"><i class="fa fa-list-alt" aria-hidden="true"></i> Label</a>
     <ul id="opensubmenu-2" class="submenu" style="display: none;">
     <li><a href="https://tutlenc.blogspot.com/search/label/kresna dwaja">Bali kuna</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/pengetahuan umum">Pengetahuan umum</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/Pahami diri">Mulat sarira</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/bahasa bali">Basa lan aksara Bali</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/liburan ke bali">Objek Wisata Bali</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/satua bali">Satua Bali</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/guide wisata spiritual">Tirta yatra</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/hubungan">Hubungan</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/cerita fiksi">Cerpen</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/cerita inspiratif">Inspirasi</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/design rumah">Design Rumah Gratis</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/laundry">Kebutuhan Laundry</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/Motivasi">Motivasi</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/sunarta diary">My Diary</a></li>
     <li><a href="https://tutlenc.blogspot.com/search/label/panduan android dan blogspot">Panduan</a></li>
     </ul>
     </li>
     <li><a id="submenu-3" onclick="showresponddiv(this.id)"><i class="fa fa-pencil" aria-hidden="true"></i> Alat Tulis Aksara Bali</a>
     <ul id="opensubmenu-3" class="submenualat">
     <li><a href="https://tutlenc.blogspot.com/p/translate-aksara-bali.html">Translate Latin-Aksara Bali</a></li>
     <li><a href="https://tutlenc.blogspot.com/p/virtual-balikeyboard-unicode.html">Bali Unicode Keyboard</a></li>
     <li><a href="https://tutlenc.blogspot.com/p/virtual-bali-keyboard.html">Balikeyboard</a></li>
     </ul>
     </li>
     <li><a href="https://tutlenc.blogspot.com/p/sitemap.html"><i class="fa fa-sitemap" aria-hidden="true"></i>Daftar Isi Blog</a></li>
     <li><a href="https://tutlenc.blogspot.com/p/privacy-policy.html"><i class="fa fa-paperclip" aria-hidden="true"></i>Privacy Policy</a></li>
    </ul>  
    </div>
    
    
    <script type="text/javascript">
    //<![CDATA[
    function OpenSideNav(){document.getElementById("tutlenc").style.display="block"}
    function closeSideNav(){document.getElementById("tutlenc").style.display="none"}
    function showresponddiv(e){var n=e.replace("submenu-","opensubmenu-"),t=document.getElementById(n);current&¤t!=t&&(current.style.display="none"),"none"==t.style.display?(t.style.display="block",current=t):t.style.display="none"}var current=null;
    //]]>
    </script>

6. Simpan

catatat**

untuk iconnya kamu bisa gunakan link css ini

selamat mencoba

hasilnya bisa kamu lihat gambar di atas, atau diblog ini

untuk kamu yang ingin edit-edit agar hasil lebih sesuai keinginan gunakan

1. notepad ++

2. VsCode

semoga bermanfaat sobat

panduan android dan blogspot