Hướng dẫn Tạo Featured Post với JQuery |Blog Trần Phúc Minh

Trang chủ » Thủ thuật Blogger » Bạn đang xem:

Hướng dẫn Tạo Featured Post với JQuery

Bằng cách sử dụng JQuery bạn có thể tạo cho mình một tiện ích bài nổi bật – Features Post tự động trình diễn slide 4 bài đang do bạn upload các thông tin về URL, hình ảnh và đoạn miêu tả với kích thước mặc định 600px x 240px.

(Hình minh họa tiện ích Featured Post)

Bạn có thể thực hiện một cách dễ dàng như sau:

Bước 1: Truy cập vào Blogger.
- Truy cập vào Blogger Bảng điều khiển (Dashboard) >> Thiết kế (Design) >> Chỉnh sửa HTML (Edit HTML).
Bước1: Chèn mã CSS.
- Tìm kiếm đoạn code: </head>
- Thay thế </head> bằng đoạn mã sau:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>
</head>
- Lưu lại mẫu.
Bước3: Tạo tiện ích Featured Post
- Truy cập vào Thiết kế (Design) >> Phần tử trang (Page Elements) >> Click vào Thêm tiện ích ('Add a Gadget').
- Lựa chọn 'HTML/Javascript' và dán đoạn code dưới vào phần nội dung:
<ul class="slideshow">

<li><a href="Đường dẫn URL của bài Featured post 1"><img src="Chèn đường dẫn URL hình ảnh minh họa Featured post 1" title="Tiêu đề bài Featured post 1" alt="Đoạn text miêu tả bài viết Featured post 1 ." /></a></li>

<li><a href="Đường dẫn URL của bài Featured post 2"><img src="Chèn đường dẫn URL hình ảnh minh họa Featured post 2" title="Tiêu đề bài Featured post 2" alt="Đoạn text miêu tả bài viết Featured post 2 ." /></a></li>

<li><a href="Đường dẫn URL của bài Featured post 3"><img src="Chèn đường dẫn URL hình ảnh minh họa Featured post 3" title="Tiêu đề bài Featured post 3" alt="Đoạn text miêu tả bài viết Featured post 3 ." /></a></li>

<li><a href="Đường dẫn URL của bài Featured post 4"><img src="Chèn đường dẫn URL hình ảnh minh họa Featured post 4" title="Tiêu đề bài Featured post 4" alt="Đoạn text miêu tả bài viết Featured post 4 ." /></a></li>

</ul>
- Bạn thay đổi các thông tin đánh dấu màu trong đoạn code trên là xong.

Bài gốc:
http://tpm1512.blogspot.com/2011/02/huong-dan-tao-featured-post-voi-jquery.html

Từ khóa
Thủ thuật Blogger

Minh cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.

All comments [ 2 ]

Nguyễn Thành Sơn lúc 23:42 9 tháng 7, 2011

Chào bạn. Cảm ơn nhiều về bài viết, nhưng sao lúc mình thực hiện thao tác "Chèn đường dẫn URL hình ảnh minh họa Featured post 1" title="Tiêu đề bài Featured post 1" alt="Đoạn text miêu tả bài viết Featured post 1 ." thì không biết làm thế nào để nó xuất hiện đường dẫn, ảnh, tiêu đề. Có thể hướng dẫn mình code này được k? thks

cong ty bao ve lúc 14:02 18 tháng 11, 2011

Hình như code có 1 số đoạn bị lỗi. Không chạy được bạn ơi.:3)

Blog Trần Phúc Minh