Tạo Menu Trượt Dọc Có Hiệu Ứng Đẹp Cho Blogspot

Xin chào các bạn, hôm nay mình sẽ chia sẻ cho các bạn một cách làm cái Menu Trượt Dọc Có Hiệu Ứng Đẹp Cho Blogspot. Và mình thấy nó cũng khá đẹp lên View-Source về Share cho các bạn.
Tạo Menu Trượt Dọc Có Hiệu Ứng Đẹp Cho Blogspot

Hình Ảnh Minh Hoạ

CÁC BƯỚC THỰC HIỆN


Bước 1. Truy cập Quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Thêm đoạn CSS dưới đây vào sau thẻ 
]]></b:skin>
#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}

Bước 2. Tìm thẻ <body> và dán đoạn Code này vào sau thẻ đó
<div class='en' id='snav'>
<ul>
<li><a href='/'><i class='fa fa-home'></i><span>Trang Chủ</span>
</a></li> <li><a href='/link'><i aria-hidden='true' class='fa fa-link'></i><span>Get Link ads</span>
</a></li>
<li><a href='http://www.nguyenluongduy.tk/p/view.html'><i aria-hidden='true' class='fa fa-eye'></i><span>Tăng views</span>
</a></li>
<li><a href='/tools'><i aria-hidden='true' class='fa fa-wrench'></i><span>Tools LinkThuThuat</span></a></li>
<li><a href='/notepad'><i aria-hidden='true' class='fa fa-sticky-note'></i><span>Notepad</span></a></li>
<li><a href='/hop-tac'><i aria-hidden='true' class='fa fa-users'></i><span>Hợp tác nội dung</span></a></li>
<li><a href='https://www.blogger.com/follow-blog.g?blogID=7928173344458320077'><i aria-hidden='true' class='fa fa-rss'></i><span>Đăng ký nhận thủ thuật mới</span></a></li>
<li><a href='https://www.google.com/maps/place/Thạch+Thất,+Hà+Nội/@21.0237565,105.5155585,9z/data=!4m2!3m1!1s0x31345bf1f9733b47:0x4c611b4ae661c8a2'><i class='fa fa-map-marker'></i><span>Thạch Thất, Hà Nội</span></a></li>
</ul>
</div>
Bước 3. Lưu mẫu.

Lời Kết

Vừa rồi chỉ với vài bước đơn giản bạn đã có ngay một cái Menu Trượt Dọc Có Hiệu Ứng Đẹp Cho Blogspot rồi.
Chúc Các Bạn Thành Công!
View-Source: Link Thủ Thuật