(Traidatmui.com) – Theo yêu cầu của bạn XDN thì hôm nay mình xin chia sẻ cùng các bạn cách tạo Tabnews dạng Slide mà Phan Dũng đã có đề cập trên site fandung.com. Tuy nhiên, bên fandung chỉ dừng lại ở cách bạn phải làm thủ công để cập nhật bài viết chứ không tự động cập nhật các bài viết mới trên blog. Để thuận tiện hơn, ở đây mình sẽ giúp các bạn khắc phục việc này, tức là với thủ thuật này thì các bài viết trong Tabnews sẽ được tự động cập nhật khi bạn đăng bài viết mới.
Hình ảnh minh họa
» Bắt đầu thủ thuật1. Đă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
Bài đăng
0 nhận xét