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/AVvXsEhTxSjkwA67VkiW4ieHZvx-74q4B8fu7XrTV5Q9pQkKjaia4rRTXEYFszhX-_ysVkaVEi_xhXJuSpafb_96ME9QanO3tjIMHUvW3b8cE7u6ilkKU-jt0cyZOXD1lec2DrOAFb_etVXyMuLm/";

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