Home » Thủ thuật blog
Tiện ích hiển thị bài viết trong blog dạng Tab Cuộn
Table of Contents Autoscroll Gadget
[FD'BlOg] - Tiện ích sẽ hiển thị các bài viết trong blog (đầy đủ thông tin : tựa đề, ngày đăng, nhã...). Và các bài viết sẽ tự động di chuyển trong khung xác định trước, giúp tiết kiệm không gian cho blog của bạn.Bây giờ ta bắt đầu:
1. Đăng nhập blog
2. Tạo 1 Widget HTML/Javascript ở nơi bạn muốn hiển thị tiện ích này.
3. Dán đọan code sau vào:
<script type="text/javascript">
var speed = 2;
function init(){
var el = document.getElementById("marquee_replacement");
el.style.overflow = 'hidden';
scrollFromBottom();
}
var go = 0;
function scrollFromBottom(){
var el = document.getElementById("marquee_replacement");
if(el.scrollTop >= el.scrollHeight-150){
el.scrollTop = 0;
};
el.scrollTop = el.scrollTop + speed;
if(go == 0){
setTimeout("scrollFromBottom()",50);
};
}
function stop(){
go = 1;
}
function startit(){
go = 0;
scrollFromBottom();
}
</script>
<script style="text/javascript" src="http://data.fandung.com/js/TableOfContentsJS.js"></script>
<script src="http://www.fandung.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<script type="text/javascript">showToc();</script>
<style type="text/css">
#marquee_replacement{
border:1px solid #000;
width:100%;
height:250px;
overflow:auto;
background:#fff;
}
#marquee_replacement p.spacer{
height:150px;
}
</style>
<div id="marquee_replacement" onmouseover="stop();" onmouseout="startit();">
<div id="toc">
►Chú ý đọan code màu đỏ:
http://www.fandung.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc
- Nếu bạn muốn hiển thị hết tất cả bài viết trong blog của bạn thì sửa số 999 càng lớn càng tốt(tùy theo số lượng bài viết có trong blog của bạn), nếu muốn hiển thị 1 số bài viết nhất định thì sửa số lại. Ví dụ hiển thị 30 bài viết thì ta sửa code lại là :
http://www.fandung.com/feeds/posts/default?alt=json-in-script&max-results=30&callback=loadtoc

- Tiện ích Popular Posts - Bài xem nhiều với CSS3
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
Comments[ 0 ]
Đăng nhận xét