.jpg)
.png)
Ả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/AVvXsEjI6TR40ruMnnuhYiOG1cln5Fa-t1rnyZyYFrL-eqlZj2lWEEVyHp6F_SJpmUDqeGnkh_S8KQAbNjUp85JHcJcOH5wqSmtVAKSB2PXgvbDws-1lO1Yiq1-joW3k1vXKBvd8EQKMFGj-cKo/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/AVvXsEjI6TR40ruMnnuhYiOG1cln5Fa-t1rnyZyYFrL-eqlZj2lWEEVyHp6F_SJpmUDqeGnkh_S8KQAbNjUp85JHcJcOH5wqSmtVAKSB2PXgvbDws-1lO1Yiq1-joW3k1vXKBvd8EQKMFGj-cKo/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/AVvXsEhsK3bbqoomu0OFyClCL_qNWSyFGPr7kmXB7OfAfczGxAomaoeAFo3DxV3-thhx60vphzHcOPhVVMay5EzsYQkJnoRexkaY59NWYMCIpF-hfs1FGGPhaOF1vfTTLuu4-C46IbFMZ2N6IXk/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/AVvXsEjzTDF0Lh4n9r1s8-fay55Gkvvq6MDrXsNbS0SwnX_ia7MxvI7wwb6Bo1C9yZkx0P423YBYXdZjbCLRQPWNMRp-5T_oObBjODdbndJ9F4LdHylbx9jGLsggnznxdl5G1_EsqGRGCkLViL0/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/AVvXsEjz3rFFVjVnXnLfY3PMhrTuned4AIzJJj_uUQ1Fr9Qz_S1p4tdyyc08DG5zFCoXlU94ZENKvka96ddCMfhkzFQQbHT5hfjl1X06UTLYqn95UzHCSt0pEeJL20O1VhNbK-RYXl5xf9HVCj4/s38/next.png) no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhinN-3oXFXXUiud7B2b64zT_CP6ueLaBTIOOXBT39wXxL0l-bv6wIA0A3fQzlhD18lnuQIRTHctyHKNrN69-D8JO-rXx3VwHyysByvn4bWKnSHABiztmx1HJ8nJgUFkAMCS_1iBYV5AHw/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/AVvXsEhZUncwJmc7y_4oEZE1LRSKsp3Lx-doFyEioRQo1SlQGPUWf3n43HqGz-Oko4oyhLGjBo0hgRctHm9vRClztF4tIN2781K_cSp2KA8n5iw2QlAkmvou_XMsVVSNRwj3D8otTp6QkYUMWXE/s16/play.png) no-repeat center center;
}
.action-stop span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ubd80H5TkraTcyelGoY58pwrA_lp95g8PX1njTKIPCX14jv3xkZuab1xjiy4u1-cBcT2EbGfDM3UtHtqits4cpWPdtViRBAbh84ZbB0XmKLFFjDV97K6chFXXPxdbx1T_tEU_DYFD14/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.jsthà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 !
