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

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.

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>