Hướng dẫn tạo menu trượt dọc với hiệu ứng tuyệt đẹp cho blogger

#Thủ Thuật #Windows #Blogger #Facebook

Hướng dẫn tạo menu trượt dọc với hiệu ứng tuyệt đẹp cho blogger

Share:
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>

CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

1 Nhận xét

Nhận xét này đã bị tác giả xóa.

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.