</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>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=212550605589620&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
function shareOnFB() {
var e = {
method: "feed",
link: "http://nhatchanh.info",
picture: "https://farm4.staticflickr.com/3914/14601901546_3a8dfd5d32_b.jpg",
name: "NhatChanh's Blog | Chia sẽ Thủ thuật - Blogger - Tutorials",
caption: 'nhatchanh.info',
description: "NhatChanh.Info là một blog chia sẽ các thủ thuật liên quan đến việc sử dụng Blogspot"
};
FB.ui(e, function(t) {
if (t["post_id"]) {
//Sau khi chia sẻ thành công, nội dung cần hiển thị của bạn ở đây
var secret_data = "<h2>Cảm ơn bạn đã quan tâm!<br />Hy vọng bài viết này sẻ làm bạn hài lòng!<br />Chúc bạn thành công ^^</h2>";
jQuery("#results").html(secret_data);
}
})
}
</script>
<div id="results">
<div style="text-align:center; color:#FF0000;">
Nội dung đã bị khóa! Xin vui lòng bấm vào nút chia sẽ để mở khóa
<br /><br />
<img onclick="shareOnFB();" style="cursor:pointer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHMayMw9wOwsKc1sCu4Xi8v73vrl2P06Ed2zWkMlnkc1gLcmgTMSn_B2OAF4FodUrmozQIO-kNDczz75wK_lawef3ibH36bCUb5MvxI1_F0AsWXEmdYoJIwjsJ6k3-1eiXX_OzXjwfqMFN/s1600/fbshare.png">
</div>
</div>
<!--Lazy Loading-->Với đoạn mã trên hình ảnh sẽ được nạp với hiệu ứng fadeIn của jQuery trong đẹp mắt và chuyên nghiệp.
<script src='https://65a77fe780fd0d6fd0d7c825fbb01c35124d06df.googledrive.com/host/0BwL0KbT-xOaTZzd4ZldpckNDbUE'></script>
<script>//<![CDATA[
$(function () {
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
//]]></script>
<img src="http://hinh_anh_cua_toi.jpg" width="440" height="280" />và để áp dụng lazyload bạn phải thay đổi nó lại thành:
<img data-original="http://hinh_anh_cua_toi.jpg" class="lazy" width="440" height="280" />Như vậy, mỗi khi muốn sử dụng lazyload cho hình ảnh nào thì chỉ việc thay đổi src thành data-original và thêm lớp class="lazy" vào thẻ hình ảnh đó.
<form class="search-form" action="/search" method="get">CSS
<div class="input-wrapper">
<input type="text" name="q" placeholder="Tìm kiếm...">
<a title="Tìm kiếm" class="sc" href="/"></a>
</div>
</form>
.input-wrapper {
border:1px solid #B9E8FB;
width:26px;
height:26px;
background-color:white;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
overflow:hidden;
position:relative;
}
.input-wrapper input,
.input-wrapper input:focus {
border:none;
background:none;
margin:0 0;
padding:0 5px;
display:block;
width:200px;
height:26px;
font:normal normal 12px/26px Arial,Sans-Serif;
color:#1C86AF;
outline:none;
}
.input-wrapper.focus {
background-color:#FFFFFF;
border-color:#3EBFF0;
}
.input-wrapper .sc {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGOSURBVDhPrZJPSwJRFMXPokD6BkFQyzaRQUGrKII21a5Vu9oHLVq07hNUSFSYWqOmwjSGY0aRQqsCXUQJlaXSaEZamI2mTnV7WguNMUR6cHiX98793fv+AP8+9gvd2P9cYuKZdPDQYH01/NSMPcWCYyIcVMjL4r13AT7S/A1yFZzM+J3sUZYZbByisojDEuCD4C4GGKRJHbIjj+DoxyjI2iqTmGuHq/AIt0JwFgdqAF4dcOUJvDynanDK8xCLBCHjrQF48WE3S9h+61A18C/97DiEnXRaHWBPiuDTBHtqQtXgSE1BkAm2pF8dYHuYheOJYE3kVQ3WRACOVGl/uvZLmOMxWO4JW9IFzLExcNFWcNIouNgJrGzdHCup+oKraJzUBlM4DovE7iJB5YqlmbsjbEYfsBXJwp5k8U1v7S6MEQ2MoRnob5/L3RhvMzCEFrDmb4H+ugebkSI2Qp8w3HTV9zt/u0yhIQbMwRjOw3De1xhkNTiM9eAHTFHC2mVnYxDdqRb6KwUrZ5ONASqyvgCU5N7E8iBBBAAAAABJRU5ErkJggg==') no-repeat 50% 50%;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
jQuery<script type="text/javascript">
$(function() {
$('.search-form .sc').on("click", function() {
$(this).hide()
.parent().addClass('focus')
.stop().animate({width:200}, 120, "swing")
.find('input').trigger("focus")
.on("focusout", function() {
$(this).next().show()
.parent().removeClass('focus')
.stop().animate({width:26}, 120, "swing");
});
return false;
});
});
</script>
