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

 

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


 
DEMO
» 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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQepSUkPAzVKh17jMeoab9qWcnzuEJWx9HE-GcAhgfsT6nInZ4oF5eiPlC11GJCWyjke6yWk6VWl03UhCj_yD7VwkyZ01XqrakWB_ESCnUwRu5_3xadRcZQ5PDNCDdKyYjTolzJXmnoOhJ/";
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://traidatmui-tips.googlecode.com/files/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