Kamis, 17 Agustus 2017

Cara Membuat Sidebar Navigation


Sidebar adalah sekumpulan dari beberapa kolom yang masing-masing memiliki link navigasi untuk menuju ke suatu alamat tertentu. Sama halnya dengan sebuah menu bar atau istilah lainnya yaitu top bar. Cuma perbedaan dari menu bar tersebut adalah letak dari side bar itu sendiri.

Jika menu bar biasanya terletak pada bagian atas, atau berada di bagian header blog. Maka side bar ini terletak pada bagian samping halaman, baik pada samping kiri maupun samping kanan.

Kesempatan kali ini, Amirs ID akan memberikan tutorial Cara Membuat Sidebar Navigation yaitu sebuah menu navigasi yang terletak pada bagian kiri halaman. Pada dasarnya sidebar ini sudah tersedia pada template bawaan blogger yang baru, namun bagi kalian yang sudah nyaman dengan template saat ini namun hanya ingin mencantumkan fasilitas sidebar tersebut, kalian perlu untuk mengikuti langkah-langkah berikut ini.



Cara Membuat Sidebar Navigasi

1. Silahkan masuk terlebih dahulu ke akun blog kalian di www.blogger.com 
2. Klik pada menu Template > Edit HTML
3. Silahkan kalian cari kode </head> dengan cara Ctrl+F
4. Masukkan kode CSS dibawah ini tepat berada di atas kode </head>
 <style type="text/css">
.showmenu{font-size:25px;cursor:pointer;position:fixed;z-index:999;top:5%;left:2%}
/*Main Nav*/
.sidenav{height:100%;width:100%;position:fixed;z-index:9999;top:0;left:0;background-color:#fafafa;overflow-x:hidden;transition:0.5s;max-width:250px;display:none}
/*Close Menu*/
.sidenav .closebtn{position:absolute;top:9px;left:0;padding:7px 0 0 10px;line-height:1}
.sidenav .closebtn a{color:white;font-size:25px;line-height:0}
/*From Search*/
#searching{position:absolute;top:0;right:5px;padding:8px 8px 0 0}
#searching form{margin:0;padding:0}
#searching form input{border:0;border-radius:3px;padding:5px 8px;width:60%;float:right;opacity:0.5}
#searching form input:focus{width:90%}
#searching form:after{content:"f002";font-family:FontAwesome;position:absolute;right:8px;padding:5px;color:#44443380}
/*Author*/
.author-profile{width:100%;max-width:250px;position:relative}
.background img{width:100%;height:100%}
.author-avatar,.author-title{text-align:center;margin:0 auto;position:absolute}
.author-avatar{width:100%;height:70px;bottom:70px}
.author-avatar img{width:100%;max-width:70px;height:auto}
.author-title{bottom:40px;color:#fafafa;width:100%}
@media screen and (max-width:230px){#searching{right:0}#searching form:after{content:''}#searching form input{width:80%}.author-avatar{bottom:20px}.author-avatar img{max-width:50px}.author-title{bottom:15px}}
/*Main Menu*/
.sidenav ul.menu{margin:0;padding:0;font-size:15px}
@media screen and (max-width:250px){.sidenav ul.menu{font-size:12px}}
.sidenav ul.menu li i{padding-right:5px}
.sidenav ul.menu li a{padding:8px 8px 8px 15px;text-decoration:none;color:#716e6e;display:block;transition:0.3s;background:#fafafa}
/*Submenu*/
.sidenav ul.menu li ul.submenu{display:none;margin:0;padding:0}
.sidenav ul.menu li ul.submenu li a{background:#4d5151;color:#bbb;padding-left:35px}
.sidenav a:hover,.offcanvas a:focus{color:#f1f1f1}
/*Social Media*/
.sosmed{position:fixed;width:100%;text-align:center;padding:10px 0;background:white;font-size:25px;max-width:250px;bottom:0;left:0;border-top:2px solid #9c9999}
.sosmed span.facebook a{color:#3b5999}
.sosmed span.twitter a{color:#55acee}
.sosmed span.google a{color:#dd4b39}
.sosmed span.hidesosmed a{color:#de2fd6}
</style> 

5. Kemudian, carilah kode </body>
6. Tambahkan kode HTML dibawah ini tepat berada di atas kode </body>
<div id="AmirsIDSideNav" class="sidenav">
<div class="author-profile">
  <div class="background"><img src="https://image.freepik.com/free-vector/city-background-design_1300-365.jpg"/></div>
  <div class="author-avatar"><img src="https://image.ibb.co/je5iBa/myAvatar.png"/></div>
<span class="author-title">AMIRS ID</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 href="javascript:void(0)" onclick="closeSideNav()" title="Close Menu">&#x2715;</a></span>
<ul class="menu">
 <li><a href="https://www.amirsyarifuddin.tk"><i class="fa fa-inbox" aria-hidden="true"></i> Inbox</a></li>
 <li><a href="https://www.amirsyarifuddin.tk"><i class="fa fa-paper-plane" aria-hidden="true"></i> Outbox</a></li>
 <li><a id="submenu-1" href="javascript:void(0)" onclick="showresponddiv(this.id)"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Submenu1</a>
 <ul id="opensubmenu-1" class="submenu" style="display: block;">
 <li><a href="#">Submenu1</a></li>
 <li><a href="#">Submenu2</a></li>
 <li><a href="#">Submenu3</a></li>
 </ul>
 </li>
 <li><a href="#"><i class="fa fa-camera" aria-hidden="true"></i> Camera</a></li>
 <li><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i> Picture</a></li>
 <li><a href="#"><i class="fa fa-video-camera" aria-hidden="true"></i> Video</a></li>
 <li><a id="submenu-2" href="javascript:void(0)" onclick="showresponddiv(this.id)"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Submenu2</a>
 <ul id="opensubmenu-2" class="submenu">
 <li><a href="#">Submenu1</a></li>
 <li><a href="#">Submenu2</a></li>
 <li><a href="#">Submenu3</a></li>
 </ul>
 </li>
 <li><a href="#"><i class="fa fa-bug" aria-hidden="true"></i> Bug</a></li>
</ul>
<div class="sosmed" id="hidesosmed">
 <span class="facebook"><a href="#" title="Facebook"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></span>
 <span class="twitter"><a href="#" title="Twitter"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></span>
 <span class="google"><a href="#" title="Google"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></span>
 <span class="hidesosmed"><a href="javascript:void(0)" onclick="document.getElementById('hidesosmed').style.display='none';return false;" title="Close Social Media">&#x2715;</a></span>
</div>
</div>
<span class='showmenu' onclick="OpenSideNav()" title="Open Menu">&#9776;</span>

<script type="text/javascript">
//<![CDATA[
function OpenSideNav(){document.getElementById("AmirsIDSideNav").style.display="block"}function closeSideNav(){document.getElementById("AmirsIDSideNav").style.display="none"}function showresponddiv(e){var n=e.replace("submenu-","opensubmenu-"),t=document.getElementById(n);current&&current!=t&&(current.style.display="none"),"none"==t.style.display?(t.style.display="block",current=t):t.style.display="none"}var current=null;
//]]>
</script> 

7. Klik Simpan Tema

Silahkan kalian ganti kode warna kuning dengan url background yang kalian inginkan, warna orange dengan url gambar avatar atau foto profil kalian, warna merah dengan alamat url yang ingin kalian.

Demikianlah tadi tutorial Cara Membuat Sidebar Navigation, kalian tidak perlu cemas menu tersebut akan hilang ketika di scroll sebab sidebar tersebut full height dan ketika di scroll akan tetap diam ditempat tidak jalan-jalan atau bahkan shoping. Selamat berkarya.

Artikel Terkait


EmoticonEmoticon