Thủ Thuật Blogspot | Tạo Menu Slide Bên Bằng Jquery Tuyệt Đẹp Cho Blogspot

Thủ Thuật Blogspot | Tạo Menu Slide Bên Bằng Jquery Tuyệt Đẹp Cho Blogspot

Xin chào các bạn, Mấy hôm nay gió to quá nên mình muốn đổi gió cái ! HIHI. Nay mình sẽ không đăng bài về chia sẻ ảnh bìa mà thay vào đó mình...
Comment 7/10/2018 03:55:00 PM
Xin chào các bạn, Mấy hôm nay gió to quá nên mình muốn đổi gió cái ! HIHI. Nay mình sẽ không đăng bài về chia sẻ ảnh bìa mà thay vào đó mình sẽ hướng dẫn các bạn cách tạo một Menu Slide tuyệt đẹp cho Blogspot.



Cách làm:

Bước 1: Đăng nhập vào Blogger > Mẫu > Chỉnh sửa HTML > Đặt đoạn CSS dưới đây trên thẻ ]]></b:skin> hoặc </style>
 .menu{position:absolute;top:23px;right:135px;text-align:center;padding:0;color:#333;font-size:46px;font-weight:700;line-height:25px;cursor:pointer}
#css-menu{position:fixed;top:0;right:-340px;z-index:9999;background:#2C2C2D;height:100%;transition:all .4s ease-in-out;}
#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a {margin: 0;padding: 0;border: 0;list-style: none;font-weight: normal;text-decoration: none;line-height: 1;  font-family: "Open Sans", sans-serif;font-size: 14px;position: relative;}
#cssmenu a {line-height: 1.3;padding: 12px 15px;}
#cssmenu {width: 240px;}
#cssmenu > ul > li {cursor: pointer;background: #efefef;border-top:1px solid #3d3d3d;border-bottom: 1px solid #161616;}
#cssmenu > ul > li:first-child {border-top:none;}
#cssmenu > ul > li:last-child {border-bottom:1px solid #3d3d3d;}
#cssmenu > ul > li:last-child > a {border-bottom: 1px solid #161616;}
#cssmenu > ul > li > a {font-size: 14px;display: block;color: #ffffff;text-shadow: 0 1px 1px #000;background: #2C2C2D;padding: 12px 15px;}
#cssmenu > ul > li > a:hover {text-decoration: none;background:#3d3d3d}
#cssmenu > ul > li.active {font-weight:700;}
#cssmenu > ul > li.home .close-menu{background: #2C2C2D;color: #fff;font-size:18px;font-weight:700;padding: 12px 15px;display:block}
#cssmenu > ul > li.has-sub > a:after {content: '';position: absolute;top: 15px;right: 10px;border: 5px solid transparent;border-left: 5px solid #ffffff;}
#cssmenu > ul > li.has-sub.active > a:after {right: 14px;top: 17px;border: 5px solid transparent;border-top: 5px solid #ffffff;}
#cssmenu ul ul {padding: 0;display: none;}
#cssmenu ul ul a {background: #efefef;display: block;color: #797979;font-size: 13px;}
#cssmenu ul ul a:hover {color: #000;}
#cssmenu ul ul li {border-bottom: 1px solid #c9c9c9;}
#cssmenu ul ul li.odd a {background: #e5e5e5;}
#cssmenu ul ul li:last-child {border: none;}
Bước 2: Đặt đoạn CODE này vào dưới thẻ <Body> hoặc trên thẻ </Body>
 <div class='menu' title='Menu'><span style='font-size:16px;position:absolute;top:1px;left:-48px'>Menu</span> &#8801;</div>
<div id='css-menu'>
<div id='cssmenu'>
<ul>
  <li class='home'><span class='close-menu' style='font-size:26px;font-weight:400;position:relative' title='Close'>&#8801; <span style='font-size:18px;font-weight:700;position:absolute;top:17px;left:33px'>Menu</span></span></li>
  <li><a href='/' title='Home'><span>Home</span></a></li>
   <li><a href='#' title='Daftar Isi'><span>Sitemaps</span></a></li>
   <li class='has-sub'><a href='#' title='About This Blog'><span>About This Blog</span></a>
      <ul>
         <li><a href='#' title='About'><span>About</span></a></li>
         <li><a href='#' title='Contact'><span>Contact</span></a></li>
         <li class='last'><a href='#' title='Privacy'><span>Privacy</span></a></li>
      </ul>
   </li>
<li><a href='#' title='Pasang Iklan'><span>Advertiser</span></a></li>
   <li class='has-sub'><a href='#' title='More'><span>More Menus</span></a>
      <ul>
<li><a href='#' title='More Menu 1'><span>More Menu 1</span></a></li>
<li><a href='#' title='More Menu 2'><span>More Menu 2</span></a></li>
<li><a href='#' title='More Menu 3'><span>More Menu 3</span></a></li>
<li><a href='#' title='More Menu 4'><span>More Menu 4</span></a></li>
<li><a href='3' title='More Menu 5'><span>More Menu 5</span></a></li>
<li class='last'><a href='#' rel='nofollow' target='_blank' title='More Menu 6'><span>More Menu 6</span></a></li>
      </ul>
   </li>
</ul>
</div>
</div>
Cuối cùng thì để Menu này hoạt động chúng ta phải cần một đoạn Javascript - Hãy chèn nó trên thẻ đóng </Body>
 <script type='text/javascript'>
//<![CDATA[
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active');
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;
  }
});
//]]>
  </script>
<script type='text/javascript'>
$(function() {
    $('.menu').click(function () {
    $('#css-menu').css({right:'0'});
});
    $('.close-menu').click(function() {
    $('#css-menu').css({right:'-340px'});
});
 });
</script>
Bước 4: Lưu mẫu và tận hưởng.

Tổng kết: 
Đây là một thủ thuật nhỏ giúp bạn trong quá trình thiết kế Website một cách dễ dàng hơn.
Thủ Thuật Blogspot | Tạo Menu Slide Bên Bằng Jquery Tuyệt Đẹp Cho Blogspot Thủ Thuật Blogspot | Tạo Menu Slide Bên Bằng Jquery Tuyệt Đẹp Cho BlogspotKênh Nhạc Official8.8stars based on9reviewsXin chào các bạn, Mấy hôm nay gió to quá nên mình muốn đổi gió cái ! HIHI. Nay mình sẽ không đăng bài về chia sẻ ảnh bìa mà thay vào đó mình...
Post a Comment