"Trình diễn bài viết dạng slide với Jquery"

(Traidatmui.com) – Hôm nay mình sẽ giới thiệu đến các bạn một thủ thuật trình diễn bài viết trông khá đẹp mắt. Thủ thuật này mình tìm thấy trên trang hacktutors.info, thấy có thể áp dụng cho blogspot nên mình xin chia sẽ đến các bạn cách để thực hiện thủ thuật này. Với thủ thuật này thì các bài viết của bạn sẽ được trình diễn dạng slide. Giống như trên trang vn.yahoo.com mà mình đã từng giới thiệu với các bạn.

1. Đăng nhập vào tài khoản Blogspot
2. Vào thiết kế chọn chỉnh sửa HTML
3. Chèn thêm code css vào trước thẻ ]]></b:skin>
#featured{
width:395px;
padding-right:240px;
position:relative;
height:250px;
background:#eee;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{/*tùy chỉnh tab bên phải*/
position:absolute;
top:0;
right:0px;
list-style:none;
padding-right:0px; margin:0;
width:295px;
}
#featured ul.ui-tabs-nav li{
padding:1px;
padding-left:13px;
font-size:12px;
}
#featured ul.ui-tabs-nav li span{
font-size:11px;
font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{ /*Tùy chỉnh tab bên trái*/
width:336px;
height:250px;
position:relative;
overflow:hidden;
border-right:5px solid #ccc;}

#featured .ui-tabs-hide{
display:none;
}

#featured li.ui-tabs-nav-item a{/*tùy chỉnh link bên trái*/
display:block;
height:59px;
color:#333;
background:#f2f2f2;
border-bottom:1px solid #fff;
border-left:1px solid #fff;
}
#featured li.ui-tabs-nav-item a:hover{
background:#ddd;
}
#featured li.ui-tabs-selected{
background:url('http://lh4.ggpht.com/_BTztXRwC9ik/TO5lVwaGedI/AAAAAAAAFDM/qcZgyMivkO0/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}

#featured ul.ui-tabs-nav li img{ /*phần ảnh thumb bên phải*/
float:left;
margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #fff;
}
#featured .ui-tabs-panel .info{/*tùy chỉnh màu nền, độ rộng, chiều cao...phần mô tả*/
position:absolute;
top:180px; left:0;
height:70px;
width: 350px;
background: url('http://lh5.ggpht.com/_BTztXRwC9ik/TO5mVS5x5FI/AAAAAAAAFDQ/UGog8fUi3E4/transparent-bg.png');
}
#featured .info h2{/*tùy chỉnh tiêu đề phần mô tả*/
background:#ccc;
font-size:12px;
font-family:arial;
padding:2px;
margin:0;
overflow:hidden;
}
#featured .info p{ /*tùy chỉnh phần mô tả*/
margin:0 5px;
font-family:verdana;
font-size:11px;
color:#f0f0f0;
padding-right:9px;}
#featured .info a{
text-decoration:none;
color:#000; /*màu tiêu đề bài viết (phần mô tả)*/
}
#featured .info a:hover{
text-decoration:underline;
}

.ui-tabs-nav-item img { /*độ rộng và chiều cao của ảnh thumb bên phải*/
width:45px;
height:45px;}

Bạn hãy dựa vào các phần trên để chỉnh sửa css cho phù hợp với blog của bạn.
4. Tiếp theo bạn hãy chèn code bên dưới vào sau thẻ <head>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.js" type="text/javascript"></script>
<script src="http://traidatmuidata.appspot.com/scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

5. Bây giờ bạn save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript và chèn code bên dưới vào HTML/Javascript đó
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh6.ggpht.com/_BTztXRwC9ik/TMmT8UtD9QI/AAAAAAAAElc/wEXpVqs7lt4/no.png";

showRandomImg = false;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
text = "no";
showPostDate = true;

summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";

numposts =4;
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn

</script>

<div id="featured">
<script src="http://data-traidatmui.appspot.com/scripts/slide_post_jquery1.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/slide_post_jquery2.js" type="text/javascript"></script>
</div>

7. Cuối cùng save lại.

Chúc bạn thành công

Xem khác cùng chủ đề

10 nhận xét | Viết lời bình

11/28/2010 10:51:00 CH Trả lời

( Vào đây mà xem - http://sachtroi.blogspot.com )

12/22/2010 05:53:00 SA Trả lời

@all: cho mình hỏi cái.....
Sao mà mình chèn 2 cái slide vào blogspot thì nó chỉ hoạt động được 1 cái thôi....nếu ai bít thì chỉ hộ........file của mình như thế này.:LINK cua FILE
mong rằng mọi người sẽ giúp mình

1/02/2011 01:39:00 SA Trả lời

hix,lúc trước làm đc, giờ thì gặp lỗi này " Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "head" must be terminated by the matching end-tag "". " ở BƯỚC 4 !!!?

Admin
1/02/2011 02:49:00 SA Trả lời

Do một số template không tự động chuyển đổi dấu (") thành (') đối với file *.JS. Bạn hãy bỏ thể đổi dấu như trên hoặc bỏ thẻ </script> phía sau 2 file JS và save lại.

1/18/2011 07:34:00 CH Trả lời

Mình bị lỗi ở bước thứ 4, không thể nhận đc code, mình sửa lại dấu " thành ' hay bỏ */script* đi ,nó cũng ko nhận.

1/18/2011 08:03:00 CH Trả lời

OK. Mình làm đc rồi, thank nhiều nhé!

4/09/2011 10:51:00 CH Trả lời

T cũng bị lỗi ở bước 4, ko lưu mẫu được. Cũng đã thay hết " thành ' trong Code bước 4, cũng bỏ script nằm cuối cùng. Nhưng cũng ko lưu được Cuoilon

Admin
4/10/2011 07:35:00 SA Trả lời

Có lẽ có sai sót nhỏ khi bạn thay thế. Nếu bạn k save được thì có thể copy code <script src="fileJS.js" type="text/javascript"></script> có sẵn trong template và thay thế địa chỉ file JS ở trên.

4/11/2011 01:10:00 SA Trả lời

Admin Delete Comment của thằng Admin Khoehang ở trên đi thôi chemgio

12/04/2011 12:53:00 SA Trả lời

sao mình làm ngon lanh hết các bước mà lại chỉ hiện cái khung trắng trống trơn vậy bạn?

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang