Hướng dẫn tạo menu trên di động cho blogspot

» Chú ý : Nếu không xem được hoặc load chậm Pause 30s hoặc Click Vào đây | Báo Link Phim Hỏng
Các bạn đang xem phim: Hướng dẫn tạo menu trên di động cho blogspot
Xem phần chia nhỏ (a, b..) đỡ lag và load nhanh hơn phần Full, 360p load nhanh, 720p độ nét cao
Để tải phim về máy các bạn nên sử dụng phần mềmIDMFull mới nhất
Chức năng lưu tập phim đang xem chỉ có tác dụng trên 1 máy tính
Nếu bạn không xem được phim vui lòng nhấnCtrl + F5vài lần. Hoặc chuyển sang Server khác để xem.
Xem phim tốt nhất trên trình duyệtChromevàFirefox, nhấn vàođâyđể tải Firefox miễn phí
Thông tin phim
Việc Google thay đổi thuật toán mới làm ảnh hưởng đến khá nhiều blog và website, theo đó các site phải tương thích với thiết bị di động mới tốt cho SEO, hôm nay mình hướng dẫn làm menu trên di động cho blogspot.

Hướng dẫn tạo menu trên di động cho blogspot
Demo menu trên di động blogspot
Cách làm:
Bước 1: Vào Mẫu => Chỉnh sửa HTML => Ctrl+F (nội tuyến) tìm thẻ <head> và dán đoạn code sau vào sau nó:
<meta content='width=device-width, initial-scale=1' name='viewport'/>
Bước 2: Chèn code sau vào trước thẻ body
<!--MENU-->
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 <script type='text/javascript'>
//<![CDATA[
!function(n){n.fn.menumaker=function(s){var e=n(this),i=n.extend({title:"Menu",format:"dropdown",sticky:!1},s);return this.each(function(){return e.prepend('<div id="menu-button">'+i.title+"</div>"),n(this).find("#menu-button").on("click",function(){n(this).toggleClass("menu-opened");var s=n(this).next("ul");s.hasClass("open")?s.hide().removeClass("open"):(s.show().addClass("open"),"dropdown"===i.format&&s.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){n(this).toggleClass("submenu-opened"),n(this).siblings("ul").hasClass("open")?n(this).siblings("ul").removeClass("open").hide():n(this).siblings("ul").addClass("open").show()})},"multitoggle"===i.format?multiTg():e.addClass("dropdown"),i.sticky===!0&&e.css("position","fixed"),resizeFix=function(){n(window).width()>768&&e.find("ul").show(),n(window).width()<=768&&e.find("ul").hide().removeClass("open")},resizeFix(),n(window).on("resize",resizeFix)})}}(jQuery),function(n){n(document).ready(function(){n("#cssmenu").menumaker({title:"Menu",format:"multitoggle"})})}(jQuery);
//]]>
</script>
  <style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button { margin:0; padding:0; border:0; list-style:none; line-height:1; display:block; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#cssmenu:after,#cssmenu > ul:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
#cssmenu #menu-button { display:none; }
#cssmenu { font-family:Montserrat,sans-serif; background:#333333; }
#cssmenu > ul > li { float:left; }
#cssmenu.align-center > ul { font-size:0; text-align:center; }
#cssmenu.align-center > ul > li { display:inline-block; float:none; }
#cssmenu.align-center ul ul { text-align:left; }
#cssmenu.align-right > ul > li { float:right; }
#cssmenu > ul > li > a { padding:17px; font-size:12px; letter-spacing:1px; text-decoration:none; color:#dddddd; font-weight:700; text-transform:uppercase; }
#cssmenu > ul > li:hover > a { color:#ffffff; }
#cssmenu > ul > li.has-sub > a { padding-right:30px; }
#cssmenu > ul > li.has-sub > a:after { position:absolute; top:22px; right:11px; width:8px; height:2px; display:block; background:#dddddd; content:''; }
#cssmenu > ul > li.has-sub > a:before { position:absolute; top:19px; right:14px; display:block; width:2px; height:8px; background:#dddddd; content:''; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }
#cssmenu > ul > li.has-sub:hover > a:before { top:23px; height:0; }
#cssmenu ul ul { position:absolute; left:-9999px; }
#cssmenu.align-right ul ul { text-align:right; }
#cssmenu ul ul li { height:0; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }
#cssmenu li:hover > ul { left:auto; }
#cssmenu.align-right li:hover > ul { left:auto; right:0; }
#cssmenu li:hover > ul > li { height:35px; }
#cssmenu ul ul ul { margin-left:100%; top:0; }
#cssmenu.align-right ul ul ul { margin-left:0; margin-right:100%; }
#cssmenu ul ul li a { border-bottom:1px solid rgba(150,150,150,0.15); padding:11px 15px; width:170px; font-size:12px; text-decoration:none; color:#dddddd; font-weight:400; background:#333333; }
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a { border-bottom:0; }
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover { color:#ffffff; }
#cssmenu ul ul li.has-sub > a:after { position:absolute; top:16px; right:11px; width:8px; height:2px; display:block; background:#dddddd; content:''; }
#cssmenu.align-right ul ul li.has-sub > a:after { right:auto; left:11px; }
#cssmenu ul ul li.has-sub > a:before { position:absolute; top:13px; right:14px; display:block; width:2px; height:8px; background:#dddddd; content:''; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }
#cssmenu.align-right ul ul li.has-sub > a:before { right:auto; left:14px; }
#cssmenu ul ul > li.has-sub:hover > a:before { top:17px; height:0; }

@media all and (max-width:768px),only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min--moz-device-pixel-ratio:2) and (max-width:1024px),only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:1024px),only screen and (min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min-resolution:192dpi) and (max-width:1024px),only screen and (min-resolution:2dppx) and (max-width:1024px) {
    #cssmenu { width:100%; } #cssmenu ul { width:100%; display:none; } #cssmenu.align-center > ul { text-align:left; } #cssmenu ul li { width:100%; border-top:1px solid rgba(120,120,120,0.2); } #cssmenu ul ul li,#cssmenu li:hover > ul > li { height:auto; } #cssmenu ul li a,#cssmenu ul ul li a { width:100%; border-bottom:0; } #cssmenu > ul > li { float:none; } #cssmenu ul ul li a { padding-left:25px; } #cssmenu ul ul ul li a { padding-left:35px; } #cssmenu ul ul li a { color:#dddddd; background:none; } #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a { color:#ffffff; } #cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul { position:relative; left:0; width:100%; margin:0; text-align:left; } #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before { display:none; } #cssmenu #menu-button { display:block; padding:17px; color:#dddddd; cursor:pointer; font-size:12px; text-transform:uppercase; font-weight:700; } #cssmenu #menu-button:after { position:absolute; top:22px; right:17px; display:block; height:4px; width:20px; border-top:2px solid #dddddd; border-bottom:2px solid #dddddd; content:''; } #cssmenu #menu-button:before { position:absolute; top:16px; right:17px; display:block; height:2px; width:20px; background:#dddddd; content:''; } #cssmenu #menu-button.menu-opened:after { top:23px; border:0; height:2px; width:15px; background:#ffffff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } #cssmenu #menu-button.menu-opened:before { top:23px; background:#ffffff; width:15px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } #cssmenu .submenu-button { position:absolute; z-index:99; right:0; top:0; display:block; border-left:1px solid rgba(120,120,120,0.2); height:46px; width:46px; cursor:pointer; } #cssmenu .submenu-button.submenu-opened { background:#262626; } #cssmenu ul ul .submenu-button { height:34px; width:34px; } #cssmenu .submenu-button:after { position:absolute; top:22px; right:19px; width:8px; height:2px; display:block; background:#dddddd; content:''; } #cssmenu ul ul .submenu-button:after { top:15px; right:13px; } #cssmenu .submenu-button.submenu-opened:after { background:#ffffff; } #cssmenu .submenu-button:before { position:absolute; top:19px; right:22px; display:block; width:2px; height:8px; background:#dddddd; content:''; } #cssmenu ul ul .submenu-button:before { top:12px; right:16px; } #cssmenu .submenu-button.submenu-opened:before { display:none; }
}
</style>
<div id='cssmenu'>
<ul>
   <li><a href='#'>Home</a></li>
   <li class='active'><a href='#'>Products</a>
      <ul>
         <li><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
         <li><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div><!--END MENU -->
Share123.vn chúc các bạn thành công. :))

Tags: ,

BẠN ĐÃ XEM CHƯA

 
Được tạo bởi Blogger.