Ảnh minh họa :
Bắt đầu thủ thuật
1. Đăng nhập blogger
2. Chọn mẫu => Chỉnh sửa HTML
3. Dán code dưới sau thẻ <head>
<script language="javascript" type="text/javascript" src="https://script-viettin24h.googlecode.com/svn/tags/Jquery.min.1.5.1.js"></script>
<script language="javascript" type="text/javascript" src="https://script-viettin24h.googlecode.com/svn/branches/jquery.easing.1.3.js"></script>
<script language="javascript" type="text/javascript" src="https://script-viettin24h.googlecode.com/svn/branches/script.js"></script>
4. Chèn code dưới sau thẻ ]]></b:skin>.main-slider{width:414px; /*độ rộng của phần bên trái*/
height:300px; /*chiều cao của phần bên trái*/
border-right:#ccc solid 1px;}
.lof-slidecontent { width:710px; /*độ rộng của cả tiện ích*/
height:300px; /*chiều cao của cả tiện ích*/
background:#eee;position:relative; overflow:hidden; border:#ccc solid 3px;}
.preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.preload div{ height:100%;width:100%; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3haYm6n971K7yd_7gh4scFrDeqaqlL4Z3pLP4Hp9KA_YnloXXnF4a_Ugmgy-VR0yN08wcJWUqjLubM5K9w6mOPVwknjtPMlequcbaj2rsPOk58lteZI2Rv9x0lYXySs8FhIiU2pw0rZY/s16/load-indicator.gif) no-repeat scroll 50% 50%;}
.sliders-wrapper{position:relative; height:100%; z-index:3px; overflow:hidden; }
ul.sliders-wrap-inner{overflow:hidden; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3haYm6n971K7yd_7gh4scFrDeqaqlL4Z3pLP4Hp9KA_YnloXXnF4a_Ugmgy-VR0yN08wcJWUqjLubM5K9w6mOPVwknjtPMlequcbaj2rsPOk58lteZI2Rv9x0lYXySs8FhIiU2pw0rZY/s16/load-indicator.gif) no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; overflow:hidden;}
ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;}
ul.sliders-wrap-inner li img{ padding:0px;
width:414px; /*độ rộng của ảnh bên trái*/
height:300px; /*chiều cao của ảnh bên trái*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:400px; /*độ rộng của phần mô tả hay phần tóm tắt nội dung*/
background:#000;
height:100px; /*chiều cao của phần mô tả hay phần tóm tắt nội dung*/
padding:0px 8px 5px 8px;
color:#fff;
opacity:0.8;
line-height:1.5em;
}
ul.navigator-wrap-inner h2,.slider-description h2{background:none; }
.slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;}
.slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff}
.navigator-content {position:absolute;right:0;top:0px;z-index:9;height:300px;color:#FFF
}
ul.navigator-wrap-inner h2{line-height:1.3em;padding:0 0 0 8px;font-size:14px;margin-left:85px;color:#fff;}
.navigator-wrapper{ z-index:10;
height:180px; /*chiều cao của list bài viết bên phải*/
width:310px; /*độ rộng của list bài viết bên phải*/
overflow:hidden;
color:#FFF;
}
ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
ul.navigator-wrap-inner li{ cursor:hand; cursor:pointer; list-style:none; padding:0; margin:0px; overflow:hidden; display:block; text-align:center;}
ul.navigator-wrap-inner li.active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwCIiVSVBoYgTorloIh2x-eOsuhPFpHad-lCKabLb5dMownnPdWUlKbfTSpEbW4kBUFrBwJ8EIHL6iV2-GK58Ic0xOuD7IcXZdGWRnRmxjSsNOIIW2XiOr7ff-VykfG829yVjF24GU0bE/s38/arrow-bg.png) no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner li.active div{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFl_FBw2JDh9mb3Yb0gxYkhfHIOyrqPWhNoZM7wLTaJ94fw2LmtyqlEDvxgez0YIQs6VqKGUF_C2m7kJaNVf90wdzxDe9ptJ1Ux-aywsMMAxInCueKoXNwOkiHWoSGfh9cIVG6z0PIbBQ/s100/grad-bg.gif);
color:#FFF;}
ul.navigator-wrap-inner li > div{
background:#333;
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.navigator-wrap-inner img{
height:75px; /*chiều cao của ảnh thumb ở list bài viết bên phải*/
width:75px; /*độ rộng của ảnh thumb ở list bài viết bên phải*/
margin:8px 8px 8px 0px;
float:left;
padding:2px;
border:#C5C5C5 solid 1px;
}
.button-next,
.button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.button-next {
right:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwKeD6udIhyJqaSUA7HijAtnKkiqkD7PZPKyMMn6oXTPjdYKom3AP7cyGRrlFoH45C1pzO_xEVcriq3w4R4w86ZnO_k0CfMU-CxkY53xvHNQYSvsmHO0wIpEYabT7oDMouomEcphlFfy0/s38/next.png) no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_H6NAhHBKEi0ZR_AFyAM3UOBVizV0ZmyDY3glyw2mahfz8TVTWM1UhpEsAbB_3H4cho2llLNwwbPfkJKY4wgM-GS4IWLUywstgwlB0EQx5zEDwvsTyuLTcYA2NkOAypFqh8FfkmxkdhM/s38/previous.png) no-repeat left center;
}
.button-control {
background:#333;
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
}
.button-control span { display:block; width:100%; height:100%;}
.action-start span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFmJ32qWVI8Tvi0QrVs0zeD2Iz4BJUfoL8yWmAEO_5NDzsCjhkEfG4nTRK1nS9bOel6VeDEMnWdQKl2rmmc9L8xGyLI2ZFw1TiXvda-r9OdwZPf4N7NK_L3dovzAGMFPQzSH_-gAKopcE/s16/play.png) no-repeat center center;
}
.action-stop span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJFr3-FWDgEr3pNrbZxFDzHfqyS1ougGjrIsSg6GLX2gVkDsPTEqhyphenhyphengZf_wBjXUft0DREK1PtTqUmPMvp_30LBQWqG6ZOMK1d5HRFwUgtWkF7r52RvI1d8vLZEyAqN5FjoDc8qrrSiQQ/s16/pause.png) no-repeat center center;
}
5. Lưu lại6. Chọn bố cục và thêm tiện ích HTML / Javescript => Dán code bên dưới vào
<script type="text/javascript">
$(document).ready( function(){
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeOutBounce', // tên hiệu ứng
duration:1200,
auto:true,
mainWidth:414, //độ rộng của phần trình diễn bên trái
mainHeight:300, //chiều cao của phần trình diễn bên trái
navigatorHeight : 100, //chiều cao của list bài viết bên phải
navigatorWidth : 310, //độ rộng của list bài viết bên phải
maxItemDisplay:3,
buttons:buttons});
});
summaryposts = 30; //số ký tự của nội dung phần mô tả
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.viettin365.com/"; //thay thành địa chỉ blog của bạn
</script>
<div id="jslidernews" class="lof-slidecontent">
<script src="https://script-viettin24h.googlecode.com/svn/branches/jqslidernews.js" type="text/javascript">
</script></div>
7. Lưu lại Chú ý : Nếu bạn muốn trình diễn này cho một nhãn nhất định thì thay
https://script-viettin24h.googlecode.com/svn/branches/jqslidernews.js
thànhhttps://script-viettin24h.googlecode.com/svn/trunk/Viettin365-1.1.js
sau đó sửa Advanced blogger : thành tên nhãn muốn hiển thị.
Chúc các bạn thành công !
No comments:
Post a Comment