Cho một nhãn nhất định: (nhãn 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:
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
type="text/javascript"
src="http://traidatmui-tips.googlecode.com/files/jquery.min.v1.4.1.js"></script>
<script type="text/javascript"
src="http://traidatmui-tips.googlecode.com/files/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>
5.
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] =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBNL-CK073UM7sKfSjjzg34OAh5zMQM9jlyr82WCxI5bxU2CYYPZgv2m9h-noT5g9eYLbOIywqGnQN5zgaVrGedfMIDj9z8DgFJT6bJgXGJZh7yzX4A54iS0DHVDQkVzeYitAib1fw1f4A/";
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://traidatmui-tips.googlecode.com/files/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.
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://traidatmui-tips.googlecode.com/files/JQ_rotaror-post.js
