Hướng dẫn tạo slider bài viết mới có nút điều khiển

Thủ thuật này đã được nhiều bạn chia sẻ trên mạng, ở đây share123.vn chỉ thống kê lại cho bạn nào mới chưa biết, đây là một tiện ích khá hay và thú vị, tuy js có hơi nặng chút nhưng chấp nhận được. Thủ thuật này có thể dùng làm để hiển thị bài viết mới nhất theo nhãn hoặc bài viết mới nhất của toàn blog theo slider cuộn ngang có 2 nút điều khiển.

Demo slider bài viết mới có nút điều khiển

Cách làm:
Bước 1: Đăng nhập Blog => Mẫu => Chỉnh sửa HTML => nhấn Ctrl+F (Nội tuyến) => Tìm </head>
Paste đoạn code sau vào trước </head><!-- Slide bai viet moi - up by share123.vn -->
<script src='https://sites.google.com/site/share123vn/Jquery1.3.2.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
var currenttab = 1;
var maxtab = 3; // số tab cuộn qua ví dụ bạn có 15 bài thì chọn là 3, 20 bài chọn 4...
var round_t = setTimeout(&quot;roundHotNews()&quot;,5000); //thời gian bài viết tự động scroll
/* <![CDATA[ */ function slide_forward() {
currenttab++;
if (currenttab > maxtab) currenttab = 1;
if (currenttab <= maxtab) {
var leftpx = (currenttab-1) * (-1000);
$('#slide_animation').animate({ left: leftpx }, 500);
}
clearTimeout(round_t);
}
function slide_backward() {
currenttab--;
if (currenttab < 1) currenttab = maxtab;
if (currenttab >= 1) {
var leftpx = (currenttab-1) * (-1000);
$('#slide_animation').animate({ left: leftpx }, 500);
}
clearTimeout(round_t);
}

function roundHotNews()
{
if(currenttab == 1) currenttab=2;
else if(currenttab == 2) currenttab=3;
else if(currenttab == 3) currenttab=1;
if (currenttab >= 1) {
var leftpx = (currenttab-1) * (-1000);
$('#slide_animation').animate({ left: leftpx }, 500);
}
round_t = setTimeout("roundHotNews()",5000); //thời gian bài viết tự động scroll
}/* ]]> */
</script>

<style>
.slideHighlight {
    margin:auto;
color:#000;
width: 1000px; /* độ rộng của tiện ích*/
background: #e3e4e5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiukQ0Xqkd7j9gx5U3QS4apDXJky3FNDtoXaJcHA67odNih70B6R9Z8H-Hek1iWZMHYV35Wc0bSj2ZfSsaGg6dkQnM90o3Hz4RHn0q8MJrAG582ktHjPSjP9F8Y611UY_9cuKXBn3MIDQ/) repeat-x 0px 1px;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
height:120px;}
.slideHighlight .viewpost{float:left;width: 100%;height:120px;overflow:hidden;padding:0px;}
.slideHighlight .viewpost .view {float:left;width: 100%;height:120px;overflow:hidden;position:relative}
#slide_animation{left:0;position:absolute;top:0}
.slide{float:left;width:5000px;}
.vnscrollitem{
font-family:arial;
float:left;
padding:3px 3px 5px 4px;
font-size:12px;
line-height:1.3em;
display:block;
width:242px; /* độ rộng mỗi bài viết*/
height:87px; /* chiều cao của mỗi bài viết*/
border-right:1px dashed #ddd;
margin-top:-1px;
text-align:left;}

.slidebackward{
cursor:pointer;
float: right;
margin:8px 3px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiWUZOWQYZjavcHNKpCfLPYb911aaagMAtNCi09mBEbQxAJHxubWnCnMxj6MMw31IQ5HsAj48SmckrEd2sFWjGwL6VtKFCd_b0bmETcHbi0BVwUs-MiooPl0IGhlX5rKcqUHLgL36hCA/) -10px 0px no-repeat;
}
.slideforward {
cursor:pointer;
float: right;
margin:8px 15px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiWUZOWQYZjavcHNKpCfLPYb911aaagMAtNCi09mBEbQxAJHxubWnCnMxj6MMw31IQ5HsAj48SmckrEd2sFWjGwL6VtKFCd_b0bmETcHbi0BVwUs-MiooPl0IGhlX5rKcqUHLgL36hCA/) 0px 0px no-repeat;
}
.vnscrollitem a {
line-height:1.1em;
font-size:11px;
font-weight:bold;
text-decoration:none;
color:#333;}
.vnscrollitem a:hover{
color:#666;
text-decoration:underline;}

.vnscrollitemimg {
border:1px solid #ccc;
margin-right:4px;
float:left;
width:80px;
height:83px;
padding:2px;
float:left;
}</style>
<!--end--> Bước 2: Chèn đoạn code sau vào vị trí bạn muốn hiển thị trong Chỉnh sửa HTML, còn bạn nào ko biết chèn vào đâu, thì có thể tạo 1 widget HTML/Javascript ở vị trí bất kỳ và và dán đoạn code sau vào trong nó.<!--silder bai viet moi up by share123.vn-->
<script language='JavaScript'>
imgr = new Array();
imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndgALM7vNV2KME3EKsQRc_gSjEseRKmTkOLFoLRj5TQ8oJzhwc9YhSJqJlwEAZzI8z1Z18BLw6SGN_WmwV_TUrcSxVq6RffbyLwDnGsz1Js_hKkDEHKBNI9FAo4Ercj2-QSFnD7oF7dw/&quot;;
showRandomImg = true;
aBold = true;
text = &quot;&quot;;
showPostDate = true;
summaryPost = 0; //số kí tự phần tóm tắt
numposts = 15; //số bài viết hiển thị
"Học Seo Web"; //thay thành tên nhãn của blog bạn
home_page = "http://www.share123.vn/"; //thay thành địa chỉ blog của bạn
</script>
<div class='slideHighlight'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCHxQvpFO040KoO4ViViwd6XYll8PXFGaZunv6PkZ0WJ644NVgNpCu-2Lkz5cMfoKZfOqmKAaOSbkzzgu4bICVtDook2QTP1OJIZjOu-a2l2qco1mR9mgi0tQJbONNffJ9MmHVp62g6w/' style='margin:0px 0px 0px 1px;'/>
<div class='slideforward' onclick='slide_forward()'/><div class='slidebackward' onclick='slide_backward()'/>
<div class='viewpost'><div class='view'><div class='slide' id='slide_animation'>
<script src='https://sites.google.com/site/share123vn/rescroll_label_new.js' type='text/javascript'/>
</div></div></div></div>
<!--end--> Các bạn chú ý đoạn js :<script src='https://sites.google.com/site/share123vn/rescroll_label_new.js' type='text/javascript'/> Đây là đoạn js để hiển thị bài viết mới nhất theo nhãn, bạn nào muốn hiển thị bài viết mới nhất toàn Blog thì thay đoạn js trên bằng đoạn js này nhé <script src='https://sites.google.com/site/share123vn/rescroll_post_new.js' type='text/javascript'/> Chúc bạn thành công.

Xem Thêm :