"Tiện ích Tabnews dạng Slide bằng JQuery cho Blogspot"

(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ật

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://data-traidatmui.appspot.com/scripts/jquery-1.2.6.min1.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/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;
}

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] = "http://lh6.ggpht.com/_BTztXRwC9ik/TMmT8UtD9QI/AAAAAAAAElc/wEXpVqs7lt4/no.png";
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://data-traidatmui.appspot.com/scripts/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://data-traidatmui.appspot.com/scripts/slide_tabnews_post.js

Chúc bạn thành công

Xem khác cùng chủ đề

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

XDN
4/06/2011 10:12:00 SA Trả lời

hủa,cảm ơn anh đã đáp ứng yêu cầu,không ngờ lại nhanh tới vậy.
Áp dụng cái đã

XDN
4/06/2011 10:58:00 SA Trả lời

anh Đình ơi,
Em áp dụng rồi nhưng sao nó lại không hiện tiêu đề bài viết nhỉ.
Anh xem lại dùm em với

4/06/2011 05:15:00 CH Trả lời

cám ơn bạn đã chia sẻ source code hay cho blog. Tôi mong sẻ có nhiều bài viết như này hoặc hơn nữa

Admin
4/06/2011 07:03:00 CH Trả lời

Anh đã test lại rồi em ah nó hiển thị đầy đủ và chạy rất tốt. em hãy thử thực hiện lại xem sao.

Nặc danh
4/07/2011 08:18:00 SA Trả lời

Rất hay, nhưng Amin có thể hướng dẫn cách hiển thị bài mới, bài xem nhiều ... giống như trang thu thuật không? Vì tôi thấy có vẻ rất nhẹ nhàng. xin cảm ơn

http://thuthuat.easyvn.net/

Admin
4/07/2011 08:48:00 SA Trả lời

Bạn có thể kết hợp các bài viết tạo tab mình giới thiệu tại đây và các bài viết về tạo bài viết mới nhất và xem nhiều nhất để thêm vào phần nội dung của phần tab tại đây

Bạn có thể gõ từ khóa "bài viết mới nhất" ở khung tìm kiếm để xem các thủ thuật bài viết mới mà mình đã giới thiệu.

Thân!

4/07/2011 07:49:00 CH Trả lời

@Nặc danh Spam nhé ^^

Nặc danh
4/09/2011 04:27:00 CH Trả lời

cảm ơn đã hướng dẫn, nhưng làm không được như ý vì chỉ hiển thị một bài viết và nội dung tóm lược. còn trang gostep.info và trang thủ thuật nó hiển thị tiêu đề trong mỗi mục.
TDM có thể viết 1 bài cụ thể việc này không. mình thấy máy cái trượt trượt làm cho trang load rất nặng nề.

11/21/2011 08:42:00 SA Trả lời

xin lỗi cho mình hỏi có thể làm số bài viết hiển thị hơn 5 được không, mình có chỉnh nhưng vẫn mặc định là 5. Mong bạn giúp đỡ

Admin
11/21/2011 06:18:00 CH Trả lời

@ Châu Văn Thịnh: Vâng do trong file JS đã mặc định là 5 nên không thể tăng số bài viết bằng cách chỉnh sửa biến numposts được, để có thể tăng số bài viết lên thì bạn cần mở file JS lên (/slide_tabnews_label.js) và bạn sẽ thấy code như bên dưới
[code]if (i==4) {
var trtd = '<div class="slide"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span class="slmet">'+cmtext+ ' ' + daystr + '</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></div>';
document.write(trtd);
}[/code]
Bạn chỉ việc sao code đó ra thêm là 5, 6, 7... là có thể tăng thêm số bài viết. Ví dụ thêm
[code]if (i==5) {
var trtd = '<div class="slide"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span class="slmet">'+cmtext+ ' ' + daystr + '</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></div>';
document.write(trtd);
}[/code] là có thể tăng được 6 bài...

11/22/2011 03:46:00 SA Trả lời

Nghi ngay là thế mà, cảm ơn ^^. để cào chỉnh sửa trong JS đó

Admin
11/22/2011 06:56:00 SA Trả lời

@ Châu Văn Thịnh: Bạn chỉ cần chỉnh sửa như mình nói ở trên và tăng số bài viết tại biến numposts lên cho phù hợp là được.

11/22/2011 11:15:00 CH Trả lời

à mình làm được rồi, nhưng Admin có lỗi phát sinh nói chung nó xuất hiện khá hên xui, ví dụ nếu trang mình gõ là phimanime.blogspot.com thì bài viết sẽ hiện bình thường và vòng lặp của bài viết cũng bình thường, nhưng lâu lâu xuất hiện dấu # ở cuối phimanime.blogspot.com# thì vòng lặp sẽ bị lỗi, tức là chỉ có mỗi bài viết đó bị lặp lại nhiều lần và không qua bài khác, khi F5 lại nếu mất # thì bình thường nếu còn dấu # thì vẫn như vậy. Admin cho mình biết lỗi đó là vì sao được không

7/24/2015 02:22:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





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