Tutorial: Show/Hide Menu Masa Scroll Blog

           Hi there. Today, I would like to share to you one this tutorial that I just recently use because I just found it. Thank you so much Hafiz Zulkafly for the tutorial and now I would love to teach you how to use it on my own way. Its basically the basecode from here, but I changed it for my own understanding and also referring to what Hafiz Zulkafly have shared in his blog.

           Thank you Hafiz for making this easier to me to understood and use this tutorial and then I can share it with my readers at BLOG EYJA. For more understanding, you may refer to this demo. Click here.

CTRL+C untuk copy code-code tutorial dalam BLOG EYJA ni.
1. Dashboard > Layout > Add A Gadget > HTML JavaScript

2. Copy this code below

<style>
#blogeyjabefore{
padding:5px;}
#afterblogeyja{
width:100%;
background:#ee7f77;display:none;
position:fixed;
top:0;
left:0;
z-index:999;
opacity:1;
padding:5px;text-align:center;
}
.yangfirst a {
padding:5px;background:;text-decoration:none;color:#000;margin:5px;letter-spacing:2px;text-transform:uppercase;font-family: 'Monserrat', sans-serif; font-size:14px;text-align:center;}
.yangfirst a:hover {
background:;border-bottom:2px solid #ee7f77;}
.biladahscroll a {
padding:5px;background:#ee7ff77;text-decoration:none;color:#fff;margin:5px;letter-spacing:2px;text-transform:uppercase;font-family: 'Monserrat', sans-serif; font-size:14px;text-align:center;}
.biladahscroll a:hover {
border-bottom:2px solid #000;background:#ee7f77;color:#fff;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<center>
<div id="blogeyjabefore">
<div class="yangfirst">
<a href="http://www.blogeyja.com/">HOME</a>
<a href="https://www.blogger.com/home">DASHBOARD</a>
<a href="http://www.blogeyja.com/p/about-eyja-masliza-web-owner.html">ABOUT</a>
<a href="http://www.blogeyja.com/p/stuffs.html">STUFFIES</a>
<a href="http://www.blogeyja.com/search/label/GA">GIVEAWAYS</a>
<a href="http://www.blogeyja.com/follow-blog.g?blogID=5632227710572635061">FOLLOW</a>
</div></div></center>
<center>
<div id="afterblogeyja">
<div class="biladahscroll">
<a href="http://www.blogeyja.com/">HOME</a>
<a href="https://www.blogger.com/home">DASHBOARD</a>
<a href="http://www.blogeyja.com/p/about-eyja-masliza-web-owner.html">ABOUT</a>
<a href="http://www.blogeyja.com/p/stuffs.html">STUFFIES</a>
<a href="http://www.blogeyja.com/search/label/GA">GIVEAWAYS</a>
<a href="http://www.blogeyja.com/follow-blog.g?blogID=5632227710572635061">FOLLOW</a>
</div></div></center>
<script>
$(document).ready(function() {
var headerTop = $('#blogeyjabefore').offset().top;
var headerBottom = headerTop + 10; // Sub-menu should appear after this distance from top.
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom
if (($("#afterblogeyja").is(":visible") === false)) {
$('#afterblogeyja').fadeIn('fast');
}
} else {
if ($("#afterblogeyja").is(":visible")) {
$('#afterblogeyja').hide();
}
}
});
});
</script>

  You are strictly have to change all the text that I coloured with green and red. Or else, you put all of my links at your Show/Hide Menu.