Trình diễn bài viết mới với nhiều hiệu ứng ngẫu nhiên bằng JQuery
Điểm 4.6/5 dựa vào 87 đánh giá
(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ật1. Đă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>
<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>
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
Tags:
Blogspot nâng cao
Loading...
Cuoilon chậm ve sầu
Trả lờiXóaqua hay, thử làm cái đã
Trả lờiXóaAdmin ơ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?
Trả lờiXóaĐể 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.
Trả lờiXóaChân thành cảm ơn!
Chào bạn !
Trả lờiXóaBà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
@ Bùi Văn Sum: Có thể đụng chạm JQ nào trong template rồi bạn
Trả lờiXóahttp://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
Trả lờiXóa@ 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.
Trả lờiXóa@ Trai Đất Mũi: Mình đã xóa đi để mỗi jquery của tdm nhg vẫn ko hiện ra được?
Trả lờiXóaGood chưa từng thấy! nhưng hơi chậm, dù sao cũng là best
Trả lờiXóaPhí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?
Trả lờiXóaMình ở: http://attykingdom.blogspot.com
Cám ơn trước.
Nói thêm: mình rất hài lòng
@ ATTY KINGDOM: Bạn chỉnh ở biến summaryPost = 320; nhé, tăng số ký tự lên là được.
Trả lờiXóaBạ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%
Trả lờiXóaNgoà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