Pages

Banner 468 x 60px

 

Thứ Ba, 1 tháng 11, 2011

Trình diễn bài viết mới dạng Scroll ngang bằng Mootools

0 nhận xét

» Bắt đầu thủ thuật

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 language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeWHSp05Hbxt4Tfhm2FIwVjRyOMYAHtIOL79t3ld8_iO94mNszKq1Q9sLuN9ZEjHnO-34hyphenhyphenvIF9UpCaD4h0qZZ7gGInJXlEqkdR3R4JhAW2zvctM8lMod4tWLe3D_CAnoW3AUjlzK1jF5/";
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://nguyenhoangnam.googlecode.com/files/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;
}

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://nguyenhoangnam.googlecode.com/files/Horizontal_re-post.js.txt" language="javascript">
</script>
</div></div>
<script src="http://nguyenhoangnam.googlecode.com/files/Ticker_Horizontal.js.txt" 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://nguyenhoangnam.googlecode.com/files/Horizontal_re-post.js.txt

thành code sau
http://nguyenhoangnam.googlecode.com/files/Horizontal_re-label.js.txt


Chúc bạn thành công



Không có nhận xét nào:

Đăng nhận xét