Tiện ích bài viết mới tự động cuộn ngang với 2 nút điều khiển như vnexpress.net
Điểm 4.6/5 dựa vào 87 đánh giá
(Traidatmui.com) – Nếu bạn thường xuyên vào trang tin tức vnexpress.net thì chắc hẳn bạn cũng có để ý thấy ở cuối trang có một tiện ích trình bày về thông tin doanh nghiệp với hiệu ứng cuộn ngang với 2 nút điều khiển. Theo yêu cầu của bạn Goccanh thì hôm nay mình chia sẻ cùng các bạn thủ thuật tạo tiện ích với hiệu ứng tuong tự cho bài viết mới trong blogger. Hôm trước thì mình đã có giới thiệu thủ thuật cũng cuộn ngang với 2 nút điều khiển qua lại, tuy nhiên với thủ thuật trước thì nó không có tự động cuộn mà chỉ khi bạn click vào mũi tên nó mới di chuyển. Khác thủ thuật trước thì tiện ích này có thể tự động cuộn ngang sau một khoản thời gian nhất định,để thấy rỏ bạn có thể xem demo bên dưới.
Hình ảnh minh họa
» Bắt đầu thủ thuật1. Đă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://data-traidatmui.appspot.com/scripts/JQuery.eva1.2.3.js" type="text/javascript">
</script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/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>
</script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/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://lh3.googleusercontent.com/-kX8Gu3qbaaw/Tkda8PULPHI/AAAAAAAAAiM/xXFyqIg1pCo/bg.png) 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://lh3.googleusercontent.com/-939vZAuS44M/TkdmraUamUI/AAAAAAAAAik/SO-J4bCYDo8/nextprev.gif) -10px 0px no-repeat;
}
.carousel a.vnenext {
float: right;
margin:8px 15px 0px 0px;
width: 13px;
height: 10px;
background: url(https://lh3.googleusercontent.com/-939vZAuS44M/TkdmraUamUI/AAAAAAAAAik/SO-J4bCYDo8/nextprev.gif) 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;
}
float: left;
position: relative;
left: -5000px;
background: #e3e4e5 url(https://lh3.googleusercontent.com/-kX8Gu3qbaaw/Tkda8PULPHI/AAAAAAAAAiM/xXFyqIg1pCo/bg.png) 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://lh3.googleusercontent.com/-939vZAuS44M/TkdmraUamUI/AAAAAAAAAik/SO-J4bCYDo8/nextprev.gif) -10px 0px no-repeat;
}
.carousel a.vnenext {
float: right;
margin:8px 15px 0px 0px;
width: 13px;
height: 10px;
background: url(https://lh3.googleusercontent.com/-939vZAuS44M/TkdmraUamUI/AAAAAAAAAik/SO-J4bCYDo8/nextprev.gif) 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] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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 = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="carousel">
<div class="jQCarouselLitevn">
<img src="https://lh5.googleusercontent.com/-2eKtp14bZvQ/TkdsLotH1CI/AAAAAAAAAi8/5KrgTFXWWoU/baimoi.png" style="margin:0px 0px 0px 1px;"/>
<a href="#" class="vnenext"></a><a href="#" class="vneprev"></a>
<script src="http://data-traidatmui.appspot.com/scripts/rescroll_label.js" type="text/javascript">
</script>
</div> </div>
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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 = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="carousel">
<div class="jQCarouselLitevn">
<img src="https://lh5.googleusercontent.com/-2eKtp14bZvQ/TkdsLotH1CI/AAAAAAAAAi8/5KrgTFXWWoU/baimoi.png" style="margin:0px 0px 0px 1px;"/>
<a href="#" class="vnenext"></a><a href="#" class="vneprev"></a>
<script src="http://data-traidatmui.appspot.com/scripts/rescroll_label.js" type="text/javascript">
</script>
</div> </div>
8. Save tiện ích lại là xong
Nếu muốn hiển thị cho tất cả bài viết bạn thay file JS (rescroll_label.js) trên thành file bên dưới
http://data-traidatmui.appspot.com/scripts/rescroll_allpost.js
» Cập nhật 12/10/2011
Như các bạn đã thấy với tiện ích ở trên chúng ta sử dụng khá 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 của bạn và ảnh hưởng tốc độ load trang. Chính vì thế để có thể giúp các bạn dễ dàng sử dụng tiện ích này thì hôm nay mình xin cập nhật lại thủ thuật này với việc giảm số file JS, và dễ dàng thực hiện hơn. Các bước thực hiện như bên dưới:
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://data-traidatmui.appspot.com/scripts/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://lh3.googleusercontent.com/-kX8Gu3qbaaw/Tkda8PULPHI/AAAAAAAAAiM/xXFyqIg1pCo/bg.png) 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://lh3.googleusercontent.com/-939vZAuS44M/TkdmraUamUI/AAAAAAAAAik/SO-J4bCYDo8/nextprev.gif) -10px 0px no-repeat;
}
.slideforward {
cursor:pointer;
float: right;
margin:8px 15px 0px 0px;
width: 13px;
height: 10px;
background: url(https://lh3.googleusercontent.com/-939vZAuS44M/TkdmraUamUI/AAAAAAAAAik/SO-J4bCYDo8/nextprev.gif) 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>
<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://lh3.googleusercontent.com/-kX8Gu3qbaaw/Tkda8PULPHI/AAAAAAAAAiM/xXFyqIg1pCo/bg.png) 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://lh3.googleusercontent.com/-939vZAuS44M/TkdmraUamUI/AAAAAAAAAik/SO-J4bCYDo8/nextprev.gif) -10px 0px no-repeat;
}
.slideforward {
cursor:pointer;
float: right;
margin:8px 15px 0px 0px;
width: 13px;
height: 10px;
background: url(https://lh3.googleusercontent.com/-939vZAuS44M/TkdmraUamUI/AAAAAAAAAik/SO-J4bCYDo8/nextprev.gif) 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] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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 = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="slideHighlight">
<img src="https://lh5.googleusercontent.com/-2eKtp14bZvQ/TkdsLotH1CI/AAAAAAAAAi8/5KrgTFXWWoU/baimoi.png" 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://data-traidatmui.appspot.com/scripts/rescroll_label_new.js" type="text/javascript"></script>
</div></div></div></div>
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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 = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="slideHighlight">
<img src="https://lh5.googleusercontent.com/-2eKtp14bZvQ/TkdsLotH1CI/AAAAAAAAAi8/5KrgTFXWWoU/baimoi.png" 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://data-traidatmui.appspot.com/scripts/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://data-traidatmui.appspot.com/scripts/rescroll_post_new.js" type="text/javascript"></script>
Chúc bạn thành công
Tags:
Blogspot nâng cao
Loading...
Bạn hnmovies.com xem bài viết này mình đã đáp ứng theo yêu cầu của bạn rồi nhé. Chúc bạn thành công lleu
Trả lờiXóaThanks! votay
Trả lờiXóaRất chuẩn!
Để cho vào blog đã! có gì tớ hỏi sau hehehe
Nó Không hiển thị rồi bạn ơi!
Trả lờiXóaDemo: hnmovies.com
Cái demo đâu hiển thị đâu
Trả lờiXóaNếu trong template của bạn có file http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js bạn thử gở nó ra xem thể nào nhé
Trả lờiXóaVẫn không hoạt động TDM à roile
Trả lờiXóaMình thấy trong template của bạn chèn rất nhiều phiên bản jquery.min.js. Bạn nên sử dụng 1 trong các phiên bẩn đó cho site bạn thôi nhe
Trả lờiXóaTại mình thêm nhiều tiện ích quá mà không xóa.
Trả lờiXóaMình xóa hết rồi. chỉ trừ lại 1 cái mà nó vẫn không hiển thị.
Bạn cho mình phiên bản jquery.min.js mới nhất để mình lưu vào cái.
Code gà quá idontknow
Oh! Được rồi. chắc là tại xung đột jquery.min.
Trả lờiXóaThanks nhiều
@hnmovies.com Bạn có thể sử dựng jquery.min.js phiên bản 1.4.2 cũng được các file khác nên xóa bớt đi.
Trả lờiXóaCám ơn bạn. Mình đang tìm cách viết lại cho theme wordpress của mình. Bài viết rất hữu ích.
Trả lờiXóaCám ơn bạn. mình tìm cái này lâu lắm rồi
Trả lờiXóaChúc bạn thực hiện thành công nhé
Trả lờiXóaChào TDM, mình đã làm theo nhưng mà nó chỉ hiện cái khung, bài viết thì nó không hiện, bạn xem dùm mình được ko? bùn quá à
Trả lờiXóaBạn hiển thị theo từng nhãn hay toàn bộ bài viết? Nếu hiển thị theo từng nhãn thì phải chú ý tên nhãn phải chính xác và cuối địa chỉ blog phải có dấu "/" nhe bạn
Trả lờiXóamuốn hiển thị toàn bộ bài viết thì để cái gì vào TDM, chỉ dùm mình với
Trả lờiXóaAh phần đó mình có hướng dẫn cuối bài viết trên, sau bước 8 đó Billy Hoàng. Bạn thay file JS như trên là được.
Trả lờiXóabây giờ nó đã hiện lên nhưng chỉ đúng nhãn đó thui, mình muốn cho hiện hết nhãn thì phải làm sao?
Trả lờiXóa- Khi mình đặt cái code này vào blog của mình thì cái menu xổ xuống của mình tự nhiên hết xổ luôn rồi, bạn có thể xem dùm mình không? hic hic được cái này thì mất cái kia, bùn ghê ..............
ok thanks TDM nhiều, bây giờ mình lại có vấn đề này khi chèn code trên vào :
Trả lờiXóaKhi mình đặt cái code này vào blog của mình thì cái menu xổ xuống của mình tự nhiên hết xổ luôn rồi, bạn có thể xem dùm mình không?
Nếu được bạn add nick mình vào, rùi hướng dẫn mình với, code mình gà quá .... Nick mình là ng_thhoang
Thanks TDM
Nếu bạn thay file JS trong bước 7 thành file http://traidatmui-tips.googlecode.com/files/rescroll_allpost.js thì nó sẽ hiển thị cho tất cả bài đăng chứ không phải theo từng nhãn nữa bạn
Trả lờiXóaLỗi nút +1 rồi, fix lại đi (mình xem ở chrom)
Trả lờiXóaNút + 1 mình vẫn hoạt động bình thường mà bạn, mình đã thử vẫn ổn
Trả lờiXóaadmin ơi ! Sao không thu hẹp được tiện ích này :(
Trả lờiXóaXem hô mình cái
http://loadzoom.blogspot.com
đã sửa được bề ngang :D. Hì. hóa ra bề ngang là tích của mỗi box
Trả lờiXóaNếu muốn thay đổi độ rộng bạn thay thuộc tính width: 200px; trong lớp .re_hscrollpost
Trả lờiXóaAdmin ơi ! Có cách nào chỉ cho nó hiện hình ảnh không ?
Trả lờiXóahttp://loadzoom.blogspot.com = >> của mình bị thế này
Nếu chỉ muốn hiển thị hình ảnh thôi thì bạn có thể dùng cách sau: mở file JS rescroll_allpost.js hay rescroll_label.js (tùy bạn sử dụng file nào) và xóa bỏ code như bên dưới
Trả lờiXóa<a href="'+posturl+'">'+posttitle+'</a><br/>'+removeHtmlTag(postcontent,summaryPost)+'
helppppp ! Của em sau khi đổi tên miền từ
Trả lờiXóaloadzoom.blogspot.com sang loadzoom.com thì nó bị lỗi.
Anh vào xem hộ em cái à. Cách khắc phục nó như thế nào
Mở js bằng cách nào . và lưu nó như thế nào ạ. Xin lỗi vì em không gộp bài được.,
Trả lờiXóaEm dùng Notepad để mở file JS và save lại với phần mở rộng *.js ví dụ: tenfile.js
Trả lờiXóarồi úp lên host khác hả anh ?
Trả lờiXóauhm em phải upload lên host nào đó lấy link
Trả lờiXóarồi ! Oke anh :D
Trả lờiXóaanh ơi ! cái của em nó không hiển thị được hết ảnh, Nó mất 1 nửa ở phía dưới @@
Trả lờiXóaĐó là do bạn chỉnh sửa CSS không phù hợp nên nó hiển thị không đúng như bạn đầu. Bạn hãy giữ nguyên CSS trên và chỉnh sửa từ từ lại, chú ý các thuộc tính padding hay margin của .re_hscrollpost {} tránh sai sót nhé.
Trả lờiXóahe he ! Đã design lại . Đẹp rạng ngời mà không chói lóa :D. Thanks admin.
Trả lờiXóaÀ ! Vào xem hộ em cái nút lên trang và cuối trang nó cách xa nhau quá. chỉnh mãi không được @@
http://loadzoom.com
@Free times: em tùy chỉnh phần bottom và right của mỗi ảnh lại để đặt vị trí nó phù hợp
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaCảm ơn anh nhiều ^^. Anh mới có 88 mà trình web của anh đỉnh quá. Em cũng học css và html mà ko đc như anh :D. Rất mong được học hỏi từ anh.
Trả lờiXóaAnh cung biết chút ít thôi ah, còn cần học hỏi từ mọi người thêm. Hy vọng sẽ cùng mọi người chia sẻ kiến thức lẫn nhau.
Trả lờiXóahihi ! Anh học CNTT à ! Học hỏi được như anh thì em cũng muốn :D. hi hi. Em cũng cntt nhưng web tự học thôi :D
Trả lờiXóaA học Quản trị kinh doanh, cái này anh tự tìm hiểu thêm thôi nên còn hạn chế nhiều lắm :|
Trả lờiXóaCode ở trên đã được Fixed lại và bây giờ có thể đặt 2 tiện ích này và tiện ích scroll với 2 nút điều khiển tại đây vào cùng một blog của bạn theo như bạn Hoàng Đức Hoài .
Trả lờiXóaBài viết khá hay và dễ áp dụng.
Trả lờiXóaMinh` che' duoc cai nay roi. Moi nguoi vao xem demo co dep ko ne` :D
Trả lờiXóahttp://loadzoom.com
TraiDatMui dạo này được nhiều Show quảng cáo nhỉ! Chúc mừng nhé! Đặt banner quảng cáo vào nhìn trang web Pro và khí thế hơn hẳn! cunghi
Trả lờiXóaCảm ơn anh nhiều nhé :X
Trả lờiXóaBài viết đã được cập nhật mới các bạn có thể đọc thêm ở trên. lleu
Trả lờiXóaMình đã áp dụng khá nhiều tiện ích mà TDM giới thiệu và thấy nó rất hiệu quả,cảm ơn TDM nhiều ! votay
Trả lờiXóaCảm ơn bạn. :)
Trả lờiXóahôm trước mình có hỏi bạn làm thế nào để thay đổi chữ "Bài viết mới" thành chữ mà mình muốn thay, lâu quá ko lên mạng nên phần trả lời của bạn nằm ở bài đăng nào nữa giờ bạn có thể giúp đỡ lại cho mình được chứ, cám ơn bạn rất nhiều
Trả lờiXóaSau này nếu có điều gì cần giúp đỡ liên quan đến bài viết nào thì mong các bạn để lại comment ngay bên dưới bài viết đó để tránh lạc mất phần phản hồi. Còn những vấn đề không liên quan đến các bài viết hiện có mong các bạn để comment tại mục "YÊU CẦU THỦ THUẬT". Cảm ơn các bạn!
Trả lờiXóa@ Võ Văn Tùng: Trong tiện ích đó phần "Bài viết mới" là mình sử dụng hình ảnh cho nên để thay đổi thì bạn cần thiết kế hình ảnh khác hoặc bạn cũng có thể dùng dạng text thay thế chỗ ảnh đó và thêm thuộc tính để xác định vị trí cho phù hợp.
Ảnh đó nằm ngay trên dòng code bên dưới trong bước 5
<a href="#" class="vnenext"></a><a href="#" class="vneprev"></a>
Nếu Muốn Nó Hiển Thị Tự Động Theo Từng Lable Thì Làm Thế Nào Bạn, Cùng tiện ích này đấy thay thế cho kiểu bài viết liên quan đó
Trả lờiXóaĐối với code 1 bạn thay đoạn code
Xóa[code]<script src="http://data-traidatmui.appspot.com/scripts/rescroll_label.js" type="text/javascript">
</script>[/code]
Thành đoạn code sau
[code]<b:loop values='data:post.labels' var='label'>
<script src="http://data-traidatmuidotcom.appspot.com/scripts/rescroll_label.js" type="text/javascript">
</script>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?orderby=published&alt=json-in-script&callback=showrecentposts"' type='text/javascript'/>
</b:loop>[/code]
Đối với code cập nhật thì bạn thay
[code]<script src="http://data-traidatmui.appspot.com/scripts/rescroll_label_new.js" type="text/javascript">
</script>[/code]
Thành đoạn code sau
[code]<b:loop values='data:post.labels' var='label'>
<script src="http://data-traidatmuidotcom.appspot.com/scripts/rescroll_label_new.js" type="text/javascript">
</script>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?orderby=published&alt=json-in-script&callback=showrecentposts"' type='text/javascript'/>
</b:loop>[/code]
Tất nhiên là code phải được đặt trong Template và thuộc phần Post. Có thể là bên dưới mỗi bài viết, bạn tham khảo thêm các tiện ích bài viết liên quan.
Cho cái đó vào ko hoạt động luôn :D
XóaMình đã có nói là phải đưa vào phần Post nếu đưa ngoài bất kỳ vị trí nào khác cũng sẽ không thể chạy vì không nhận dạng được ra nhãn khi xem 1 bài viết.
XóaTiện Ích Này Ko Hiện Trên firefox
Trả lờiXóaCòn vấn đề không hiện trên Firefox là do có thể trong quá trình bạn tải về và up lên host riêng của bạn.
XóaĐúng là tải về up lên host riêng là ko chạy được ko hiểu sao
XóaNếu bạn muốn đưa vào host riêng mà không biết cách tạo file JS từ Notepad thì tốt nhất là dùng IDM tải về và giữ nguyên thế tải lên hosting và lấy link. Nếu bạn copy vào Notepad save lại mà không biết cách sẽ không chạy được.
XóaNhấn Save as chứ ko phải là coppy mà save rồi tải lên nhưng ko ổn
XóaBạn save as cũng không khác khi bạn copy code ve Notepad bạn ah, vì khi save as bạn vẫn phải chọn đúng định dạng code. Tốt nhất bạn hãy giữ nguyên muốn sửa đổi tên thì bạn sửa tên file thôi không cần mở lên save as lại.
XóaĐâu có Khi coppy cái link kia nó tự mở ra một cái trang toàn funcen ko có chữ dowload khi nhấn save as từ web thì nó lưu dưới dạng file js luôn ko cần chọn định dạng gì , rồi tải lên nhưng trên fire fox ko hiện còn chorme với Ie vẫn hiện
XóaVì link này không thể download trực tiếp từ trình duyệt nên mình mới khuyên bạn dùng IDM để tải về, tô đen link click phải chuột chọn Download with IDM hoặc khởi động IDM và chọn Add URL để tải về.
XóaChỉnh Độ Rộng Ảnh Ở Đâu Bác
Trả lờiXóaBạn chỉnh ở .re_hscrollimg { hoặc .vnscrollitemimg {
Xóa