Tiện ích Slider News cho Blogspot với hiệu ứng JQuery
Bài viết hôm nay mình chia sẽ cùng các bạn cách trình bài những bài viết mới trên Blogspot rất gọnvà kết hợp với hiệu ứng bằng JQuery trông cũng khá hấp dẫn. Cách trình diễn bài viết mới theo kiểu này cũng đã được nhiều web/blog ứng dụng. Và hôm nay mình sẽ hướng dẫn các bạn cách để sử dụng nó trong Blogspot. Tiện ích này chỉ hiển thị tiêu đề của bài viết và với hiệu ứng slide trông khá ấn tượng.
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 src="http://data-traidatmui.appspot.com/scripts/jquery.min.js" type="text/javascript"/></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.inner.fade.js"></script>
<script type="text/javascript"> $(document).ready( function(){ $('#news').innerfade({ animationtype: 'slide', speed: 750, timeout: 2000, type: 'random', containerheight: '1em' }); $('#portfolio').innerfade({ speed: 'slow', timeout: 4000, type: 'sequence', containerheight: '220px' }); $('.fade').innerfade({ speed: 'slow', timeout: 1000, type: 'sequence', containerheight: '1.5em' }); } ); </script>
<style>
.slidenews{font-size:12px;
font-family:arial;
margin:0px;}
.slidenews ul li{list-style-type:none;}
.slidenews a{margin-left:0px;color:#000; /*màu của tiêu đề bài viết*/
}
.slidenews a:hover{color:#666;}
</style>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.inner.fade.js"></script>
<script type="text/javascript"> $(document).ready( function(){ $('#news').innerfade({ animationtype: 'slide', speed: 750, timeout: 2000, type: 'random', containerheight: '1em' }); $('#portfolio').innerfade({ speed: 'slow', timeout: 4000, type: 'sequence', containerheight: '220px' }); $('.fade').innerfade({ speed: 'slow', timeout: 1000, type: 'sequence', containerheight: '1.5em' }); } ); </script>
<style>
.slidenews{font-size:12px;
font-family:arial;
margin:0px;}
.slidenews ul li{list-style-type:none;}
.slidenews a{margin-left:0px;color:#000; /*màu của tiêu đề bài viết*/
}
.slidenews a:hover{color:#666;}
</style>
5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script language="JavaScript">
imgr = new Array();
showRandomImg = false;
numposts =5; //số bài viết hiển thị, ở đây mình chỉ mặc định số này bằng 5
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="slidenews">
<script src="http://data-traidatmui.appspot.com/scripts/slidernews_post.js" type="text/javascript">
</script></div>
imgr = new Array();
showRandomImg = false;
numposts =5; //số bài viết hiển thị, ở đây mình chỉ mặc định số này bằng 5
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="slidenews">
<script src="http://data-traidatmui.appspot.com/scripts/slidernews_post.js" type="text/javascript">
</script></div>
7. Save tiện ích lại là xong
Chúc bạn thành công
Nguồn: In4mau.blogspot.com
Không có nhận xét nào: