Chia Sẻ Code Tạo Menu Trượt Từ Trái Sang Phải Blogspot

  • NHẬN TƯ VẤN BÁO GIÁ THIẾT KẾ WEBSITE CHUẨN SEO | SEO TỔNG THỂ WEBSITE
  • Gọi Cho Chúng Tôi : 0902 313 677
» Blogger » Thiết kế Website Blogspot » Code Tạo Menu Trượt Từ Trái Sang Phải Blogspot HTML + CSS + JS
01
Tháng Tám

Đăng Bởi tungbui, Danh Mục Thiết kế Website Blogspot , Lượt Xem 0

Code Tạo Menu Trượt Từ Trái Sang Phải Blogspot HTML + CSS + JS

Code Tạo Menu Trượt Từ Trái Sang Phải Blogspot HTML + CSS + JS, Đối với menu blogspot để làm cho nó di chuyển từ trái sang phải hay ngược lại là việc làm không dễ. Vì vậy nếu bạn nào chưa biết về code blogger, hay chưa biết cách tạo menu cho blogspot, hãy sử dụng đoạn code và css này để tiến hành tạo menu cho blog của mình nhé. Code tạo menu này không sử dụng js nha các bạn.

Chia sẻ code tạo menu trượt từ trái sang phải của blogspot đẹp mê ly

Mình khẳng định lại là Code Tạo Menu Trượt Từ Trái Sang Phải Blogspot HTML + CSS + JS.  Đây là đoạn code thông dụng được nhiều blogger sử dụng nhất để tạo menu cho blogspot của mình.

  • xem demo tại đây nhé: http://demo.blogchiasethuthuat.com/p/menu_25.html
  • Vào đây để tạo blogger: https://www.blogger.com
code tạo menu trượt từ trái sang phải
code tạo menu trượt từ trái sang phải

Để sử dụng đoạn code tạo menu blogspot này mình xin lưu ý các bạn vài điều:

  • Chú ý vị trí các thẻ đóng, thẻ mở
  • Copy đầy đủ code tạo menu
  • Fix lại css theo ý mình
  • Sửa lại css vì có thể bị đụng css với theme blogspot

Nào mình cùng tiến hành tạo menu cho blogspot thôi

Để tiến hành sử dụng menu này, các blogger cần sử dụng đoạn CSS mà mình cung cấp, copy và dán lên phía trên thẻ ]]></b:skin>

.toggleMenu{color:#fff;padding:10px;font-size:25px;float:left;margin-right:20px}h1{color:#fff;font-size:20px;font-weight:400;margin:12px 0 0}
.dropdowns{font:normal normal 14px Roboto,Arial,sans-serif;background:#fff;overflow:auto;position:fixed;z-index:99;bottom:0;width:300px;left:-400px;transition:all .7s ease-in-out;top:0;border-top:1px solid #ddd;line-height:48px;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.nav-menu2{list-style:none;margin:0;*zoom:1;float:left;padding:0}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}.sub-menu{transition:all .5s ease-in-out}
.nav-menu2 ul{list-style:none;margin:0;width:auto;white-space:nowrap}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0}
.nav-menu2 > li{float:left;width:100%}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#666}
.nav-menu2 > li:hover > a{background:#E6E6E6}
.nav-menu2 li ul{background:#fff;display:none;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:0s;padding:0}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 li li a.click ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#666;position:relative;padding-left:53px;line-height:40px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .dropdown:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;position:absolute;top:0;right:20px;color:#444}
.nav-menu2 li .dropdown.open:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit}
.nav-menu2 li .dropdown:hover:after{color:#000}
.nav-menu2 li i{font-size:18px;width:35px}.nav li a.click{opacity:1}
.nav-menu2 h2{font-size:14px;font-weight:normal!important;padding:0 20px;margin:0;overflow:hidden;border-top:1px solid #ddd;color:#999}
.dropdowns h3,.dropdowns p{padding:0;margin:0;font-weight:400!important}
.dropdowns .profilemenu{padding:10px;background:#f8f8f8;border-bottom:1px solid #ddd;line-height:2}
.dropdowns h3{font-size:14px}.nav-menu2 p{font-size:13px}
.dropdowns img{width:70px;height:70px;border-radius:100%}
#info2{float:right;border-radius:100%;padding:0 10px;color:#999}
#info2:hover{background:#ddd}
#nav-menu1{visibility:hidden;position:absolute;background:#fff;list-style:none;right:30px;top:135px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#nav-menu1 li{width:100%}
#nav-menu1 li a{padding:8px 15px;width:100%;font-weight:300;color:#666}
#nav-menu1 li a:hover{background:#e1e1e1}
#nav-menu1.shows{visibility:visible;width:200px;height:130px}
.dropdowns.shows{left:0;opacity:1}
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0, 0, 0, 0.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.darkshadow.shows{visibility:visible;opacity:1}

 

Copy toàn bộ HTML này và dán trên thẻ đóng </body> trong source blogspot của bạn

<a class='toggleMenu ripple' href='javascript:;'><i class='fa fa-bars'></i></a>
<div class='darkshadow'></div>
<nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='wrapper'>
<div class='profilemenu'>
<img alt='Admin' src='https://i.imgur.com/fC1MhSb.jpg' title='Admin'/>
<h3>Blog Chia Sẻ Thủ Thuật</h3>
<a class='ripple' href='javascript:;' id='info2'><i class='fa fa-caret-down'></i></a>
<p>blogchiasethuthuat.com@gmail.com</p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Google+</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Facebook</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Twitter</span></a></li>
</ul>
</div>
<ul class='nav nav-menu2'>
<li><a class='waves-effect' href='/' itemprop='url' expr:title='data:blog.title'><span itemprop='name'><i class='fa fa-home'></i> Trang chủ</span></a></li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Ranking'><i class='fa fa-th-list'></i> Chuyên mục</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
</ul>
</li>
<li><a class='waves-effect' href='#' itemprop='url' title='News'><span itemprop='name'><i class='fa fa-user'></i> Giới thiệu</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Inbox'><span itemprop='name'><i class='fa fa-envelope'></i> Liên hệ</span></a></li>
<h2>Khác</h2>
<li><a class='waves-effect' href='#' itemprop='url' title='Settings'><span itemprop='name'><i class='fa fa-copyright'></i> Điều khoản sử dụng</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='My File'><span itemprop='name'><i class='fa fa-info'></i> Chính sách riêng tư</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Upload'><span itemprop='name'><i class='fa fa-commenting-o'></i> Góp ý báo lỗi</span></a></li>
</ul>
</div>
</nav>

Dán đoạn js vào trước thẻ </body> của blog

<script type='text/javascript'>
$(document).ready(function(){$("#info2").click(function(){$("#nav-menu1").toggleClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".dropdowns").toggleClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".dropdowns").removeClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".darkshadow").removeClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".darkshadow").toggleClass("shows");});});
//<![CDATA[
// Sub Nav
var Script=function(){jQuery('.nav-menu2 .sub-menu > a').click(function(){var last=jQuery('.sub-menu.open',$('.nav-menu2'));last.removeClass("open");jQuery('.dropdown').addClass("open");jQuery('.dropdown',last).removeClass("open");jQuery('.sub',last).slideUp(300);var sub=jQuery(this).next();if(sub.is(":visible")){jQuery('.dropdown',jQuery(this)).removeClass("open");jQuery(this).parent().removeClass("open");sub.slideUp(300)}else{jQuery('.dropdown',jQuery(this)).addClass("open");jQuery(this).parent().addClass("open");sub.slideDown(300)}var o=($(this).offset());diff=300-o.top;if(diff>0)$(".nav-menu2").scrollTo("-="+Math.abs(diff),500);else $(".nav-menu2").scrollTo("+="+Math.abs(diff),500)})}();
//]]>
</script>

Tóm lại: Đây là 3 đoạn code tạo menu trượt từ trái sang phải blogspot, bạn chỉ cần thực hiện từng bước như hướng dẫn, đảm bảo sẽ tạo ra được một menu trượt tuyệt đẹp. Nếu bạn muốn thêm hoa lá cành gì nữa? Hãy thêm vào đoạn html nhé.

Liên hệ hỗ trợ thiết kế website blogspot

Công Ty Giải Pháp Công Nghệ Số Tùng Phát chuyên cung cấp các dịch vụ thiết kế website wordpress giá rẻ, thiết kế website blogspot, giao diện đẹp, tương thích mọi thiết bị. Nếu Quý Khách có nhu cầu vui lòng liên hệ với chúng tôi theo số hotline 0902 313 677 hoặc gửi email cho chúng tôi info.tungphat@gmail.com để được nhân viên chúng tôi hỗ trợ tốt nhất.

Cảm ơn các bạn đã theo dõi bài viết. Chúc các bạn thực hành thành công, nếu gặp khó khăn hãy liên hệ với chúng tôi để được hỗ trợ nhé.

Code Tạo Menu Trượt Từ Trái Sang Phải Blogspot HTML + CSS + JS
5 (100%) 17 votes

Bài Viết Liên Quan

GIẢI PHÁP CÔNG NGHỆ TÙNG PHÁT

*********************************************

Khách Cần Dịch Vụ Seo Website - Thiết Kế Website Vui Lòng Liên Hệ

Phone: 0777 668 568 - 0902 313 677

Địa Chỉ: 11 Đặng Thế Phong. P. Tân Sơn Nhì, Q. Tân Phú, TP.HCM

Email: info.tungphat@gmail.com

Tư Vấn Qua Email