5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin><script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/Jquery.min.1.5.1.js"></script>
<script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/Jquery.min.1.3.js"></script>
<script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/script.js"></script>
.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/AVvXsEgP8e6n9xRvnqGxXkdAB4rdnGOfVUNtpzu3fg68WBnHUgADUi9mtIv57qWv47328YITweWKrZXyD_lNEDhvs0m5TauzyLMBknSoYrOP80sIj47q0OPJVo_g_CYnjGFiA4Vp-08dQU5lyHKV/s1600/load-indicator-namkna-blogspot-com.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/AVvXsEgP8e6n9xRvnqGxXkdAB4rdnGOfVUNtpzu3fg68WBnHUgADUi9mtIv57qWv47328YITweWKrZXyD_lNEDhvs0m5TauzyLMBknSoYrOP80sIj47q0OPJVo_g_CYnjGFiA4Vp-08dQU5lyHKV/s1600/load-indicator-namkna-blogspot-com.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/AVvXsEjmeE_JcFjhCpgbuqK__J3PcSdTtuLmbCenp2eHvfpiJqQlwUy80suOTYoDq7LSXv_1PrTvR_ItqGfW6uTc2E1_YFERjagU5wUurcANFTGmzgC_utFRYiheWT4FW10aA57o-lUU2Z4dC7xS/s1600/arrow-bg-namkna-ngoctra.png)
no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner
li.active
div{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix0Jh_4uh8vHCjR1TZ17vtFGHM8bnSVt35uO0X7JyvSzsNskMeQ6rACNFHBXnUBkthecwLoqOC5AF-LgmoRKxZ0v8Z0zr2REDtrS7ZjY8RfroheLvZdVm9afj_xJ1G-LP291BKkK0-YKXY/s1600/grad-bg-namkna-ngoctra.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/AVvXsEjjiT7iCTVM_JGm2V-iYTiplD2xfc9IYbJpLx-QwtSdTRNpVyXf1o6Bcjq01nBfD4HZes0BNzyyGcUBw_Ex5TeX0XpKCyCk1k8k9X7-TEG1423QJ2ixA88kfQoUlyVSSOOZX97S8GklxcaB/s1600/next-namkna-ngoctra.png)
no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Fx3_uAaQngsbi4zO7k6fwYBDHuTLPzoCCSJQNUTrYjP1G9neJ4tYrqxTnVoz90dIOkXX6KTj3k2H4zq9rMHOIOa44n9ef_53iPZBU7_8ap_Hw1P76EL68UxnpVGATUjWzr_RdwrqaePx/s1600/previous-namkna-ngoctra.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/AVvXsEjUufmysxKSxMQiswxVezWz_2sAuMRZSwARc7jo9XgpZxhVX0tbV3zLff6lLlZMMoMEKMay7H7uOHHw-hHUhjGcQLO5ipJ1vFvOQyXElXrEfkzaTVKNT6iTG99stNMz74Be9yQZ7Ixn7wmH/s1600/play-namkna-blogspot-ngoctra.png)
no-repeat center center;
}
.action-stop span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisXY2rjVm6YdPbwdIYGQ9gikAZoPjkloZrf1H3Oq69KtWHrY7su0GtVao1Dri7EsGZxL9vkNJMxxc3Mf5xyeYfZKBCN5P5MlYyvLNliG4_JrWlOqeEgH5iXwgpZnyGMAjFjabW1X7pd5Mx/s1600/pause-namkna-ngotra.png)
no-repeat center center;
}6. Save template lại<script type="text/javascript">
$(document).ready( function(){
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeOutBounce',
duration:1200,
auto:true,
mainWidth:414,
mainHeight:300,
navigatorHeight : 100,
navigatorWidth : 310,
maxItemDisplay:3,
buttons:buttons});
});
summaryposts = 30;
numposts = 15;
label = "Blogspot-tips";
home_page = "http://www.thietkeblogger.net/";
</script>
<div id="jslidernews" class="lof-slidecontent">
<script src="http://thietkewebplus.googlecode.com/files/jqslidernews.js" type="text/javascript">
</script></div>
Support Online
Comments[ 0 ]
Đăng nhận xét