Thêm menu bên cực đẹp cho blogger

Tài liệu
Thêm menu bên cực đẹp cho blogger
Chuyên mục
Người đăng
Đăng vào

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>
#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>
Chúc các bạn thành công!

Hiện có bình luận

Thông báo
Dịch vụ tăng tương tác bán hàng trên Instagram, tăng auto like bài viết, hình ảnh video, tăng lượt theo dõi (follower) nick Instagram. Xem ngay »
Xong