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

Tiện ích recent post hôm nay namkna 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 viề đã có rất nhiều trang blog giới thiệu do vậy namkna cũng không biết nó do ai thiết kế à post lên nữa.

Demo for Post

Ảnh minh họa:

☼ Cách tiến hành:

   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://ajax.googleapis.com/ajax/libs/jquery/1.6.4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHMnYPkrJaYibghZrq8Qqx5kcKk-2LPIfX1_MFTUhsUXiG04nSuqCN6z0bo66vPKaG0p4K3MUjSOGJcMsDRZhHNvpk-UvxjNDI_uvh9INyKApHpOZJS3guI2wFg6Cg42vEnKA4KpRljFBx/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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGAty1z3DAWyH1bQpjf270oIGEKH-P2JHOxehH3TurMj6x8mdVvz6i3CGQ8WlvkW1jxsMnbrulAIinu297yN9fbJ38aaRu0NlT6izVyhmG78463-v0c9DF0lida-ZbkaxeYjzji2w-c1Pt/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 = "Blogspot-tips";
home_page = "http://namkna.blogspot.com/";

</script>

<div class="accordion">
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/j-label-fix.js" type="text/javascript"></script>
</div>

Trong đó

• label = "Blogspot-tips"; là nhãn (laber) bạn muốn hiển thị. Thay Blogspot-tips thànht ên nhãn.
  home_page = "http:/namkna.blogspot.com/";  là 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;  .

Nếu muốn hiển thị cho cả blog thì thay link scip:

http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/j-label-fix.js

Thành:

http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/j-post-fix.js

Chúc thành công!

(Web Designer Wall)

Chủ đề: