Sidebar Navigation without jQuery
- Langkah pertama, kalian login dulu ke akun blogger
- Selanjutnya masuk ke menu Template → Edit HTML
- Kalo sudah masuk Edit HTML, kalian cari kode </head>
- Lalu Copy CSS dibawah ini dan paste tepat di atasnya
<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>
- Selanjutnya kalian cari kode </body>
- Kalo sudah ketemu, masukan HTML dan Script Sidebar Menu Navigation dibawah ini tepat diatasnya
<div id="MsTamvanSideNav" class="sidenav">
<div class="author-profile">
<div class="background"><img src="http://i.imgur.com/BcXH1BB.jpg"/></div>
<div class="author-avatar"><img src="http://i.imgur.com/jl2oRgY.png"/></div>
<span class="author-title">Teja Sukmana</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">✕</a></span>
<ul class="menu">
<li><a href="https://mastamvan.blogspot.com"><i class="fa fa-inbox" aria-hidden="true"></i> Inbox</a></li>
<li><a href="https://mastamvan.blogspot.com"><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="https://facebook.com/tejasukmana99" title="Facebook"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></span>
<span class="twitter"><a href="https://twitter.com/teja_7x" title="Twitter"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></span>
<span class="google"><a href="#Google" 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">✕</a></span>
</div>
</div>
<span class='showmenu' onclick="OpenSideNav()" title="Open Menu">☰</span>
<script type="text/javascript">
//<![CDATA[
function OpenSideNav(){document.getElementById("MsTamvanSideNav").style.display="block"}function closeSideNav(){document.getElementById("MsTamvanSideNav").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>
- Kalo Sudah Tinggal Save Dan Lihat Hasilnya
Untuk Pengaturan Nama Menu Dan Link mungkin kalian sudah paham / baca di sini Tutorial Cara Edit Menu Navigation Bar Di Blogger
Jika Iconya Tidak tampil, Kalian tambahkan kode dibawah ini tepat diatas kode </head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
Kalo kalian ingin mengganti iconnya, silahkan pilih iconnya di link Icon Font Awesome
0 comments:
Posting Komentar