Bài viết trong cùng một nhãn 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/AVvXsEiTWazmmKSGoZJqsiWJBF5Tz2hwg8qEw12499__20R3LXN3736BASZfB4xN0ySAtfkc0QrJG9WexYHfP-fdfxhkuW6b7_2LNIhK-gWEfL5E5IIXDTit0-VIppxB2y1yq-3Ym2FCCGjVXr4g/"; 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.viettin24h.com/"; //thay thành địa chỉ blog bạn </script> <marquee align="center" direction="left" height="150" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="950"> <script src=" http://dl.dropbox.com/u/66348944/rc_label.js" type="text/javascript"> </script> </marquee></div> <p style="float:right;margin:0;padding:3px"><a href="http://quangvietmkt.blogspot.com/search/label/WIN%207"> »</a></p> <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.viettin24h.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

theo buivansum

Nhấn Thích , G +1 và chia sẻ tới bạn bè: Nếu bài viết giúp ích cho bạn!

Cám ơn các bạn đã ghé thăm ủng hộ
Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn