</head> hoặc </body> và thêm đoạn mã sau vào trước nó <script src='http://code.jquery.com/jquery-latest.js'/>3. Tiếp theo, tìm đoạn mã tương tự như đoạn dưới đây (có thể không gióng chính xác)
<script src='https://nhatchanh.googlecode.com/svn/blogspot/timeago.js'/>
<script>
jQuery(document).ready(function($){
$("abbr.timeago").timeago()
});
</script>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>4. Thay thế nó bằng đoạn mã sau:
<abbr class="timeago" expr:title="data:post.timestampISO8601"><data:post.dateHeader/></abbr>5. Lưu mẫu của bạn lại
Hiệu ứng Hover hình ảnh sử dụng thuộc tính opacity trong CSS3Ban đầu hình ảnh được tải lên với opacity 0.5
$(document).ready(function() {
$("#HoverEffect").css("opacity", 0.5);
$("#HoverEffect").hover(function() {
$(this).animate({opacity: 1.0}, 500);
}, function() {
$(this).animate({opacity: 0.5}, 500);
});
});Sử dụng bằng cách thêm id="HoverEffect" vào thẻ <img><img src="hinh-anh.JPG" id="HoverEffect" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tree menu css slide up down</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
$('#tree-menu > li > a').click(function(){
var next = $(this).next();
if(next.is(':visible')){
next.slideUp(300);
$(this).find('span').html('+');
}else{
next.slideDown(300);
$(this).find('span').html('-');
}
});
});
</script>
<style type="text/css">
body { font:12px Tahoma, Geneva, sans-serif; }
#div-head-tree-menu { width:230px; padding:10px 10px 10px 10px; text-align:center; background-color:#ddd; border:1px solid #ccc; border-bottom:5px solid #a8bfd7; }
#div-tree-menu { padding-left:20px; padding-bottom:10px; width:230px; background-color:#eee; overflow:hidden; border:1px solid #aaa; border-top:1px solid #FFF; }
#tree-menu { width:200px; float:left; margin:0; padding:0; margin-top:-1px;}
#tree-menu ul { margin:0; padding:8px; }
#tree-menu li { list-style:none; padding:8px; margin:0; }
#menu-lv1 { display:none; }
#menu-lv2 { display:none; }
#menu-lv3 { display:none; }
#menu-lv4 { display:none; }
a:link { text-decoration: none; color: #00F; }
a:visited { text-decoration: none; color: #0CF; }
a:hover { text-decoration: none; color: #F60; }
a:active { text-decoration: none; color: #F00; }
.txt-red { color:#F00 }
</style>
</head>
<body>
<div id="div-head-tree-menu">: <a href="http://www.nhatchanh.info/2015/02/jquery-tree-menu-css-slide-up-down.html">Tree Menu</a> :</div>
<div id="div-tree-menu">
<ul id="tree-menu">
<li><a href="#"><span>+</span> menu-1</a>
<ul id="menu-lv1">
<li>› <a href="#">sub-menu-1-1</a></li>
<li>› <a href="#">sub-menu-1-2</a></li>
<li>› <a href="#">sub-menu-1-3</a></li>
<li>› <a href="#">sub-menu-1-4</a></li>
</ul>
</li>
<li><a href="#"><span>+</span> menu-2</a>
<ul id="menu-lv2">
<li>› <a href="#">sub-menu-2-1</a></li>
<li>› <a href="#">sub-menu-2-2</a></li>
<li>› <a href="#">sub-menu-2-3</a></li>
<li>› <a href="#">sub-menu-2-4</a></li>
</ul>
</li>
<li><a href="#"><span>+</span> menu-3</a>
<ul id="menu-lv3">
<li>› <a href="#">sub-menu-3-1</a></li>
<li>› <a href="#">sub-menu-3-2</a></li>
<li>› <a href="#">sub-menu-3-3</a></li>
<li>› <a href="#">sub-menu-3-4</a></li>
</ul>
</li>
<li><a href="#"><span>+</span> menu-4</a>
<ul id="menu-lv4">
<li>› <a href="#">sub-menu-4-1</a></li>
<li>› <a href="#">sub-menu-4-2</a></li>
<li>› <a href="#">sub-menu-4-3</a></li>
<li>› <a href="#">sub-menu-4-4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Tạo Menu Treeview đa cấp bằng HTML và CSS
/******* TOOLTIP*******/
#tooltip {
font:.9em/1.6 Tahoma,Sans-serif;
text-shadow: 0 1px rgba( 0, 0, 0, .5 );
color: #fff;
background: #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid #fff;
-webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
-moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
position: absolute;
z-index: 100;
padding: 2px 5px 2px;
}
#tooltip:after {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 10px solid #333;
border-top-color: rgba( 0, 0, 0, .9 );
content: '';
position: absolute;
left: 50%;
bottom: -7px;
margin-left: -10px;
}
#tooltip.top:after {
border-top-color: transparent;
border-bottom: 10px solid #333;
border-bottom-color: rgba( 0, 0, 0, .9 );
top: -17px;
bottom: auto;
}
#tooltip.left:after {
left: 10px;
margin: 0;
}
#tooltip.right:after {
right: 10px;
left: auto;
margin: 0;
}
<script>
/******* TOOLTIP*******/
$( function()
{
var targets = $( '[rel~=tooltip]' ),
target = false,
tooltip = false,
title = false;
targets.bind( 'mouseenter', function()
{
target = $( this );
tip = target.attr( 'title' );
tooltip = $( '<div id="tooltip"></div>' );
if( !tip || tip == '' )
return false;
target.removeAttr( 'title' );
tooltip.css( 'opacity', 0 )
.html( tip )
.appendTo( 'body' );
var init_tooltip = function()
{
if( $( window ).width() < tooltip.outerWidth() * 1.5 )
tooltip.css( 'max-width', $( window ).width() / 2 );
else
tooltip.css( 'max-width', 340 );
var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
pos_top = target.offset().top - tooltip.outerHeight() - 17;
if( pos_left < 0 )
{
pos_left = target.offset().left + target.outerWidth() / 2 - 17;
tooltip.addClass( 'left' );
}
else
tooltip.removeClass( 'left' );
if( pos_left + tooltip.outerWidth() > $( window ).width() )
{
pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 17;
tooltip.addClass( 'right' );
}
else
tooltip.removeClass( 'right' );
if( pos_top < 0 )
{
var pos_top = target.offset().top + target.outerHeight();
tooltip.addClass( 'top' );
}
else
tooltip.removeClass( 'top' );
tooltip.css( { left: pos_left, top: pos_top } )
.animate( { top: '+=10', opacity: 1 }, 50 );
};
init_tooltip();
$( window ).resize( init_tooltip );
var remove_tooltip = function()
{
tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
{
$( this ).remove();
});
target.attr( 'title', tip );
};
target.bind( 'mouseleave', remove_tooltip );
tooltip.bind( 'click', remove_tooltip );
});
});
</script>
Ví dụ:
<abbr title="User Experience" rel="tooltip">UX</abbr>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<code> bên trong một vùng <div> trở thành một từ khóa cho các trang kết quả tìm kiếm trên trang web của bạn<script>//<![CDATA[HTML:
$(function() {
$('div.post-body').children('code').each(function() {
$(this).replaceWith(function() {
return $('<a href="http://nhatchanh.info/p/search-results.html?q=' + $(this).text() + '" target="_blank" title="Tìm từ khóa này"><code>' + $(this).html() + '</code></a>');
});
});
});
//]]></script>
<div class="post-body">
Thủ thuật <code>Blogger</code>
</div>
Xem thêm: Chia sẻ lên Facebook để mở khóa nội dung được ẩn sử dụng jQuery và Facebook API- Bước 1: Thêm đoạn javascript dưới đây template của bạn (nên đặt trước thẻ </body>)
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>- Bước 2: Thêm doạn mã dưới đây vào template:
<script type="text/javascript">
twttr.events.bind(
'tweet',
function (event) {
var secret_data = "<center><strong>Nội dung cần hiển thị!</strong></center>";
jQuery("#results").html(secret_data);
}
);
</script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' />
<div id="results">
<a class="twitter-share-button" href="https://twitter.com/share"
data-via="tv0656m006" data-text="Chia sẻ thủ thuật Blogger/Blogspot,..." data-size="medium" data-url="http://nhatchanh.info" data-count="vertical">
Tweet</a>
</div>
