Tiện ích Recent Posts trượt ngang ứng dụng JQuery cho Blogspot

Một điểm thiếu linh hoạt của giao diện trang chủ Blogspot đó là nó chỉ chứa 1 khung bài đăng duy nhất cho tất cả các nhãn bài viết. Điều này gây ra 1 bất tiện là khi có quá nhiều bài viết thuộc cùng 1 nhãn được đăng liên tiếp, thì các bài viết thuộc những nhãn còn lại sẽ không còn chỗ để hiển thị trên trang chủ, việc này có thể làm giảm đáng kể lượng người đọc blog của bạn. Để khắc phục nó, chúng ta sử dụng tiện ích Recent Posts cho từng Label để đưa các bài viết mới của các nhãn lên trang chủ. Nhưng nếu với mọi nhãn ta đều áp dụng 1 giao diện Recent Posts giống nhau thì sẽ không bắt mắt. Vì vậy hôm nay mình tiếp tục giới thiệu đến các bạn 1 tiện ích về Recent Posts với giao diện mới, sử dụng công cụ trượt JQuery.

☼ 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 ]]></b:skin>

.bgcontent{background:#292929; 
padding-bottom:4px;
height:180px;
width:720px;
}
#rc-content {
padding:4px;
width:720px; 
}
#rc-main {
width:180px;
background:#fff;
}
#rc-top {
background:#fff;
height:3px;
}
#rc-bottom {
background:#fff;
height:3px;
}
.rc-thumbs {
padding:2px 5px 5px 5px;
height:110px;
}
.rc-thumbs IMG {
width:170px; /*độ rộng của ảnh thumbnail*/
height:110px; /*chiều cao của ảnh thumbnail*/
}
.rc-title {
height:48px;
padding:0px 3px 2px 3px;
line-height:1.3em;
font-size:13px;
font-weight:bold;
}
.rc-title a {color:#dd7700;}
.rc-title a:hover {color:#ff00ff;}

Trong đó:
background:#292929;   là màu nền của tiện ích
height:180px; là chiều cao của tiện ích
width:720px; là chiều rộng của tiện ích.

   5-  Bấm  Lưu Mẫu  (save template) lại.

   6- Vào Phần Tử trang (Bố cục) - Chọn Thêm Tiện ích - Thêm một HTML/Javascript và dán đoạn code bên dưới vào:

<div class="bgcontent">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://lh5.googleusercontent.com/-uiWQpvUPWeE/UIkrNuZbdXI/AAAAAAAAGIU/3twuzsl7i1Y/s280/Man-Of-Steel-2013-Superman-Thumb.jpg";
showRandomImg = true;
zaBold = false;
numposts = 15; 
label = "Astrology - 12 cung Hoàng Đạo"; 
summaryTitle = 80; 
home_page = "http://bongnguoilangle.blogspot.com/"; 
</script>

<marquee align="center" direction="left" height="180" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="7" width="720">
<script src="http://bongnguoilangle.googlecode.com/files/rc_label-jquery.js" type="text/javascript">
</script>
</marquee></div>

<p style="float:right;margin:0;padding:3px">Xem tất cả: <a href="http://bongnguoilangle.blogspot.com/search/label/Astrology - 12 cung Hoàng Đạo?&max-results=7">Astrology - 12 cung Hoàng Đạo</a></p>

Trong đó
numposts = 15;    số bài trình diễn trong tiện ích
label = "Astrology - 12 cung Hoàng Đạo";   thay thành tên nhãn của blog bạn
summaryTitle = 80;   số ký tự của tiêu đề bài viết
home_page = "http://bongnguoilangle.blogspot.com/";  Thay thành URL địa chỉ blog của bạn.

   7-  Bấm  Lưu Mẫu  (save template) lại.

Chúc các bạn thành công!

Javascript: Namkna
Bóng Người Lặng Lẽ