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.
 

Xin chào các bạn ghé thăm trang Trần Phúc Minh, mong các bạn có nhận xét góp ý cho trang này