DVT » » » Tiện ích bài viết mới tự động cuộn ngang với 2 nút điều khiển

Tiện ích bài viết mới tự động cuộn ngang với 2 nút điều khiển

Cách 1.
Ưu điểm: dễ điều chỉnh
Nhược điểm: nhiều file JS nên có thể gây một số xung đột với các code có sẵn trên blog và ảnh hưởng tốc độ load trang.
 1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>


<script
src="http://dothanghn.googlecode.com/files/JQuery.eva1.2.3.js"
type="text/javascript">



</script>



<script type="text/javascript"
src="http://dothanghn.googlecode.com/files/jquery.easing.1.1.js"></script>



<script type="text/javascript"
src="http://dothanghn.googlecode.com/files/JQ.jCarouselLite_fixed2.js"></script>







<script type="text/javascript">



$(function() {



$(".jQCarouselLitevn").jQCarouselLitevn({



vnNext: ".vnenext",



vnPrev: ".vneprev",



speed: 500,



auto:5000,



visible:5, //số bài viết hiển thị



scroll:5, //số bài viết 1 lần cuộn qua



easing: "easeinout"



}); });



</script>

 5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>


.jQCarouselLitevn
{



float:
left;



position:
relative;



left:
-5000px;



background:



 #e3e4e5 



url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM40k7Li83bykfTYt6RsLLnW7o1osEwua9SfyZjAxpnh_YaR3sEqSWOvEEwWNiv4IDIhyL9AQBwjtM6aY_x5UfHxPj0-JQNXBXNLMHDh94KZXVtCeVh1S7njOkmjqs24zpyFO32Aj2uHc/)



 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;



}



.carousel
a.vneprev{



float:
right;



margin:8px
3px 0px 0px;



width:
13px;



height:
10px;



background:







url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif4uCRehcbfYb853FyaJS63AMxrI1jgRapKlbDAe8wgqe-jdbtNI6fAtqtodX46VQe3lZkQOIJcUMGzEYE6vHdJuoiswCwbZRdoMH7FGgZSEtRLMrrcINmxBu9qrInb7sSUB1kZp9UIu4/)



 -10px 0px no-repeat;



}



.carousel
a.vnenext {



float:
right;



margin:8px
15px 0px 0px;



width:
13px;



height:
10px;



background:







url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif4uCRehcbfYb853FyaJS63AMxrI1jgRapKlbDAe8wgqe-jdbtNI6fAtqtodX46VQe3lZkQOIJcUMGzEYE6vHdJuoiswCwbZRdoMH7FGgZSEtRLMrrcINmxBu9qrInb7sSUB1kZp9UIu4/)



 0px 0px no-repeat;



}



.re_hscrollpost
{



font-family:arial;



float:left;



padding:0px
3px 5px 2px;



font-size:12px;



line-height:1.3em;



display:block;



width:200px;



height:87px;



border-right:1px
dashed #ddd;



margin-top:-1px;



text-align:left;}







.re_hscrollpost
a {



line-height:1.1em;



font-size:11px;



font-weight:bold;



text-decoration:none;



color:#333;}



.re_hscrollpost
a:hover{



color:#666;



text-decoration:underline;}







.re_hscrollimg
{



border:1px
solid #ccc;



margin-right:4px;



float:left;



width:80px;



height:83px;



padding:2px;



float:left;



}
6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới


<script
language="JavaScript">



imgr
= new Array();



imgr[0]
=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLc3dOoGUoI_OvNd-v4QwsJ4h8VPmLnbZJg0hDMSyEDJn3rWipcnR0IqXd9GMsmwgy0I27sSK2jHaYHr-wjV4-DDmyaDnmmNULT9igw35-4AJY1lXbQFwznqqvKYMP8NTG__bRH7o1Novz/";



showRandomImg
= true;



aBold
= true;



text
= "";



showPostDate
= true;



summaryPost
= 50; //số kí tự phần tóm tắt



numposts
= 15; //số bài viết hiển thị



label
= "Thủ thuật blogspot"; //thay thành tên nhãn của blog bạn



home_page
= "http://www.dothang.name.vn/"; //thay thành địa chỉ blog của bạn



</script>



<div
class="carousel">



<div
class="jQCarouselLitevn">



<img







src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQP1ifHYBFjgb0HlLhVbwinnIaM35DlHH9cxspW42zbyyvDjzY7c5lbKhgcYihWPk9ubTDhydqYvhoFz8_tmF8ciVMPQJs6jbpfQPlAyAv1g_R9ShBPTrHRJxHDgQI3gl4AthfWbAX-BE/"



 style="margin:0px 0px 0px 1px;"/>



<a
href="#" class="vnenext"></a><a
href="#" class="vneprev"></a>



<script
src="http://dothanghn.googlecode.com/files/rescroll_label.js"
type="text/javascript">



</script>



</div>
</div>


Cách 2. 
Ưu điểm: ít file JS, dễ dàng thực hiện
Nhược điểm: khó điều chỉnh theo ý
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>






<script
type="text/javascript"
src="http://xxvf4h.googlecode.com/files/Jquery1.3.2.js"></script>



<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("roundHotNews()",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) * (-1040);



$('#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) * (-1040);



$('#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) * (-1040);



$('#slide_animation').animate({
left: leftpx }, 500);



}



round_t
= setTimeout("roundHotNews()",5000); //thời gian bài viết tự động
scroll



}/*
]]> */



</script>







<style>



.slideHighlight
{



color:#000;



width:
1040px; /* độ rộng của tiện ích*/



background:
#e3e4e5
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM40k7Li83bykfTYt6RsLLnW7o1osEwua9SfyZjAxpnh_YaR3sEqSWOvEEwWNiv4IDIhyL9AQBwjtM6aY_x5UfHxPj0-JQNXBXNLMHDh94KZXVtCeVh1S7njOkmjqs24zpyFO32Aj2uHc/)
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:200px;
/* độ 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/AVvXsEif4uCRehcbfYb853FyaJS63AMxrI1jgRapKlbDAe8wgqe-jdbtNI6fAtqtodX46VQe3lZkQOIJcUMGzEYE6vHdJuoiswCwbZRdoMH7FGgZSEtRLMrrcINmxBu9qrInb7sSUB1kZp9UIu4/)
-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/AVvXsEif4uCRehcbfYb853FyaJS63AMxrI1jgRapKlbDAe8wgqe-jdbtNI6fAtqtodX46VQe3lZkQOIJcUMGzEYE6vHdJuoiswCwbZRdoMH7FGgZSEtRLMrrcINmxBu9qrInb7sSUB1kZp9UIu4/)
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>
5. Thêm 1 HTML/Javascript và thêm vào code bên dưới






<script
language="JavaScript">



imgr
= new Array();



imgr[0]
=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLc3dOoGUoI_OvNd-v4QwsJ4h8VPmLnbZJg0hDMSyEDJn3rWipcnR0IqXd9GMsmwgy0I27sSK2jHaYHr-wjV4-DDmyaDnmmNULT9igw35-4AJY1lXbQFwznqqvKYMP8NTG__bRH7o1Novz/";



showRandomImg
= true;



aBold
= true;



text
= "";



showPostDate
= true;



summaryPost
= 50; //số kí tự phần tóm tắt



numposts
= 15; //số bài viết hiển thị



label
= "Tin tức"; //thay thành tên nhãn của blog bạn



home_page
= "http://www.dothang.name.vn/"; //thay thành địa chỉ blog của bạn



</script>



<div
class="slideHighlight">



<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQP1ifHYBFjgb0HlLhVbwinnIaM35DlHH9cxspW42zbyyvDjzY7c5lbKhgcYihWPk9ubTDhydqYvhoFz8_tmF8ciVMPQJs6jbpfQPlAyAv1g_R9ShBPTrHRJxHDgQI3gl4AthfWbAX-BE/"
style="margin:0px 0px 0px 1px;"/>



<div
onclick="slide_forward()"
class="slideforward"></div><div
onclick="slide_backward()"
class="slidebackward"></div>



<div
class="viewpost"><div class="view"><div
class="slide" id="slide_animation"> 



<script
src="http://xxvf4h.googlecode.com/files/rescroll_label_new.js"
type="text/javascript"></script>



</div></div></div></div>

6. Cuối cùng bạn save tiện ích lại là xong

Và mình cũng cung cấp cho các bạn file JS dành cho bạn muốn hiển thị bài viết cho toàn blog.
<script src="http://xxvf4h.googlecode.com/files/rescroll_post_new.js" type="text/javascript"></script>

Đăng nhận xét

/