Tạo menu ẩn hiện trượt dọc bên trái cho blogspot, các thành phần của menu sẽ trượt dọc giúp tiết kiệm không gian hiển thị cho blogspot sẽ làm bạn hài lòng Tạo menu ẩn hiện trượt dọc tuyệt đẹp cho blogspot.
Cách thực hiện Tạo menu ẩn hiện trượt dọc:
BƯỚC 1: TẠO CSS CHO MENU TRƯỢT DỌC
Đăng nhập vào blogger >> Chọn mẫu >> Chỉnh sửa HTML >> Ctrl+F >> Tìm đến thẻ ]]></b:skin> và chèn đoạn CSS bên dưới trên thẻ ]]></b:skin>
.menu{position:absolute;top:15px;right:8%;text-align:center;padding:0;color:#333;font-size:28px;font-weight:700;line-height:25px;cursor:pointer}
#css-menu{border-top:6px solid #46a28d ;position:fixed;top:0;right:0px;z-index:9999;background:rgba(44, 44, 45, 0.82);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: #fff;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: 9px 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 #fff;}
#cssmenu > ul > li.has-sub.active > a:after {right: 14px;top: 17px;border: 5px solid transparent;border-top: 5px solid #fff;}
#cssmenu ul ul {padding: 0;display: none;}
#cssmenu ul ul.expand {height:200px;overflow:auto}
#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: Chèn HTML CHO MENU TRƯỢT DỌC
Sau khi chèn CSS xong tiếp tục chèn đoạn code bên dưới
dưới thẻ
<body>
<div class='menu' title='Click vào để mở Menu ~~>'><span style='font:bold 14px Sans-serif;color:#888;position:absolute;top:5px;left:-270%'>Menu</span> ≡</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'>► <span style='font-size:14px;font-weight:700;position:absolute;top:17px;left:44px'>Close 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 class='expand'>
<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='#' title='More Menu 5'><span>More Menu 5</span></a></li>
<li><a href='#' title='More Menu 6'><span>More Menu 6</span></a></li>
<li><a href='#' title='More Menu 7'><span>More Menu 7</span></a></li>
<li><a href='#' title='More Menu 8'><span>More Menu 8</span></a></li>
<li><a href='#' title='More Menu 9'><span>More Menu 9</span></a></li>
<li><a href='#' title='More Menu 10'><span>More Menu 10</span></a></li>
<li class='last'><a href='#' rel='nofollow' target='_blank' title='More Menu 11'><span>More Menu 11</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
BƯỚC 3: CHÈN JAVACRIPT CHO MENU BLOGSPOT
CHÈN đoạn Javacript bên dưới
trên thẻ
</body> để tạo hiệu ứng.
<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>
Một vài đoạn code mình đã tô đỏ các bạn sửa lại cho phù hợp với blog của mình nhé!
Vậy là bạn đã có menu trượt dọc khá đẹp cho blogspot rồi đấy!
CHIA SẺ NẾU BẠN THẤY BÀI VIẾT BỔ ÍCH
Tạo menu ẩn hiện trượt dọc tuyệt đẹp cho blogspot
![]()
Reviewed by
Unknown
on
01:34
Rating:
5
Home
»
blogspot
»
Tạo menu ẩn hiện trượt dọc tuyệt đẹp cho blogspot
Tác giả
Unknown
01:34
Tạo menu ẩn hiện trượt dọc bên trái cho blogspot, các thành phần của menu sẽ trượt dọc giúp tiết kiệm không gian hiển thị cho blogspot sẽ làm bạn hài lòng Tạo menu ẩn hiện trượt dọc tuyệt đẹp cho blogspot.
Cách thực hiện Tạo menu ẩn hiện trượt dọc:
BƯỚC 1: TẠO CSS CHO MENU TRƯỢT DỌC
Đăng nhập vào blogger >> Chọn mẫu >> Chỉnh sửa HTML >> Ctrl+F >> Tìm đến thẻ ]]></b:skin> và chèn đoạn CSS bên dưới trên thẻ ]]></b:skin>
.menu{position:absolute;top:15px;right:8%;text-align:center;padding:0;color:#333;font-size:28px;font-weight:700;line-height:25px;cursor:pointer}
#css-menu{border-top:6px solid #46a28d ;position:fixed;top:0;right:0px;z-index:9999;background:rgba(44, 44, 45, 0.82);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: #fff;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: 9px 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 #fff;}
#cssmenu > ul > li.has-sub.active > a:after {right: 14px;top: 17px;border: 5px solid transparent;border-top: 5px solid #fff;}
#cssmenu ul ul {padding: 0;display: none;}
#cssmenu ul ul.expand {height:200px;overflow:auto}
#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: Chèn HTML CHO MENU TRƯỢT DỌC
Sau khi chèn CSS xong tiếp tục chèn đoạn code bên dưới
dưới thẻ
<body>
<div class='menu' title='Click vào để mở Menu ~~>'><span style='font:bold 14px Sans-serif;color:#888;position:absolute;top:5px;left:-270%'>Menu</span> ≡</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'>► <span style='font-size:14px;font-weight:700;position:absolute;top:17px;left:44px'>Close 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 class='expand'>
<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='#' title='More Menu 5'><span>More Menu 5</span></a></li>
<li><a href='#' title='More Menu 6'><span>More Menu 6</span></a></li>
<li><a href='#' title='More Menu 7'><span>More Menu 7</span></a></li>
<li><a href='#' title='More Menu 8'><span>More Menu 8</span></a></li>
<li><a href='#' title='More Menu 9'><span>More Menu 9</span></a></li>
<li><a href='#' title='More Menu 10'><span>More Menu 10</span></a></li>
<li class='last'><a href='#' rel='nofollow' target='_blank' title='More Menu 11'><span>More Menu 11</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
BƯỚC 3: CHÈN JAVACRIPT CHO MENU BLOGSPOT
CHÈN đoạn Javacript bên dưới
trên thẻ
</body> để tạo hiệu ứng.
<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>
Một vài đoạn code mình đã tô đỏ các bạn sửa lại cho phù hợp với blog của mình nhé!
Vậy là bạn đã có menu trượt dọc khá đẹp cho blogspot rồi đấy!
CHIA SẺ NẾU BẠN THẤY BÀI VIẾT BỔ ÍCH
Từ khóa:
blogspot
Không có nhận xét nào :