Thêm menu bên cực đẹp cho blogger - Xem Top 1 - Xem Thông Tin Hàng Đầu Việt Nam

Giới thiệu Điều khoản Hỏi đáp Hỗ trợ Liên hệ Site Map

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

XemTop1 25/3/18 0 comment 284 view Blogspot , Thu_Thuat

Chúc các bạn thành công!"; /* */

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!

Chia sẻ bài viết:

Bạn cũng nên xem:
Tag / Blogspot / Thu_Thuat

Bình luận Blogger

MỘT SỐ LƯU Ý KHI BÌNH LUẬN:
● Comment có văn hóa: Không chửi tục, nói bậy, thông qua khung Comment.
● Với tên "ẩn danh" thì bạn tích vào ô: "chứng minh bạn không phải là rô-bốt".
● Để bình luận một đoạn code, bạn click vào đây để mã hóa code trước nhé !
● Để đăng ảnh làm hình minh họa, bạn click vào đây để Upload ảnh lên sever nhé !

0 nhận xét | Viết lời bình

Bình luận Facebook

Copyright © 2016 Xem Top 1 - Xem Thông Tin Hàng Đầu Việt Nam

Trang chủ Diễn đàn, hỏi đáp Nghe Nhạc Sitemap - bài đăng Thông tin liên hệ