Hôm nay mình sẽ giới thiệu đến các bạn một thủ thuật trình diễn bài viết trông khá đẹp mắt. Thủ thuật này mình tìm thấy trên trang hacktutors.info, thấy có thể áp dụng cho blogspot nên mình xin chia sẽ đến các bạn cách để thực hiện thủ thuật này. Với thủ thuật này thì các bài viết của bạn sẽ được trình diễn dạng slide. Giống như trên trang vn.yahoo.com mà mình đã từng giới thiệu với các bạn. Xem Demo tại đây =>http://gaincapital-forex-com.blogspot.com
1. Đăng nhập vào tài khoản Blogspot
2. Vào thiết kế chọn chỉnh sửa HTML
3. Chèn thêm code css vào trước thẻ ]]></b:skin>
#featured{
width:395px;
padding-right:240px;
position:relative;
height:250px;
background:#eee;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{/*tùy chỉnh tab bên phải*/
position:absolute;
top:0;
right:0px;
list-style:none;
padding-right:0px; margin:0;
width:295px;
}
#featured ul.ui-tabs-nav li{
padding:1px;
padding-left:13px;
font-size:12px;
}
#featured ul.ui-tabs-nav li span{
font-size:11px;
font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{ /*Tùy chỉnh tab bên trái*/
width:336px;
height:250px;
position:relative;
overflow:hidden;
border-right:5px solid #ccc;}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*tùy chỉnh link bên trái*/
display:block;
height:59px;
color:#333;
background:#f2f2f2;
border-bottom:1px solid #fff;
border-left:1px solid #fff;
}
#featured li.ui-tabs-nav-item a:hover{
background:#ddd;
}
#featured li.ui-tabs-selected{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYmzC67coOBKVmCFNPmsKFMzX5nqbM8w7G9M8ZOwPl8ugbm6xHSuFiMDDDFAjYVxCeHXyH-UAVjxDtyjhBsPuUuLBxGgZW3p-LJ5QYiE4jSqfQWU7RaG4paMC44XQGFlflofHRHaiTP5k/') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{ /*phần ảnh thumb bên phải*/
float:left;
margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #fff;
}
#featured .ui-tabs-panel .info{/*tùy chỉnh màu nền, độ rộng, chiều cao...phần mô tả*/
position:absolute;
top:180px; left:0;
height:70px;
width: 350px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2dlxk8Lxu5EY9XBFycMizKu2NqNchOpCp-FMMqTYTvMjhtPC8ygCiYo1hOeIDplmQKNqZ-cp4KtymMK0C6YDM7tb1QzkylOE8KsOgEt0w3bSip8UWndE0TdWBhpvEiM1mdKzqaYYZCHI/');
}
#featured .info h2{/*tùy chỉnh tiêu đề phần mô tả*/
background:#ccc;
font-size:12px;
font-family:arial;
padding:2px;
margin:0;
overflow:hidden;
}
#featured .info p{ /*tùy chỉnh phần mô tả*/
margin:0 5px;
font-family:verdana;
font-size:11px;
color:#f0f0f0;
padding-right:9px;}
#featured .info a{
text-decoration:none;
color:#000; /*màu tiêu đề bài viết (phần mô tả)*/
}
#featured .info a:hover{
text-decoration:underline;
}
.ui-tabs-nav-item img { /*độ rộng và chiều cao của ảnh thumb bên phải*/
width:45px;
height:45px;}
width:395px;
padding-right:240px;
position:relative;
height:250px;
background:#eee;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{/*tùy chỉnh tab bên phải*/
position:absolute;
top:0;
right:0px;
list-style:none;
padding-right:0px; margin:0;
width:295px;
}
#featured ul.ui-tabs-nav li{
padding:1px;
padding-left:13px;
font-size:12px;
}
#featured ul.ui-tabs-nav li span{
font-size:11px;
font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{ /*Tùy chỉnh tab bên trái*/
width:336px;
height:250px;
position:relative;
overflow:hidden;
border-right:5px solid #ccc;}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*tùy chỉnh link bên trái*/
display:block;
height:59px;
color:#333;
background:#f2f2f2;
border-bottom:1px solid #fff;
border-left:1px solid #fff;
}
#featured li.ui-tabs-nav-item a:hover{
background:#ddd;
}
#featured li.ui-tabs-selected{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYmzC67coOBKVmCFNPmsKFMzX5nqbM8w7G9M8ZOwPl8ugbm6xHSuFiMDDDFAjYVxCeHXyH-UAVjxDtyjhBsPuUuLBxGgZW3p-LJ5QYiE4jSqfQWU7RaG4paMC44XQGFlflofHRHaiTP5k/') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{ /*phần ảnh thumb bên phải*/
float:left;
margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #fff;
}
#featured .ui-tabs-panel .info{/*tùy chỉnh màu nền, độ rộng, chiều cao...phần mô tả*/
position:absolute;
top:180px; left:0;
height:70px;
width: 350px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2dlxk8Lxu5EY9XBFycMizKu2NqNchOpCp-FMMqTYTvMjhtPC8ygCiYo1hOeIDplmQKNqZ-cp4KtymMK0C6YDM7tb1QzkylOE8KsOgEt0w3bSip8UWndE0TdWBhpvEiM1mdKzqaYYZCHI/');
}
#featured .info h2{/*tùy chỉnh tiêu đề phần mô tả*/
background:#ccc;
font-size:12px;
font-family:arial;
padding:2px;
margin:0;
overflow:hidden;
}
#featured .info p{ /*tùy chỉnh phần mô tả*/
margin:0 5px;
font-family:verdana;
font-size:11px;
color:#f0f0f0;
padding-right:9px;}
#featured .info a{
text-decoration:none;
color:#000; /*màu tiêu đề bài viết (phần mô tả)*/
}
#featured .info a:hover{
text-decoration:underline;
}
.ui-tabs-nav-item img { /*độ rộng và chiều cao của ảnh thumb bên phải*/
width:45px;
height:45px;}
Bạn hãy dựa vào các phần trên để chỉnh sửa css cho phù hợp với blog của bạn.
4. Tiếp theo bạn hãy chèn code bên dưới vào sau thẻ <head>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.min.js" type="text/javascript"/></script>
<script src="http://traidatmui-tips.googlecode.com/files/jquery-ui.min.js" type="text/javascript"/></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<script src="http://traidatmui-tips.googlecode.com/files/jquery-ui.min.js" type="text/javascript"/></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
5. Bây giờ bạn save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript và chèn code bên dưới vào HTML/Javascript đó
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8S425e2yKWCrcswU_N4uZOSX-nmaX_cG9raShmmtJdGEbWw8FV6LIA1pblrzSwJPMa2fgWow6_AReOLIlHn30vPYEV3qpZ5JpAAvediJMT7gE1bI-1ZmtC3et_RyyvIXsFGIdXzsw554/";
showRandomImg = false;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
text = "no";
showPostDate = true;
summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
numposts =4;
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
home_page = "http://gaincapital-forex-com.blogspot.com"; //thay thành địa chỉ blog của bạn
</script>
<div id="featured">
<script src="http://traidatmui-tips.googlecode.com/files/slide_post_jquery1.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/slide_post_jquery2.js" type="text/javascript"></script>
</div>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8S425e2yKWCrcswU_N4uZOSX-nmaX_cG9raShmmtJdGEbWw8FV6LIA1pblrzSwJPMa2fgWow6_AReOLIlHn30vPYEV3qpZ5JpAAvediJMT7gE1bI-1ZmtC3et_RyyvIXsFGIdXzsw554/";
showRandomImg = false;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
text = "no";
showPostDate = true;
summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
numposts =4;
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
home_page = "http://gaincapital-forex-com.blogspot.com"; //thay thành địa chỉ blog của bạn
</script>
<div id="featured">
<script src="http://traidatmui-tips.googlecode.com/files/slide_post_jquery1.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/slide_post_jquery2.js" type="text/javascript"></script>
</div>
7. Cuối cùng save lại.
Chúc bạn thành công
Previous Article
Share your views...
0 Respones to "Trình diễn bài viết dạng slide với Jquery"
Đăng nhận xét