Trình diễn bài viết trong một nhãn với hiệu ứng chạy ngang

Chào các bạn !

Có nhiều cách để trình diễn các bài viết nào đó trong cùng môt nhãn để người đọc có thể thuận tiện trong việc tìm kiếm bài đọc ở cùng một chủ đề. Hôm nay mình xin giới thiệu cùng các bạn thủ thuật trình diễn bài viết trong cùng một nhãn với hiệu ứng chạy ngang kèm theo hình ảnh và dòng tóm tắt nội dung phía dưới rất đẹp. Mời các bạn xem Demo blog mình nhé !

Bắt đầu thủ thuật :

1. Đăng nhập vào tài khoản Blogger

2. Vào phần mẫu
3. Chọn chỉnh sửa HTML
4. Chèn code bên dưới vào trước thẻ ]]></b:skin>

.bgcontent{background:#efefef; /*màu nền của tiện ích*/
height:140px; /*chiều cao của tiện ích*/
width:500px; /*độ rộng của tiện ích*/
}
#rc-content {
padding:4px;
width:500px; /*độ rộng của tiện ích*/
}
#rc-main {
width:110px;
background:#fff url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXXfgP5zNLI/AAAAAAAAAGU/Dh1jYQZoSgM/main-bg.png) repeat-y;
}
#rc-top {
background:#fff url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TXXff4uaqaI/AAAAAAAAAGQ/cj2q0Y_nb-A/top-bg.png) no-repeat top;
height:3px;
}
#rc-bottom {
background:#fff url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXXffoEZMJI/AAAAAAAAAGM/JJSC-pSoUTk/bottom-bg.png) no-repeat bottom;
height:3px;
}
.rc-thumbs {
padding:2px 5px 5px 5px;
height:70px;
}
.rc-thumbs IMG {
width:100px; /*độ rộng của ảnh thumbnail*/
height:70px; /*chiều cao của ảnh thumbnail*/
}
.rc-title {
height:48px;
padding:0px 3px 2px 3px;
line-height:1.3em;
font-size:11px;
font-weight:bold;
}
.rc-title a {color:#0000ff;}
.rc-title a:hover {color:#ff0033;}

<br />

5. Bấm lưu lại

6. Chọn Bố cục > Chọn thêm tiện ích > Thêm HTML/Javacrip rồi dán code phía dưới vào

<div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#FFF380;">Phần mềm - Tiện ích hỗ trợ giáo viên </div>
<div class="bgcontent">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg136IZugrnux9k0S-Gf-JbJ2yIUmrQJSh4LnELbtrrYywMNSCaNo3M6PgxYXh8plP5XL0pkboFmOtoiEb4rHf_a8329Sw5_bJO9nhyphenhyphenNIiVlOIlQcU1pk-SQ26ZwSBK1fIYnazi3hhKySpo/";
showRandomImg = true;
zaBold = false;
numposts = 18; //số bài trình diễn trong tiện ích
label = "Hỗ trợ GV"; //thay thành tên nhãn của blog bạn
summaryTitle = 40; //số ký tự của tiêu đề bài viết
home_page = "http://www.buivansum.blogspot.com/"; //thay thành địa chỉ blog bạn
</script>

<br />

Cuối cùng bấm lưu lại và xem kết quả

* Lưu ý : Các bạn thay đổi các dòng sau cho phù hợp với blog bạn

numposts = 18; //số bài trình diễn trong tiện ích

label = "Hỗ trợ GV"; //thay thành tên nhãn của blog bạn ( tên nhãn phải chính xác )

summaryTitle = 40; //số ký tự của tiêu đề bài viết

home_page = "http://www.buivansum.blogspot.com/"; //thay thành địa chỉ blog bạn

Các bạn nên tải file JS về rồi upload lên trang riêng để sử dụng lâu dài

3 comments:

AdimAugust 1, 2013 at 7:36 PM
hay nhung web mình k làm đc

http://www.tivihay.com/
Mr SumAugust 2, 2013 at 5:21 PM
Bạn xem lại trang nhãn xem có đúng k, thay địa chỉ blog vào nữa các việc này phải chính xác. Điều lưu ý nữa là bạn xem lại số bài trình diễn. Ở đây mình ghi 18 nếu số bài trên nhãn nhỏ hơn số bài trình diễn cũng sẽ k hiển thị được. Bạn xem lại nhe. Chúc bạn vui
Mr SumDecember 9, 2013 at 3:24 PM
Không chỉ riêng thủ thuật này mà có nhiều thủ thuật khác chỉ hiển thị tốt trên trình duyệt Firefox hay Chrome.

Mr Sum