Tin mới đăng:

Recent posts với hiệu ứng trượt bằng jQuery

Tiện ích recent post hôm nay mình giới thiệu cho các bạn thêm 1 dạng bài viết mới. Tiện ích này có điểm đặc biệt là phần ảnh thumbnail, tiêu đề bài viết và đoạn trích dẫn mô tả chỉ hiện thị khi ta click thanh menu ngang chứa tên của bài viết.
     Chắc hẳn nhiều người không còn xa lạ vói thủ thuật này. Rất nhiều trang Blog giới thiệu do vậy mình cũng không biết nó do ai thiết kế và post lên nữa.
Hình ảnh minh họa
Cách tiến hành thủ thuật:
1- Đăng nhập vào Blog
2- Vào Thiết kế
3- Chọn Chỉnh sửa HTML
4- Dán đoạn code sau vào trước thẻ đóng </head>
<script type="text/javascript" src="http://buixuandoanh.com.vn/js/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});
</script>

<style type="text/css">
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(https://lh4.googleusercontent.com/-_-eoDLSWxGk/T5AyGYGSvTI/AAAAAAAABLk/GONv0zzm-HA/h120/arrow-square-namkna-blogspot-com.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
5- Bấm Lưu Mẫu (save template) lại.
6- Tạo 1 widget HTML/Javascript rồi dán code bên dưới vào:
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/-wm2RqrVKwTg/T493GPLRGSI/AAAAAAAABLI/MmvKZmefPzY/s320/nothumbnail-namkna-blogspot-com.gif";

showRandomImg = true;

jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;

jtext = "Comments";
jshowPostDate = true;

jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";

numposts = 10;
label = "Thủ thuật";
home_page = "http://www.xuandoanh.com/";

</script>

<div class="accordion">
<script src="http://buixuandoanh.com.vn/js/j-label-fix.js" type="text/javascript"></script>
</div>
Trong đó
- Label = "Thủ thuật"; là nhãn (laber) bạn muốn hiển thị. Thay Thủ thuật thành tên nhãn của bạn.
- Home_page = "http://www.xuandoanh.com/"; Thành URL địa chỉ blog của bạn.
- Numposts = 10; Số bài viết muốn hiển thị
- JsummaryPost = 200; Số ký tự mô tả.
- Jimgwidth = 80; Chiều rộng của ảnh thumbnail
- Jimgheight = 80; Chiều cao của ảnh thumbnail
- Jfntsize = 12; Kích cỡ Font chữ
  Nếu muốn hiển thị cho cả Blog thì thay link script sau:
http://buixuandoanh.com.vn/js/j-label-fix.js
     Thành:
http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/j-post-fix.js
                                                  Chúc bạn thành công
Recent posts với hiệu ứng trượt bằng jQuery Recent posts với hiệu ứng trượt bằng jQuery
9/10 356 bình chọn

Chia sẻ:

Xin chào! Mình là Bùi Xuân Doanh. Mình muốn được chia sẻ cùng các bạn những gì mình biết.

Theo dõi tôi trên Facebook Or Youtube


Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Quản trị

    Admin Bùi Xuân Doanh

    Click để Chat với Admin! Click để Chat với Admin!

    Email: buixuandoanh@gmail.com

    Hotline: 0983.379.818

Tư vấn Kỹ thuật