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;}
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>
<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
Tags:
Blogspot nâng cao
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óaNế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óaCảm Ơn nhiều!
Trả lờiXóaphầ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
Trả lờiXóamong anh làm 1 bài hứong dẫn về cái tiện ích như trang vnexpress.net ! uauaua
Bạn theo dõi, Mình sẽ test và post bài thời gian tới nhé
Trả lờiXóaTĐ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óaTuyệ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óaCá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óaCá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óaCảm ơn sự ủng hộ của bạn nhé!
Xóa