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}Bước 2: Đặt đoạn CODE này vào dưới thẻ <Body> hoặc trên thẻ </Body>
#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;}
<div class='menu' title='Menu'><span style='font-size:16px;position:absolute;top:1px;left:-48px'>Menu</span> ≡</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>
<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'>≡ <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>
<script type='text/javascript'>Bước 4: Lưu mẫu và tận hưởng.
//<![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>
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.
Source: Arlinadzgn
Xem thêm thủ thuật blog: WEE2K BLOG
Mọi Bài Đăng Đều Được Đăng Tải Bởi Tác Giả Blog. Vui Lòng Ghi Nguồn Nếu Có Copy Bài Từ Blog Chúng Tôi.
0 Bình luận
Một số lưu ý khi bình luận
Không nói lời thiếu văn hóa, không quảng cáo thông qua Nhận xét.
Bấm Thông báo cho tôi (Notify me) bên dưới khung bình luận để nhận thông báo khi Admin trả lời
Mọi thắc mắc sẽ được giải đáp khi Admin Online.