Tạo menu trượt dọc với hiệu ứng tuyệt đẹp

Chào các bạn, hôm nay mình sẽ chia sẻ đến các bạn cách tạo menu trượt dọc theo trang với hiệu ứng tuyệt đẹp cho blogger.

HƯỚNG DẪN THỰC HIỆN

Đầu tiên các bạn truy cập vào trang quản trị và chọn Chủ đề => Chỉnh sửa
Sau đó các bạn tìm đến thẻ ]]></b:skin> rồi chèn đoạn code sau lên trước nó
#snav.en{left:0;text-align:left;width: 6%;}
#snav.en li span{left:-350px}
#snav.en li a:hover span{left:35px}
#snav.ar{right:0;text-align:right}
#snav.ar li span{right:-100px}
#snav.ar li a:hover span{right:35px}
#snav{position:fixed;top:20%;z-index:9999;font-size:18px;font-family:&#39;Open Sans&#39;,sans-serif}
#snav ul{list-style:none}
#snav *{margin:0;padding:0;outline:0;transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#snav li a{text-decoration:none;color:#fff;display:block;position:relative}
#snav .fa{vertical-align:middle;font-size:18px;width:35px;height:35px;line-height:35px;text-align:center;position:relative;z-index:4}
#snav li span{font-size:15px;vertical-align:middle;height:35px;line-height:35px;width:auto;white-space:nowrap;overflow:hidden;display:block;padding:0 15px;position:absolute;top:0;visibility:hidden;z-index:3}
#snav li a:hover .fa{transform:rotate(720deg)}
#snav li a:hover span{visibility:visible}
#snav li span{background-color:#555}
#snav li .fa{background-color:#EEE;color:#555}
#snav li a:hover .fa{color:#fff}
#snav li:nth-child(10n+1) span,#snav li:nth-child(10n+1) a:hover .fa{background-color:#8350DD}
#snav li:nth-child(10n+2) span,#snav li:nth-child(10n+2) a:hover .fa{background-color:#4EC5DB}
#snav li:nth-child(10n+3) span,#snav li:nth-child(10n+3) a:hover .fa{background-color:#3DC25D}
#snav li:nth-child(10n+4) span,#snav li:nth-child(10n+4) a:hover .fa{background-color:#99BE24}
#snav li:nth-child(10n+5) span,#snav li:nth-child(10n+5) a:hover .fa{background-color:#38c}
#snav li:nth-child(10n+6) span,#snav li:nth-child(10n+6) a:hover .fa{background-color:#38c}
#snav li:nth-child(10n+7) span,#snav li:nth-child(10n+7) a:hover .fa{background-color:#000}
#snav li:nth-child(10n+8) span,#snav li:nth-child(10n+8) a:hover .fa{background-color:#F1A111}
#snav li:nth-child(10n+9) span,#snav li:nth-child(10n+9) a:hover .fa{background-color:#777}
#snav li:nth-child(10n+10) span,#snav li:nth-child(10n+10) a:hover .fa{background-color:#30555C}
Tiếp theo các bạn chèn đoạn code sau xuống dưới thẻ <body>


<div class='en' id='snav'>
<ul>
      <li><a href='/'><i class='fa fa-home'/><span>Trang Chủ</span> </a></li>
<li><a href='/search/label/Windows?&amp;max-results=12'><i class='fa fa-tablet'/><span>Thủ Thuật Windows</span>
</a></li>
<li><a href='/search/label/Blogger?&amp;max-results=12'><i class='fa fa-html5'/><span>Thủ Thuật Blogger</span></a></li>
        <li><a href='/search/label/Facebook?&amp;max-results=12'><i class='fa fa-facebook'/><span>Thủ Thuật Facebook</span></a></li>
        <li><a href='/search/label/Template Blogger?&amp;max-results=12'><i class='fa fa-server'/><span>Template Blogger</span></a></li>
<li><a href='mailto:mail.bacsiwindows@gmail.com'><i class='fa fa-envelope-o'/><span>mail.bacsiwindows@gmail.com</span></a>
</li>
<li><a href='tel:+841239738097'><i class='fa fa-phone'/><span>01698505662</span></a></li>
<li><a href='https://www.google.com/maps/place/Hai+B%C3%A0+Tr%C6%B0ng,+H%C3%A0+N%E1%BB%99i,+Vi%E1%BB%87t+Nam/@21.0051707,105.8443309,14z/data=!3m1!4b1!4m5!3m4!1s0x3135ac1eb17075a1:0xb1f717592512c549!8m2!3d21.0090571!4d105.8607507'><i class='fa fa-map-marker'/><span>Hai Bà Trưng, Hà Nội</span></a></li>
</ul></div>
Chúc các bạn thành công!  
  • Không sử dụng từ khóa trong tên.
  • Không sử dụng từ ngữ phảm cảm.
  • Không dẫn link tới các trang có nội dung không lành mạnh.
  • Không bình luận về chính trị.
  • Mọi bình luận sẽ bị xóa nếu vi phạm mà không báo trước.
  • Không có nhận xét nào

    Nhận bài viết mới