
Hình ảnh minh họa

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào ngay sau thẻ <head>
<script src="http://traidatmui-tips.googlecode.com/files/jquery-1.2.6.min1.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/slide_tabnews.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/slide_tabnews.js" type="text/javascript"></script>
5. Chèn tiếp code CSS vào trước thẻ ]]></b:skin>
#slider {
width: 1000px; /*độ rộng của tab*/
background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZtDveAc1YI/AAAAAAAAANM/xm2Mf22aDSg/slide.png) no-repeat;
height: 254px; /*chiều cao của tab*/
overflow: hidden;
position: relative;
margin: 5px 0;
font-family:arial;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-size: 14px;
color: #ac0000;
padding:3px 0px 3px 30px;
margin:0px 0px;
width:510px; /*độ rộng của tiêu đề bài viết*/
overflow:hidden;
}
.slide h2 a {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #fff;
font-size: 10px;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 40px;
margin:0px 0px;
}
.slide p {
color: #999;
font-size: 12px;
line-height: 1.4em;
width: 500px; /*độ rộng phần tóm tắt bài viết*/
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 577px;
border:1px solid #ccc;
padding:3px;
}
#slider-stopper {
position: absolute;
font-family: times;
top: 113px;
right: 65px;
color: #ff0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
width: 1000px; /*độ rộng của tab*/
background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZtDveAc1YI/AAAAAAAAANM/xm2Mf22aDSg/slide.png) no-repeat;
height: 254px; /*chiều cao của tab*/
overflow: hidden;
position: relative;
margin: 5px 0;
font-family:arial;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-size: 14px;
color: #ac0000;
padding:3px 0px 3px 30px;
margin:0px 0px;
width:510px; /*độ rộng của tiêu đề bài viết*/
overflow:hidden;
}
.slide h2 a {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #fff;
font-size: 10px;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 40px;
margin:0px 0px;
}
.slide p {
color: #999;
font-size: 12px;
line-height: 1.4em;
width: 500px; /*độ rộng phần tóm tắt bài viết*/
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 577px;
border:1px solid #ccc;
padding:3px;
}
#slider-stopper {
position: absolute;
font-family: times;
top: 113px;
right: 65px;
color: #ff0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào nó code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRBpjmZ7_2yC_d0voyUwDswUZfRCoE02b0jh5k4eoJdvXWTi6qoDKaLOAMMR-h4hHhrTPDoestitXebgcn_NiYCFac5iP0ZZ18UUZyBaTEB3-9hWZn9S5Tn7EEIDB6FKgNQZCcw9Q-A_q/";
imgwidth = 260; //độ rộng của ảnh trong tab
imgheight = 200; //chiều cao của ảnh trong tab
showRandomImg = false;
aBold = true;
text = "Nhận xét";
showPostDate = true; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSE
summaryPost = 350; //số ký tự hiển thị phần tóm tắt bài viết
summaryFontsize = 12;
summaryColor = "#000";
numposts =5; //số bài viết hiển thị, ở đây mình chỉ mặc định số này bằng 5
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div id="slider">
<div id="mover">
<script src="http://traidatmui-tips.googlecode.com/files/slide_tabnews_label.js" type="text/javascript">
</script>
</div>
</div>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRBpjmZ7_2yC_d0voyUwDswUZfRCoE02b0jh5k4eoJdvXWTi6qoDKaLOAMMR-h4hHhrTPDoestitXebgcn_NiYCFac5iP0ZZ18UUZyBaTEB3-9hWZn9S5Tn7EEIDB6FKgNQZCcw9Q-A_q/";
imgwidth = 260; //độ rộng của ảnh trong tab
imgheight = 200; //chiều cao của ảnh trong tab
showRandomImg = false;
aBold = true;
text = "Nhận xét";
showPostDate = true; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSE
summaryPost = 350; //số ký tự hiển thị phần tóm tắt bài viết
summaryFontsize = 12;
summaryColor = "#000";
numposts =5; //số bài viết hiển thị, ở đây mình chỉ mặc định số này bằng 5
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div id="slider">
<div id="mover">
<script src="http://traidatmui-tips.googlecode.com/files/slide_tabnews_label.js" type="text/javascript">
</script>
</div>
</div>
8. Save tiện ích lại
Ở trên mình cho nó hiển thị các bài viết mới theo từng nhãn riêng, nếu bạn muốn hiển thị theo bài viết trên toàn blog bạn hãy thay file *.JS (slide_tabnews_label.js) ở trong code thành file JS bên dưới.
http://traidatmui-tips.googlecode.com/files/slide_tabnews_post.js
Chúc bạn thành công
0 nhận xét