Tiện ích "Recent post" có ảnh thumbnail chạy ngang

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) - Theo yêu cầu của bạn có nickname Jeennetk thì hôm nay mình xin giới thiệu cùng các bạn thủ thuật tạo tiện ích các bài viêt theo từng nhãn chạy ngang có ảnh thumbnail. Thật ra thủ thuật này cũng đã các blog đăng và hướng dẫn, tuy nhiên có lẽ có nhiều bạn vẫn chưa tiếp xúc được với thủ thuật này. Vì vậy hôm nay mình xin đăng lại bài viết này để giúp các bạn có thể ứng dụng nó cho blog của mình.


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

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn chỉnh sửa HTML
4. Chèn code CSS 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;}

5. Save template lại và trở về phần tử trang
6. Chọn thêm tiện ích (Add a Gadget)
7. Thêm 1 HTML/Javascript và chèn vào nó code bên dưới
<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 = 40; //số bài trình diễn trong tiện ích
label = "Advanced blogger"; //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.traidatmui.com/"; //thay thành địa chỉ blog bạn
</script>

<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="5" align="center" height="150" width="500">
<script src="http://data-traidatmui.appspot.com/scripts/rc_label.js" type="text/javascript"></script>
</marquee>
</div>

Bạn dựa vào các hướng dẫn trên để thay đổi cho phù hợp với blog của bạn.

8. Cuối cùng save tiện ích lại

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

Loading...

10 nhận xét

  1. Bạn có thể tạo tiện ích toàn bài đăng mà không theo từng nhẵn được không

    Trả lờiXóa
  2. Nếu muốn hiển thị cho toàn bộ bài viết trên blog thì bạn thay file JS (http://traidatmui-tips.googlecode.com/files/rc_label.js) ở trên thành http://traidatmui-tips.googlecode.com/files/rc_allpost.js

    Trả lờiXóa
  3. phần cuối trang vnexpress.net có cái tiện ích em thấy hình cũng giống thế này mà nó chạy nuột hơn
    mong anh làm 1 bài hứong dẫn về cái tiện ích như trang vnexpress.net ! uauaua

    Trả lờiXóa
  4. Bạn theo dõi, Mình sẽ test và post bài thời gian tới nhé

    Trả lờiXóa
  5. TĐM có thể chỉnh sửa thủ thuật này cho nó chạy dọc được không? Cảm ơn TĐM lleu

    Trả lờiXóa
  6. Tuyệt, nhưng sao 20 bài mà chỉ hiện 9 vậy bạn? Chỉnh cho nối đuôi liền nhau được không? Chạy hết bài 9 là nối tiếp bài 1 luôn...

    Trả lờiXóa
    Trả lời
    1. Cái này nó chạy hết các bài mới bắt đầu lại từ bài một không thể nối tiếp bạn ơi.

      Xóa
  7. Cám ơn nhiều, mình rất hợp với trang của bạn, hướng dẫn là làm được, chúc bạn thành công trong công việc, thu hút nhiều fans nhé

    Trả lờiXóa