Hide Show Navigation Tab

Hellow mellow! Minggu-Minggu, malem-malem, gada kerjaan karena udah selesai belajar buat ulangan besok (sudah diulang-ulang)... So, Gifta mau bikin tutorial navigation tab yang bisa ditutup! Are you ready? :v Read moreee

Step one:

Blogger >> Layout >> Add a Gadget >> HTML/JavaScript

Step two:

Copy this code:

<center><style type="text/css">
#at {
position:fixed;
width:100%;
z-index:1;
text-align: center;
margin: 0 auto;
top: 0px;
left: 0px;
}
.attab {
height:38px;
width:100%;
cursor:pointer;
float:left;
background:pink;
padding:3px;
font-family:verdana;
font-size:15px;
margin:1px;
}
.atcontent {
}
</style>

<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()">(Click Me to Hide)<br/>Credit: <a href='http://www.giftasblog.co.vu/2017/03/navigation-style-3.html'>Here</a> (Navi Style)</div>
<div class="atcontent">
<style type="text/css">
a.linkies {
font-size: 15px;
font-family: verdana;
display:inline-block;
text-align:center;
border:3px solid #F44A98;
border-radius: 0;
width: 90px;
color: #000;
background:#FFF2F8;
padding:3px;
margin:8px;
text-decoration: none;
-webkit-transition-duration:0.7s;
}
a.linkies:hover {
border-radius: 35%;
transform:scale(-1)rotate(18deg);
}
</style>
<a class="linkies" href="URL">Home</a>
<a class="linkies" href="https://www.blogger.com/URL">Stuff</a>
<a class="linkies" href="https://www.blogger.com/URL">Friends</a>
<div align="center">
<center><div id="author">
<a href="javascript:void(0);" onclick="showHideAT()">
</a></div></center></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-500-at.offsetWidth).toString() + "px";
</script>
<div style='display:scroll; position:fixed; top:100px; right:5px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/>
<img src="YOUR IMAGE URL"/></a>
</div></div></div></center>

Panjang ya? XD

Step three:

Paste di kolom kode HTML/JavaScript itu

Step four:

Save!

And you are done!
Eittss, hanya mengingatkan, jangan lupa URL gambar yang terakhir itu diubah XD
Byeee!