Ủng hộ mình bằng cách bấm vào Quảng Cáo để giúp mình phát triển hơn nhé!
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

- - 52 bình loạn
#Tags

HIỆN CÓ 52 BÌNH LOẠN

avatar
Lý Văn Bảo

Cmt đầu ^^

TRẢ LỜI
avatar
Nguyễn Lương Duy Blog

:v Chúc mừng bạn :D

TRẢ LỜI
avatar
Tính Getter

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

TRẢ LỜI
avatar
Nguyễn Lương Duy Blog

Des bằng pisart điện thoại đấy :v

TRẢ LỜI
avatar
Tính Getter

Cần ko e làm cho 1 tấm chứ bữa h mắc học :v

TRẢ LỜI
avatar
Nguyễn Lương Duy Blog

Có chứ làm luôn giúp a càng tốt :))

TRẢ LỜI
avatar
Thanh Phú IT

- hay

TRẢ LỜI
avatar
Star Dũng Blog

Tương tác bác

TRẢ LỜI
avatar
Star Quốc

Đẹp đó ông Duy

TRẢ LỜI
avatar
Hưng Star - IT

tuyệt vời`

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

Đẹp quá

TRẢ LỜI
avatar
Nguyễn Lương Duy

Cảm ơn bác :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Tương tác góp ý đi chứ :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Tks ông :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

:v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Tất nhiên là đẹp thì mới share :v chứ xấu ai đi share :v

TRẢ LỜI
avatar
Nam Việt

đẹp

TRẢ LỜI
avatar
Hưng Star - IT

cười gì :D

TRẢ LỜI
avatar
z0mbie win

đẹp đó

TRẢ LỜI
avatar
Star Quốc

Hổng có gì bữa nào tui test

TRẢ LỜI
avatar
Phú Cường Blogger

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ỜI
avatar
Niệm Style Blog

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

TRẢ LỜI
avatar
Star Cường IT ­

cái này có ltt post rồi mà ta :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Test luôn cho nóng :))

TRẢ LỜI
avatar
Nguyễn Lương Duy

Không có gì cười vui thôi mà bác :3

TRẢ LỜI
avatar
Nguyễn Lương Duy

Cảm ơn bạn đã khen mình :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Duy luôn luôn đẹp trai mà :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Đú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

TRẢ LỜI
avatar
Nguyễn Lương Duy

Chúc anh cuối tuần vui vẻ :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Bài này em post được hơn 2 tháng rồi mà :v Em reup lại thôi :))

TRẢ LỜI
avatar
z0mbie win

xấu vãi lờ :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Đù vừa khen đẹp xong lại nói xấu :))

TRẢ LỜI
avatar
Niệm Style Blog

Chúc mừng năm mới em trai ^^

TRẢ LỜI
avatar
Nguyễn Lương Duy

Em cảm ơn anh! Em cũng chúc anh năm mới vui vẻ.

TRẢ LỜI
avatar
Còi Offical

hé lô anh em

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

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

TRẢ LỜI
avatar
Nguyễn Lương Duy

OK đã Cập Nhật cho anh :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Hế lloo :v

TRẢ LỜI
avatar
Phan Văn Dũng

còn liên kết k ạ

TRẢ LỜI
avatar
Star Quốc

Duy lại lặng rồi

TRẢ LỜI
avatar
Hưng Star - IT

Duy đi đâu rồi nhở

TRẢ LỜI
avatar
Nguyễn Lương Duy

Còn bạn ạ...

TRẢ LỜI
avatar
Nguyễn Lương Duy

Lặng gì man dạo này hơi mệt :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

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 à :))

TRẢ LỜI
avatar
Niệm Style Blog

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ỜI
avatar
Nguyễn Lương Duy

Ok anh gửi em cái.logo 94x94 đã lén với ạ để em đặt :))

TRẢ LỜI
avatar
Hưng Star - IT

Ừ nản nhở

TRẢ LỜI
avatar
Nguyễn Lương Duy

Nản vler vì GÀ mới đie :(

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

chưa mà

TRẢ LỜI
avatar
Nguyễn Lương Duy

Em mới Up cái Template cũ lên nó mất :)) Đã thay cho a :v

TRẢ LỜI
avatar
Phan Văn Dũng

mk đặt liên kết k thây sbnaj trả lưoif

TRẢ LỜI
avatar
Nguyễn Lương Duy

Có thấy bạn comment gì đâu?

TRẢ LỜI

THAM GIA BÌNH LOẠN NGAY!

Một số lưu ý khi bình loạn

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.