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

Loading...

14 nhận xét

  1. 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 đã

    Trả lờiXóa
  2. 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

    Trả lờiXóa
  3. 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óa
  4. 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.

    Trả lờiXóa
  5. 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/

    Trả lờiXóa
  6. 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!

    Trả lờiXóa
  7. 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ề.

    Trả lờiXóa
  8. 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
  9. @ 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...

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

    Trả lờiXóa
  11. @ 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
  12. à 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óa
  13. 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





    Trả lờiXóa