Tiện ích bài viết mới nhất với hiệu ứng autoscroll bằng Jquery
Thứ Ba, 21 tháng 6, 2011
Thời gian qua mình đã có post 2 bài viết về Recent post (Bài viết mới nhất) với hai hiệu ứng khác nhau. Và hôm nay tiếp theo mình xin giới thiệu đến các bạn thêm một tiện ích recent post cho blogger. Thủ thuật này với hiệu ứng auto-scroll, các bài viết sẽ tự động thay đổi nội dung với dạng cuộn tương ứng với khoảng thời gian đặt trước. Để thấy rõ tiện ích này như thế nào, bạn có thể click Demo và chờ giây lát để xem hiệu ứng của tiện ích này.1. Đăng nhập vào tài khoản Blogspot
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chèn code css bên dưới vào trước thẻ ]]></b:skin>
div.autoscroll {
background:#eee; /*màu nền của tiện ích*/
color:#0000ff; /*màu text của tiện ích*/
width: 300px; /*độ rộng của tiện ích*/
position: relative;
overflow: hidden;
height: 425px; /*chiều cao của tiện ích*/
border:3px solid #ccc; /*đường viền của tiện ích*/
}
.autoscroll a{
color:#0000ff; /*màu tiêu đề bài viết*/
}
.autoscroll a:hover{
color:#ff0033; /*màu tiêu đề bài viết khi rê chuột*/
}
div.autoscroll ul {
position: relative;
list-style-type: none;
padding: 0px;
margin: 0px;
}
div.autoscroll ul li {
margin-top: 3px;
padding-bottom: 2px;
border-bottom:1px solid #0000ff;
}
.autoimg{
float:left;
margin:3px 5px 0px 5px;
padding:2px;
border:1px solid #fff;}
4. Bạn chèn tiếp code bên dưới vào sau thẻ <head>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.min.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/autoscroll.js" type="text/javascript"></script>
5. Save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript và chèn code bên dưới vào nó
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjulQrFRpSFWYm2s-FHY8kjBilWmMR9EoweN28Bw15sBB-Lhw_evkAtC7vd2YDWIDiz2SCczYVjsxzqwCb_JwGvdvVwfLhTYaHHPz0fq2BQ7lFfsVF5P0xFjUgdXx0atWbOZSsl5EWGqpAH/";
showRandomImg = true;
borderColor = "no";
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
fntsize = 11; //cở chữ của tiêu đề bài viết
dcmcolor = "#000033"; //màu text của phần ngày và nhận xét
dcmsize = "1"; //cở chử của phần ngày và nhận xét
acolor = "";
aBold = true;
icon = " » ";
text = "nhận xét"; //nếu không muốn hiển thị phần nhận xét bạn thay "Nhận xét" thành "no"
showPostDate = true; //nếu không muốn hiển thị ngày đăng thay TRUE thànhFALSE
summaryPost = 100; // số kí tự phần tóm tắt nội dung bài viết
summaryFontsize = 12; //cỡ chữ phần tóm tắt
summaryColor = "#000"; //màu text phần tóm tắt
icon2 = " » ";
numposts = 15; //số bài viết hiển thị
label = "Marketing"; //tên nhãn bài viết
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="autoscroll">
<script src="http://traidatmui-tips.googlecode.com/files/recent_post_autosroll.js" type="text/javascript"></script>
</div>
Bạn chỉ việc dựa vào các dòng hướng dẫn và thay đổi cho phù hợp với blog cuả bạn.
6. Save tiện ích lại
Nếu muốn hiển thị bài viết theo từng nhãn, bạn hãy thay file script (recent_post_autosroll.js) thành link bên dưới
http://traidatmui-tips.googlecode.com/files/recent_label_autosroll.js
nguồn traidatmui.com
Chúc bạn thành công
Bài đăng
* Lưu ý :
- Vui lòng gõ tiếng Việt có dấu khi viết bình luận.
- Nội dung phải liên quan đến chủ đề bài viết.
- Không dùng lời lẽ khích bác, thô tục ảnh hưởng đến người khác.
- Không đặt link đến Blog/Web khác.