17.3.17

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. 

6 comments

  1. Nice sharing... Rajin main dgn koding yer.. bgus2 keep it up...

    ReplyDelete
  2. senarai pemenang dah keluar tau.. mari kita tengok siapa yang kenaaaa =)

    http://sitiyangmenaip.blogspot.my/2016/07/pemenang-pemenang-daehan-minguk.html

    ReplyDelete
  3. good info...nak kena blaja lagi bab2 guna coding ni

    ReplyDelete
  4. @Ahmad Hasif haah rajinlah jugak. hihi terima kasih :)

    ReplyDelete
  5. @AziRahmanDot Com heheh tulah. terima kasih kakzi <#

    ReplyDelete


"Burung serindit terbang melayang,
Mari hinggap di ranting mati,
Bukan ringgit pandangan orang,
Budi bahasa tangkaian hati."

Berbudi dan berbahasalah seolah-olah esok kita akan mati.
Be courteous like it seems we are going to die tomorrow.

- http://www.blogeyja.com

Template by Fearne Creative Design. Edited by Eyja Masliza. All contents belongs to the creator and editor. 2017.
© Blog Eyja. Design by Fearne.