Tin mới

Advertisement

Binance

9 tháng 5, 2013

Bài viết trong cùng một nhãn chạy ngang

InstaFxCopy



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] = "http://lh6.ggpht.com/_BTztXRwC9ik/TMmT8UtD9QI/AAAAAAAAElc/wEXpVqs7lt4/no.png";

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.quangvietmkt.blogspot.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.quangvietmkt.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

theo buivansum

4 nhận xét:

  1. Mình cũng làm như vậy nhưng không được bạn ơi !

    Trả lờiXóa
  2. Bạn chú ý thay đường link nhé
    Mình đã check lại code vẫn chuẩn đó

    Trả lờiXóa
  3. được m cùi đó, m thay link, kiểm tra kỹ lắm rồi mà chả ra

    Trả lờiXóa
    Trả lời
    1. 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
      Nếu k được bạn có thể vào link áp dụng thủ thuật này cũng tương tự cách hiển thị của tt trên xem có tích hợp với Blog bạn k nhé :
      http://quangvietmkt.blogspot.com/2013/05/slider-bai-viet-moi-truot-ngang-cho-blog.html
      Cám ơn bạn đã ghé thăm QuangVietmkt

      Xóa