"Trình diễn bài viết mới với nhiều hiệu ứng ngẫu nhiên bằng JQuery"

(Traidatmui.com) – Bài viết hôm nay mình chia sẻ cùng các bạn thủ thuật liên quan đến bài viết mới, ở đây là một dạng trình diễn các bài viết mới khác hẳn so với các bài viết trước mà mình đã từng giới thiệu. Ở đây chúng ta sẽ trình diễn bài viết dạng slide với nhiều hiệu ứng khác nhau và các hiệu ứng này sẽ trình diễn một các ngẫu nhiên và luân phiên nhau. Bên cạnh đó trong đây nó còn liệt kê list các bài viết nằm bên trái để người dùng có thể dễ dàng chọn bài viết mới mà họ quan tâm. Tuy nhiên trong thủ thuật này có một yếu điểm là chúng ta không thể tùy chỉnh độ rộng hay chiều cao của hình ảnh trình chiếu, nó sẽ trình diễn độ rộng hay chiều cao thực của chính hình ảnh trong bài viết của bạn.

Hình ảnh minh họa
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jQ_rotator.js"></script>

<script type="text/javascript">
$(document).ready(
function() {
var $container = $(".container");
$container.wtListRotator({
screen_width:400, //độ rộng của phần trình chiếu ảnh
screen_height:300, //chiều cao của phần trình chiếu ảnh
item_width:220, //độ rộng của list bài viết bên trái
item_height:75, //chiều cao của mỗi bài viết list bên trái
item_display:4,
list_align:"left",
scroll_type:"mouse_move",
auto_start:true,
delay:7000,
transition:"random",
transition_speed:800, //tốc độ trình chiếu đơn vị giây
display_playbutton:true,
display_number:true,
display_timer:true,
display_arrow:true,
display_thumb:true,
display_scrollbar:true,
pause_mouseover:false,
cpanel_mouseover:false,
text_mouseover:false,
text_effect:"fade",
text_sync:true,
cpanel_align:"TR",
timer_align:"bottom",
move_one:false,
auto_adjust:true,
shuffle:true,
block_size:75,
vert_size:50,
horz_size:50,
block_delay:35,
vstripe_delay:90,
hstripe_delay:180
});});
</script>

<style type='text/css'>
.cap-title a{font-size:12px; color:#000; }
.cap-title a:hover{color:#666; }
.sumtext {top:200px; left:0px; width:400px; }
.l-rotator a{color:#faa707;}
.l-rotator a:hover{color:#fff;}
.l-rotator{
font-family:Arial;
font-size:12px;
background-color:#000;
border:4px solid #ccc;
position:relative;
width:400px;
height:300px;
overflow:hidden;
}

.l-rotator .screen{
position:relative;
top:0;
left:250px;
width:400px; /*độ rộng phần trình chiếu ảnh*/
height:300px; /*chiều cao phần trình chiếu ảnh*/
overflow:hidden;
}
.l-rotator .main-img{
display:none;
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.l-rotator .textbox{
position:absolute;
z-index:4;
overflow:hidden;
visibility:hidden;
}
.l-rotator .inner-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#FFF;
filter:alpha(opacity=70);
opacity:.7;
z-index:0;
}
.l-rotator .inner-text{
position:absolute;
top:0;
left:0;
padding:5px;
z-index:1;
}
.l-rotator #timer{
position:absolute;
left:0;
height:4px;
background-color:#FFF;
filter:alpha(opacity=50);
opacity:.5;
z-index:5;
visibility:hidden;
}
.l-rotator .cpanel{
position:absolute;
margin:5px;
z-index:6;
visibility:hidden;
}
.l-rotator #num-info{
position:relative;
float:left;
height:22px;
line-height:22px;
padding:0 4px;
text-align:center;
color:#FFF;
background:#000;
background:rgba(0,0,0,.7);
}
.l-rotator #preloader{
position:absolute;
top:50%;
left:50%;
width:34px;
height:34px;
margin-top:-17px;
margin-left:-17px;
z-index:7;
background:#000 url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TdIN76kMS6I/AAAAAAAAAUU/Ak1Kh-p0MiE/code1kcomloader.gif) no-repeat center;
}
.l-rotator .thumbnails{
position:absolute;
top:0;
left:0;
overflow:hidden;
z-index:10;
}
.l-rotator .thumbnails ul{
list-style:none;
position:absolute;
top:0;
left:0;
height:999999px;
margin:0;
padding:0;
}
.l-rotator .thumbnails li{
position:relative;
display:block;
float:left;
clear:both;
}
.l-rotator .thumbnails li a{
display:none;
}
.l-rotator .thumbnails li div{
display:none;
color:#FFF;
background-color:#000;
}
.l-rotator #right-arrow,
.l-rotator #left-arrow{
position:relative;
display:block;
margin-left:-7px;
float:left;
width:12px;
}
.l-rotator #right-arrow{
background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TdIN78qXmhI/AAAAAAAAAUQ/zZvaII55Id0/code1kcomrightarrow.png) left center no-repeat;
}

.l-rotator .thumbnails .thumb{
font-weight:bold;
position:relative;
display:block;
float:left;
cursor:pointer;
padding:5px;
color:#000;
background:#eee;
background:-webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
background:-moz-linear-gradient(top, #FFF, #EEE);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#EEEEEE');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#EEEEEE')";
overflow:hidden;
}
.l-rotator .thumbnails li.selected .thumb{
background:#333;
background:-webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
background:-moz-linear-gradient(top, #666, #333);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#333333');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#333333')";
}
.l-rotator .thumb img{
border:1px solid #ccc;
display:block;
float:left;
width:64px; /*độ rộng ảnh thumb của list*/
height:64px; /*chiều cao ảnh thumb của list*/
padding:2px;
margin:-2px 5px 0px -3px;
}
.l-rotator .thumb p{
display:block;
overflow: hidden;
margin:0;
}
.l-rotator .thumbnails li.selected .thumb{
color:#FFF;
border-left:none;
border-right:none;
border-bottom:1px solid #333;
cursor:default;
}
.l-rotator .thumbnails li.item-over .thumb{
background:#DDD;
}
.l-rotator #scrollbar{
position:relative;
width:2px;
height:100%;
overflow:hidden;
background-color:#FFF;
visibility:hidden;
}
.l-rotator #knob{
position:absolute;
top:0;
left:0;
width:2px;
}
.l-rotator .btn-pane{
position:absolute;
top:0;
left:0;
width:100%;
height:24px;
z-index:2;
visibility:hidden;
}
.l-rotator #up-btn,
.l-rotator #down-btn{
position:absolute;
top:0;
left:50%;
width:60px;
height:24px;
margin-left:-30px;
}
.l-rotator .block,
.l-rotator .vpiece,
.l-rotator .hpiece{
position:absolute;
z-index:2;
}
</style>

Ở đây mình chỉ chú thích một số thuộc tính cơ bản có ảnh hưởng đến mỗi blog khác nhau, bạn có thể dựa vào các hướng dẫn và chỉnh sử lại cho phù hợp. Một số các thuộc tính khác bạn có thể tự tìm hiểu thêm.

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh6.ggpht.com/_BTztXRwC9ik/TMmT8UtD9QI/AAAAAAAAElc/wEXpVqs7lt4/no.png";
showRandomImg = false;
aBold = true;
text = "Nhận xét";
showPostDate = true;
sumtitle = 100;
summaryPost = 320; //số ký tự hiển thị phần tóm tắt bài viết
summaryFontsize = 12;
summaryColor = "#000";
numposts =10; //số bài viết hiển thị, ở đây mình chỉ hiển thị tối đa là 10
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 class="panel"><div class="container"><div class="l-rotator"><div class="screen"></div><div class="thumbnails">
<script src="http://data-traidatmui.appspot.com/scripts/JQ_rotarorlabel.js" type="text/javascript"></script>
</div></div></div></div>

7. Save tiện ích lại

Nếu muốn hiển thị bài viết không theo từng nhãn mà cho toàn bài viết thì bạn thay link file JS (jQrotator_label.js) ở trên thành link bên dưới.
http://data-traidatmui.appspot.com/scripts/JQ_rotaror-post.js


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

Tham khảo code từ code1k.com

Xem khác cùng chủ đề

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

6/13/2011 04:20:00 SA Trả lời

Cuoilon chậm ve sầu

Nặc danh
6/14/2011 07:49:00 SA Trả lời

qua hay, thử làm cái đã

Nặc danh
10/02/2011 11:49:00 SA Trả lời

Admin ơi cho em hỏi sao em làm mà không được vậy? chỉ thay hai linhk màu đỏ phải không anh nhưng mà sao khi em thay thì không thấy nó hiển thị gì vậy anh?

Admin
10/03/2011 10:04:00 CH Trả lời

Để tránh mất thời gian trả lời những comments dạng spam, nên mình sẽ không trả lời bất kì những comments dạng "Ẩn danh" mong bạn thông cảm, để có thời gian trả lời những bạn thật sự quan tâm đến câu hỏi và câu trả lời, nếu bạn thật sự cần giúp đỡ mong rằng các bạn hãy comment với tên hoặc nickname của mình.

Chân thành cảm ơn!

12/02/2011 01:47:00 SA Trả lời

Chào bạn !
Bài viết rất hay nhưng mình làm xong chỉ hiện lên khung màu đen. nhờ bạn giúp với

Admin
12/02/2011 05:54:00 SA Trả lời

@ Bùi Văn Sum: Có thể đụng chạm JQ nào trong template rồi bạn

3/02/2012 07:58:00 SA Trả lời

http://www.dienphuc.co.cc/ Mình cũng giống Bùi Văn Sum liệu có cách nào sửa ko ạ..Thanks

Admin
3/02/2012 08:09:00 SA Trả lời

@ doanluanvan: Có thể trong temp của bạn có chứa nhiều file jquery, bạn nên giữ lại 1 file jquery trong temp thôi bạn.

3/02/2012 08:59:00 SA Trả lời

@ Trai Đất Mũi: Mình đã xóa đi để mỗi jquery của tdm nhg vẫn ko hiện ra được?

4/01/2012 01:02:00 SA Trả lời

Good chưa từng thấy! nhưng hơi chậm, dù sao cũng là best

4/01/2012 08:18:00 CH Trả lời

Phía bên phải của mình hiện thiếu chữ trong phần summaryPost, chỉnh làm sao vậy?
Mình ở: http://attykingdom.blogspot.com
Cám ơn trước.
Nói thêm: mình rất hài lòng

Admin
4/02/2012 12:42:00 SA Trả lời

@ ATTY KINGDOM: Bạn chỉnh ở biến summaryPost = 320; nhé, tăng số ký tự lên là được.

7/24/2015 02:18:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





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