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

Nhận xét

  1. @@ Thumbnail đẹp thế kia mà bảo em des cho anh một tấm :v

    Trả lờiXóa
  2. Trả lời
    1. Tất nhiên là đẹp thì mới share :v chứ xấu ai đi share :v

      Xóa
  3. Thế là bài cũng viết luôn trên đt hả e :3 Làm toàn bộ = đt với màn hình bé ti ti :3

    Trả lờiXóa
    Trả lời
    1. Đúng rồi anh :)) anh nhìn chất lượng bài viết của em là đủ hiểu mà :v những ứng đúng em dùng để làm Blog đây :v
      http://sv1.upsieutoc.com/2017/12/30/Screenshot_2017-12-30-12-16-09-023_com.miui.home.png

      Xóa
  4. Lâu ngày rồi mới ghé thăm lại em trai, bữa giờ bận quá :)

    Trả lờiXóa
  5. Trả lời
    1. Bài này em post được hơn 2 tháng rồi mà :v Em reup lại thôi :))

      Xóa
  6. cập nhật link giúp a <3
    Tên: Khanh Blogger
    https://www.khanhblogger.com/

    Trả lờiXóa
  7. Trả lời
    1. Duy dạo này hơi mệt 1 chút về cái GA mới bị Die và vấn đề Support của BSW với khách hàng thôi à :))

      Xóa
    2. Nản vler vì GÀ mới đie :(

      Xóa
  8. Cho a xin slot LK blog này với
    Cộng Đồng IT Blog
    https://www.congdongitblog.com/
    Chuyên chia sẻ tài nguyên công nghệ. Cám ơn e nhé!

    Trả lờiXóa
    Trả lời
    1. Ok anh gửi em cái.logo 94x94 đã lén với ạ để em đặt :))

      Xóa

Đăng nhận xét

Bài đăng phổ biến từ blog này

Share Template cho Blogspot đẹp chuẩn SEO - Noname Template

Share phần mềm Hack Rules Of Survival new Update!

Chia Sẻ 5 PSD Ảnh Bìa Facebook Cực Chất 2018