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

(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

Xem khác cùng chủ đề

10 nhận xét | Viết lời bình

8/10/2011 02:08:00 SA Trả lời

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

Admin
8/10/2011 02:37:00 SA Trả lời

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

8/10/2011 05:27:00 SA Trả lời

Cảm Ơn nhiều!

8/13/2011 12:34:00 CH Trả lời

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

Admin
8/13/2011 10:47:00 CH Trả lời

Bạn theo dõi, Mình sẽ test và post bài thời gian tới nhé

11/03/2011 06:16:00 SA Trả lời

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

4/11/2012 01:12:00 SA Trả lời

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

Admin
4/11/2012 01:53:00 SA Trả lời

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.

4/11/2012 04:36:00 SA Trả lời

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é

Admin
4/11/2012 04:45:00 SA Trả lời

Cảm ơn sự ủng hộ của bạn nhé!

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang