Cho một nhãn nhất định: (nhãn Ảt thuộc blog mình)
Cho toàn bộ bài viết trong blog:
Nào bắt tay vào làm nhá:
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>
- Code:
<script src='http://zaivnit.googlecode.com/files/jquery.min.v1.4.1.js.txt' type='text/javascript'/>
<script src='http://zaivnit.googlecode.com/files/jQ_rotator.js.txt' type='text/javascript'/>
<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
- Code:
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://zaivnit.googlecode.com/files/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 = "Virus - Spyware"; //thay thành nhãn bài viết của bạn
home_page = "http://www.zaivnit.co.cc/"; //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://zaivnit.googlecode.com/files/JQ_rotarorlabel.js.txt" 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.
- Code: CHỌN TOÀN BỘ
http://zaivnit.googlecode.com/files/JQ_rotarorlabel.js.txt
 | Lưu ý: up lại toàn bộ file js và linh hình ảnh để tránh ảnhh hưởng đến blog bạn |
0 comments
Post a Comment