Trình diễn bài viết mới dạng Scroll ngang bằng Mootools
Điểm 4.6/5 dựa vào 87 đánh giá
(Traidatmui.com) – Hôm nay mình sẽ giúp các bạn một thủ thuật dạng trình diễn các bài viết mới, ở đây chúng ta sẽ ứng dụng mootools để tạo hiệu ứng scroll theo chiều ngang cho các bài viết mới trên Blogspot. Thủ thuật này sẽ hiển thị 2 bài viết và nó sẽ tự động sroll sau vài giây. Bạn tìm hiểu thêm ở hình ảnh minh họa và Live Demo bên dưới sẽ thấy rở hơn.
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 language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
showRandomImg = true;
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE
summaryPost = 300; // số kí tự nội dung bài viết
icon = " » ";
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn trên blog của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<script language="javascript" type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/mootools.1.11.js"></script>
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
showRandomImg = true;
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE
summaryPost = 300; // số kí tự nội dung bài viết
icon = " » ";
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn trên blog của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<script language="javascript" type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/mootools.1.11.js"></script>
5. Chèn tiếp code CSS vào trước thẻ ]]></b:skin>
#NewsTicker_horizontal{
border:solid 1px #ccc;
width:600px;
height:200px;
}
#NewsTicker_horizontal h1{
padding:6px;
margin:0;
background:#616D7E;
color:#fff;
font-size:11px;
font-weight:bold;
}
#NewsHorizontal {
width: 600px;
height: 200px;
display: block;
overflow: hidden;
position: relative;
}
#TickerHorizontal {
width: 600px;
height: 140px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerHorizontal li {
width: 280px;
border-right:1px solid #ccc;
text-align: left;
font-size: 12px;
margin: 0;
padding: 6px 10px;
float: left;
height: 162px;
display: inline;
}
#TickerHorizontal li a {
margin-bottom:2px;
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
#TickerHorizontal li a:hover {
color: #666;
text-decoration:underline;
}
#TickerHorizontal li .NewsImg{
float:left;
border:1px solid #ccc;
padding:2px;
margin-right:5px;
margin-top:2px;
}
#TickerHorizontal li .NewsFooter{
display: block;
color: #000;
font-size: 10px;
margin: 0px 0px 0px 70px;
}
border:solid 1px #ccc;
width:600px;
height:200px;
}
#NewsTicker_horizontal h1{
padding:6px;
margin:0;
background:#616D7E;
color:#fff;
font-size:11px;
font-weight:bold;
}
#NewsHorizontal {
width: 600px;
height: 200px;
display: block;
overflow: hidden;
position: relative;
}
#TickerHorizontal {
width: 600px;
height: 140px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerHorizontal li {
width: 280px;
border-right:1px solid #ccc;
text-align: left;
font-size: 12px;
margin: 0;
padding: 6px 10px;
float: left;
height: 162px;
display: inline;
}
#TickerHorizontal li a {
margin-bottom:2px;
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
#TickerHorizontal li a:hover {
color: #666;
text-decoration:underline;
}
#TickerHorizontal li .NewsImg{
float:left;
border:1px solid #ccc;
padding:2px;
margin-right:5px;
margin-top:2px;
}
#TickerHorizontal li .NewsFooter{
display: block;
color: #000;
font-size: 10px;
margin: 0px 0px 0px 70px;
}
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
<div id="NewsTicker_horizontal">
<h1>CÁC BÀI VIẾT MỚI NHẤT</h1>
<div id="NewsHorizontal">
<script src="http://data-traidatmui.appspot.com/scripts/Horizontal_re-post.js" language="javascript">
</script>
</div></div>
<script src="http://data-traidatmui.appspot.com/scripts/Ticker_Horizontal.js" type="text/javascript"></script>
<h1>CÁC BÀI VIẾT MỚI NHẤT</h1>
<div id="NewsHorizontal">
<script src="http://data-traidatmui.appspot.com/scripts/Horizontal_re-post.js" language="javascript">
</script>
</div></div>
<script src="http://data-traidatmui.appspot.com/scripts/Ticker_Horizontal.js" type="text/javascript"></script>
8. Save tiện ích lại là xong
Nếu bạn muốn bài viết hiển thị theo từng nhãn thì bạn hãy thay code bên dưới
http://data-traidatmui.appspot.com/scripts/Horizontal_re-post.js
thành code sau
http://data-traidatmui.appspot.com/scripts/Horizontal_re-label.js
Chúc bạn thành công
Chuyên mục:
Blogspot nâng cao
![Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online](http://1.bp.blogspot.com/-0lPFnc_UVq0/TrVDZU6vbcI/AAAAAAAABUU/TTJlcT09M3U/s72-c/Khuc-ca-cho-tinh-nhan.jpg "Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online")
hay đó chứ hehehe
Trả lờiXóaCách trình diễn cũng khá đẹp đúng không? lleu
Trả lờiXóathủ thuật này nếu muốn tiêu đề bài viết nằm dưới img thì làm sao bác? blog của bác nhiều java hữu ích cho người thiết lập blogger nhưng em gop ý chút load rất chậm chậm rất nhiều có lẽ Flash của bác pro quá
Trả lờiXóaNếu muốn làm như bạn thì bạn cần làm một bước khá phức tạp là phải chỉnh sửa lại file *.JS (Horizontal_re-post.js) ở trên lại bạn ah.
Trả lờiXóaAnh Dinh ơi, cho em hỏi, em lưu file js lại để up lên host lấy link nhưng sao nó chỉ hiển thị với đuôi txt, em ko chuyển qua đuôi js được, anh giúp em với. Cám ơn anh nhìu nha!
Trả lờiXóaKhi em lưu file lại thì em nhớ đặt phần mở rộng là *.js nhe. Ví dụ đặt tên file là: tenfile.js và save lại là được thôi em!;))
Trả lờiXóa