Trình diễn bài viết mới với nhiều hiệu ứng ngẫu nhiên bằng JQuery
Thứ Hai, 23 tháng 9, 2013

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

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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZRqLErNajFwn9w66J_XMhiuiD97MK_WEFxIh53o-edhZi1o2_zllaSdbHB6cokIU0levYidOt_TWrhFTJChv5hAhiUGcHwcZ0mJFncsg2MaHfoaadYzWyxLrAR3NhuDmIeNxV8X7c2sjN/";
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

Nguồn : traidatmui.com
Copy : CGC Blog
Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!
Từ Khóa :

0 Bình Luận:

Đăng nhận xét

☺ Nội quy comments của CGC Forum :
1. Comments không được sử dụng lời lẽ thiếu văn hóa, ảnh hưởng xấu đến chính trị, tổ chức, cá nhân.
2. Không được sử dụng comments với mục đích spam.
Những comments làm trái quy định sẽ bị xóa...!
Xin cảm ơn các bạn đã đóng góp comments và tuân thủ nội quy của blog !
Notice by Admin

 
CGC Forum | Thủ Thuật © 2011 - 2012 by Tran Viet Duc
Top Page