Chào các bạn, bài viết này mình sẽ hướng dẫn thêm menu bên cho blogger
Hướng dẫn cách làm:
Để thêm menu bên thì các bạn vào phần HTML của blogger rồi thêm toàn bộ code bên dưới, dưới thẻ <body> hoặc lên trên </body><style>Chúc các bạn thành công!
#IntroMenu{position:fixed;z-index:9999;top:10%;right:-100px}
#IntroMenu:hover{z-index:9}
#IntroMenu a{display:block;height:41px;margin-bottom:10px;position:relative;z-index:1;text-align:right}
#IntroMenu a .icon{display:inline-block;width:41px;height:41px;position:absolute;z-index:1;top:-5px;right:-10px;border-radius:41px;background-color:#0AA4AB;box-shadow:0 0 3px #cdcdcd;text-align:center;line-height:42px;-moz-transition:all .5s ease 0;-webkit-transition:all .5s ease 0;-o-transition:all .5s ease 0;transition:all .5s ease 0}
#IntroMenu a .icon i{color:#fff;font-size:18px}
#IntroMenu a:hover .icon{background-color:#555;transform:rotate(-360deg)}
#IntroMenu a .text{width:0;overflow:hidden;padding:0;display:inline-block;height:31px;border-radius:10px;font:normal 12px/31px arial;color:#fff;text-transform:uppercase;transition:all .3s ease 0}
#IntroMenu a:hover .text{background:#555;padding:0 38px 0 15px;width:auto;transition:all .3s ease 0}
@media (max-width: 767px) {
#IntroMenu{display:none}
}
</style>
<div id='IntroMenu'>
<a href='#'><span class='icon'><i class='fa fa-home'></i></span><span class='text'>Trang chủ</span></a>
<a href='#thu-ngo'><span class='icon'><i class='fa fa-info'></i></span><span class='text'>Về chúng tôi</span></a>
<a href='#menu-service'><span class='icon'><i class='fa fa-cogs'></i></span><span class='text'>Dịch vụ của chúng tôi</span></a>
<a href='#question'><span class='icon'><i class='fa fa-tags'></i></span><span class='text'>Những điều bạn cần biết</span></a>
<a href='#footer'><span class='icon'><i class='fa fa-map-marker'></i></span><span class='text'>Thông tin liên hệ</span></a>
</div>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function () {
if (jQuery(document).scrollTop() > 150) {
if (parseInt(jQuery("#IntroMenu").css("right")) < 0)
jQuery("#IntroMenu").animate({ "right": "25px" });
} else {
if (parseInt(jQuery("#IntroMenu").css("right")) > 0)
jQuery("#IntroMenu").animate({ "right": "-35px" });
}
});
$(document).ready(function () {
$('#IntroMenu a').smoothScroll();
});
//]]>
</script>
