Tiện ích Tabnews dạng Slide bằng JQuery cho Blogspot
Điểm 4.6/5 dựa vào 87 đánh giá
(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://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>
<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;
}
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>
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
Chuyên mục:
Blogspot nâng cao
![Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online](http://1.bp.blogspot.com/-0lPFnc_UVq0/TrVDZU6vbcI/AAAAAAAABUU/TTJlcT09M3U/s72-c/Khuc-ca-cho-tinh-nhan.jpg "Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online")
![Phim Đánh Cắp Trái Tim [94/94 Tập] Trọn Bộ Online](http://2.bp.blogspot.com/-jFj5M99idL0/ToQTwpAPAPI/AAAAAAAAAZ0/2GUybRFN-cQ/s72-c/Phim+%25C4%2590%25C3%25A1nh+C%25E1%25BA%25AFp+Tr%25C3%25A1i+Tim+VTV3+Online.jpg "Phim Đánh Cắp Trái Tim [94/94 Tập] Trọn Bộ Online")
hủa,cảm ơn anh đã đáp ứng yêu cầu,không ngờ lại nhanh tới vậy.
Trả lờiXóaÁp dụng cái đã
anh Đình ơi,
Trả lờiXóaEm á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
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
Trả lờiXóaAnh đã 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.
Trả lờiXóaRấ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
Trả lờiXóahttp://thuthuat.easyvn.net/
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
Trả lờiXóaBạ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!
@Nặc danh Spam nhé ^^
Trả lờiXóacả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.
Trả lờiXóaTDM 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ề.
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 đỡ
Trả lờiXóa@ 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
Trả lờiXóa[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...
Nghi ngay là thế mà, cảm ơn ^^. để cào chỉnh sửa trong JS đó
Trả lờiXóa@ 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.
Trả lờiXóaà 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
Trả lờiXóaBạ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%
Trả lờiXóaNgoà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