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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

10 nhận xét

  1. @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

    Trả lờiXóa
  2. 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 !!!?

    Trả lờiXóa
  3. 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.

    Trả lờiXóa
  4. 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.

    Trả lờiXóa
  5. OK. Mình làm đc rồi, thank nhiều nhé!

    Trả lờiXóa
  6. 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

    Trả lờiXóa
  7. 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.

    Trả lờiXóa
  8. Admin Delete Comment của thằng Admin Khoehang ở trên đi thôi chemgio

    Trả lờiXóa
  9. 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?

    Trả lờiXóa