"Hiển thị bài viết có ảnh thumb và phân trang"

(Traidatmui.com) – Thời gian qua có nhiều bạn đã yêu cầu mình giúp việc hiển thị bài dạng có ảnh thumbnail cho blogspot, và hôm nay mình xin chia sẽ đến các bạn thủ thuật này. Thủ thuật này chắc hẳn là các bạn đã gặp ở bên trang mothuthuat.com, tuy nhiên ở đây có một vài điểm khác biệt. Ở bên mothuthuat.com chỉ hiển thị cho tất cả bài viết trên blog, ở đây mình sẽ giúp các bạn hiển thị bài viết theo từng nhãn riêng trên blog của bạn. Thủ thuật này khá phức tạp, ở đây mình chỉ hướng dẫn các bạn những bước cơ bản và cần thiết không can thiệp nhiều vào các dòng mã script, bạn cần cẩn thận và từng bước thực hiện theo hướng dẫn.

1. Đầu tiên đăng nhập tài khoản Blogger
2. Vào phần thiết kế (Design) chọn chỉnh sửa HTML
3. Thêm ccode bên dưới vào trước thẻ ]]></b:skin>
.clear {clear: both;}
.home-navi {padding-left:8px;width:518px;}
.home-navi h2 {font-family:Times;border-bottom:1px solid #fff;padding-bottom:2px;margin-bottom:0px;}
.home-navi h2 a {color:#0000ff;padding-left:20px;margin-left:10px;background:url(http://lh6.ggpht.com/_BTztXRwC9ik/S5hODuxnnvI/AAAAAAAAAxo/lLo5RUyPe1Q/4B3.gif) no-repeat; font-size:15px;text-decoration:none;}
.home-navi h2 a:hover {color:#ff0000;}
.authorpost {background:url(http://lh4.ggpht.com/_BTztXRwC9ik/S5hOZPJTAHI/AAAAAAAAA7Y/YtrnVgKtXL0/003.gif) no-repeat; margin-left:30px;margin-top:3px;padding:0px 0px 0px 18px; font-size:12px;}
.continue{float:right;padding-right:10px;width:90px;text-align:center;}
.continue a {margin-bottom:-10px;}

#page-rc-tooltip {
color:#000099; text-align:center; font-weight:bold; padding-top:5px;padding-bottom:0px;}
#page-rc-tooltip a {color:#000033;text-decoration:none; border:1px solid #fff; padding:2px 5px;background: url('http://lh6.ggpht.com/_BTztXRwC9ik/THjRtE89zZI/AAAAAAAADAM/rkKSGiTqQtM/sd.png') repeat-x scroll 0px 0px;}
#page-rc-tooltip a:hover {color:#0000ff; background: url('http://lh5.ggpht.com/_BTztXRwC9ik/TIyIaDiUtII/AAAAAAAADl0/65DCrszEAUE/comm.png') repeat}
#page-rc-tooltip span {border:1px solid #ccc; padding:2px 5px;background:#fff;}
#page-rc-tooltip span.currentpage {background: url('http://lh5.ggpht.com/_BTztXRwC9ik/TIyIaDiUtII/AAAAAAAADl0/65DCrszEAUE/comm.png');}

Phần css này là những dòng lệnh quen thuộc nên mình không giải thích nhiều nữa, bạn tự chỉnh sửa phần này.

4. Save template lại và trở về phần tử trang
5. Thêm 1 HTML/Javascript và thêm code bên dưới vào tiện ích đó
<script type="text/javascript">
//<![CDATA[
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;

}

function showrecentposts(json) {
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm ;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
var plabel = new Array();
var cate = entry.category;
if(cate) {
for (var k = 0; k < entry.category.length; k++) {
plabel[k] = ' <a class="label-link" href="http://www.traidatmui.com/search/label/'+entry.category[k].term+'">'+entry.category[k].term+'</a> ';
}
}
else {plabel = "No label";}

var authpost = entry.author[0].name.$t;

var postdate = entry.published.$t;
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
postDay = day+ "/" + m + "/" + y ;

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else postcontent = "";

s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {img[i] = d;} else {img[i]="http://lh6.ggpht.com/_BTztXRwC9ik/TMmT8UtD9QI/AAAAAAAAElc/wEXpVqs7lt4/no.png";}

if (pcm==0) {var comment = " No Comment ";}
else {var comment = " "+ pcm + " Comments ";}

var td1 = '<div class="home-navi"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><div class="authorpost">Được đăng bởi <b>'+authpost+'</b> | on '+postDay+' | '+comment+'</div><p><img style="width:100px;height:90px; padding:3px;border:1px solid #fff;margin-right:5px;margin-bottom:5px;float:left;" src="'+img[i]+'" />'+removeHtmlTag(postcontent,500)+' ... </p><div class="continue"><a href="'+posturl+'"><img src="http://lh6.ggpht.com/_BTztXRwC9ik/TMmFxw2l13I/AAAAAAAAElU/kcI2jszpSF4/xemtiep1.gif" alt="Xem tiếp"/></a></div><div class="clear"></div></div>';

document.write(td1);
}
}

//page value

String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
var str = location.href;
var page = str.GetValue("page");
if (page==undefined) { page = "1"; }

// get total number of posts
function numberOfPosts(json) {
document.write('<script style=\"text/javascript\">var totalPosts= '+json.feed.openSearch$totalResults.$t+' ;<\/script>');
}
document.write('<script src=\"http://www.traidatmui.com/feeds/posts/default/-/Advanced blogger?alt=json-in-script&callback=numberOfPosts\"><\/script>');

//]]>
</script>
<script type="text/javascript">
var rcpage = new Array();
var numposts = 5; // số bài viết hiển thị trong tiện ích này
var numpage=totalPosts/numposts;
var lastnum = totalPosts%numposts;
if (lastnum==0) {numpage=numpage+1;}

for (var m=1;m<numpage;m++) {
var start=numposts*(m-1)+1;
rcpage[m] ="<script src=\"http://www.traidatmui.com/feeds/posts/default/-/Advanced blogger?start-index="+start+"&max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>";
}
if ((page>numpage)&&(page<numpage+1)) {
var numposts=lastnum;
start = totalPosts-lastnum+1;
document.write("<script src=\"http://www.traidatmui.com/feeds/posts/default/-/Advanced blogger?start-index="+start+"&max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
}
else if (page>numpage){document.write("<div style=\"width:450px;color:#f00;font-weight:bold;padding:10px; border:1px #ccc solid;\">This page does not exist. Please check link again<\/div>"); }
else {document.write(rcpage[page]); }
</script>
<script type="text/javascript">
if (lastnum==0) {var pagelist=totalPosts/numposts;} else {var pagelist=numpage+1;}
var pagelist1 = parseInt(pagelist);

var npage = parseFloat(page);

if (page<=parseInt(pagelist)) {

if ((pagelist>2)&&(pagelist1<6)) {

document.write("<div id=\"page-rc-tooltip\">Page ("+page+"/"+parseInt(pagelist)+") : ");
for (var n=1;n<pagelist1+1;n++) {
if (n==npage) {var navpage=" <span class=\"currentpage\" >"+n+"<\/span>";} else {var navpage=" <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+n+"\">"+n+"<\/a>";}
document.write(navpage);
}
document.write(" | "+totalPosts+" posts<\/div>");
}

if ((pagelist>=6)&&(page<4)) {
document.write("<div id=\"page-rc-tooltip\">Page ("+page+"/"+parseInt(pagelist)+") : ");
for (var n=1;n<6;n++) {
if (n==npage) {var navpage=" <span class=\"currentpage\" >"+n+"<\/span>";} else {var navpage=" <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+n+"\">"+n+"<\/a>";}
document.write(navpage);
}
if (parseInt(pagelist)>5) { document.write("... <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+parseInt(pagelist)+"\">Last<\/a> | "+totalPosts+" posts<\/div>"); } else {document.write(" | "+totalPosts+" posts<\/div>");}
}

else if ((pagelist>=6)&&(page>3)&&(page<parseInt(pagelist)-2)) {
var first = page-2;
var last = first+5;
document.write("<div id=\"page-rc-tooltip\">Page ("+page+"/"+parseInt(pagelist)+") : <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page=1\">First<\/a> ...");
for (var n=first;n<last;n++) {
if (n==npage) {var navpage=" <span class=\"currentpage\" >"+n+"<\/span>";} else {var navpage=" <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+n+"\">"+n+"<\/a>";}
document.write(navpage);
}
document.write("... <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+parseInt(pagelist)+"\">Last<\/a> | "+totalPosts+" posts<\/div>");
}

else if ((pagelist>=6)&&(page>3)&&(page>parseInt(pagelist)-3)) {
var first = parseInt(pagelist)-4;
var last = parseInt(pagelist)+1;
document.write("<div id=\"page-rc-tooltip\">Page ("+page+"/"+parseInt(pagelist)+") : <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page=1\">First<\/a> ...");
for (var n=first;n<last;n++) {
if (n==npage) {var navpage=" <span class=\"currentpage\" >"+n+"<\/span>";} else {var navpage=" <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+n+"\">"+n+"<\/a>";}
document.write(navpage);
}
document.write(" | "+totalPosts+" posts<\/div>");
}
}
</script>

Chỉnh sửa code:
- Bạn hãy thay địa chỉ http://www.traidatmui.com trong code trên (màu xanh đậm) thành địa chỉ site của bạn.
- Dòng màu đỏ đậm trong code chính là nhãn bài viết Advanced blogger, bạn thay thành tên nhãn bài viết mà bạn muốn hiển thị.
- Các dòng màu cam là nơi bạn đặt tiện ích này http://www.traidatmui.com/2010/02/blogger-nang-cao.html, bạn hãy thay thành địa chỉ nơi mà bạn đặt tiện ích này trên trang của bạn. Bạn nhớ thay toàn bộ dòng màu cam ở trên nếu không phần phân trang của bạn sẽ bị lỗi, không sử dụng được.

6. Cuối cùng là save tiện ích lại

Ở trên là phần mình đã hướng dẫn các bạn hiển thị bài viết theo tùng nhãn cho tiện ích, tuy nhiên nếu bạn muốn hiển thị cho toàn bộ bài viết trên trang của bạn thì bạn thực hiện thêm bước sau

A. Tìm đến tên nhãn trong code ở bước 5 Advanced blogger và bạn tiến hành xóa tên nhãn đi, lưu ý bạn phải xóa tên nhãn cùng với dấu "/-/" trước nó đi, nếu không nó sẽ không hiển thị được. Ví dụ ban đầu ta có
http://www.traidatmui.com/feeds/posts/default/-/Advanced blogger

Sau khi xóa sẽ còn lại như bên dưới
http://www.traidatmui.com/feeds/posts/default

Bạn cần thực hiện việc xóa này ở 3 vị trí có chứa tên nhãn (xóa tương tự như trên. Bạn cần phải cẩn thận xóa cho đúng, nếu không code sẽ bị lỗi.

B. Sau khi xóa xong bạn save lại là xong

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

Tham khảo mothuthuat.com

Xem khác cùng chủ đề

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

10/29/2010 07:23:00 SA Trả lời

5 stars for good entry :)
10 stars for pro blog :X
100 stars for author :-*

11/11/2010 02:43:00 SA Trả lời

Thế cái này có cần làm ẩn nó không hả bạn

Admin
11/11/2010 03:09:00 SA Trả lời

Mình không rỏ bạn muốn hỏi gì?Bạn có thể nói rỏ hơn được không? Bạn hỏi cái này là cái nào thế?

12/01/2010 05:48:00 CH Trả lời

Cho PRDanang hoi, sao lai co khoang trong phia tren noi dung widget va phia duoi tieu de widget nhi.

Admin
12/02/2010 05:00:00 CH Trả lời

Đó là do phần css, bạn cần chỉnh sửa hãy dựa vào phần padding và margin để điều chỉnh lại khoảng trống đó.

12/02/2010 06:30:00 CH Trả lời

Ví dụ như trang này http://www.prdanang.com/p/dictionary.html, co khoảng trống giữa tiêu đề Dictionary và nội dung, thì sữa padding và margin chổ nào vậy?
Thanks Traidatmui trước nha

Admin
12/02/2010 07:13:00 CH Trả lời

Tùy mỗi template mỗi khác,bạn có thể tìm và chỉnh sửa phần widget-content, nếu trong template bạn không có hãy tìm code có liên quan đến widget.

1/30/2011 07:12:00 CH Trả lời
Nhận xét này đã bị tác giả xóa.
1/30/2011 10:55:00 CH Trả lời

muốn cho cái phân trang xuống dưới thì làm thế nào ạ

1/31/2011 02:37:00 SA Trả lời
Nhận xét này đã bị tác giả xóa.
2/08/2011 11:33:00 CH Trả lời

thủ thuật này dùng hiển thị trên trang chủ blog thì quá hay ( ẩn bài viết ở trang chủ)nhưng mình muốn nó hiển thị ở một nhãn nào đó thì làm sau đây ạ

Admin
2/09/2011 01:05:00 SA Trả lời

Bạn thực hiện như trên sau đó cho Widget đó hiển thị ở một nhãn theo thủ thuật "Hiển widget ở trang nhất định" tại đây

2/09/2011 05:22:00 SA Trả lời

vấn đê là ở chổ này. khi cho Widget đó hiển thị lên mọt nhãn thì không có vấn đề gì nhưng những bài viết mặt định ở nhãn đó nó vẫn hiển thị :(( chung với các bài của thủ thuật. anh hướng dẫn làm cách nào cho nó ẩn đi giống như ( ẩn bài ở trang chủ )chỉ cho bài viết của thủ thuật hiển thị thôi

Admin
2/09/2011 07:02:00 CH Trả lời

Bạn hãy vào đây và xem phần "Mở rộng thêm thủ thuật" để ẩn bài viết nhe.

2/10/2011 12:49:00 SA Trả lời

quá tuyệt em làm được rồi cám ơn http://www.traidatmui.com rất nhiều.anh giúp em luôn cái này nữa nha :)). về khoản trắng ở trên đầu bài viết đầu tiên của một nhãn "kể cả xem toàn bài viết" lớn quá trời anh xem hình sẽ rõ hơn (http://i263.photobucket.com/albums/ii124/haimiennam/0103.gif) làm cách nào thu nhỏ khoản cách đó xuống mức thấp nhất ạ!

Admin
2/10/2011 02:31:00 SA Trả lời

Hình ảnh e chụp không hết các phần nên a chưa rỏ điều em hỏi.

2/10/2011 03:06:00 SA Trả lời

:(( anh xem lại hình này nha http://i263.photobucket.com/albums/ii124/haimiennam/0105-1.gif chắc rõ hơn. híc anh vào đây xem thì rõ hơn không nhỉ :)) http://baongoconline.blogspot.com/search/label/ThuThuat

Admin
2/10/2011 04:35:00 SA Trả lời

Em có thể tìm và chỉnh sửa lệnh margin trong các thuộc tính .post hoặc #main-wrapper. Em có thể để dấu âm ( - ), ví dụ: margin:-15px 0px 0px 0px; để giảm khoảng cách đó. Nếu không rỏ về lệnh margin em có thể tìm hiểu tại đây

2/10/2011 05:27:00 SA Trả lời

híc em hiểu rồi sử dụng cả biến Âm(-)hèn gì em giảm nó xuống 0 rồi mà vẫn thế . thank anh nhiều

Nặc danh
2/11/2011 04:45:00 SA Trả lời

Cái phân trang có thể cho xuống dưới được không ạ

Admin
2/11/2011 05:49:00 SA Trả lời

Với thủ thuật này khi bạn sử dụng trình duyệt IE thì phần phân trang sẽ hiển thị phía trên nhưng đối với Firefox thì nó sẽ hiển thị được bên dưới. Vấn đề này mình vẫn chưa có cách khắc phục đươc. Mình sẽ nghiên cứu phần này nếu có thời gian.

2/11/2011 06:30:00 SA Trả lời

cái này có thể không áp dụng phân trang của thủ thuật sau đó dùng thủ thuật phân trang khác vào cho blog " như ở đây http://hontap.blogspot.com/2010/04/page-navigation-voi-phong-cach-wp.html " có được không nhỉ

Admin
2/11/2011 07:26:00 SA Trả lời

Không được em ah. tại vì thủ thuật này nó lồng phần phân trang vào thẳng chứ không thể áp dụng thủ thuật đó được.

Admin
3/12/2011 10:38:00 CH Trả lời

Khắc phục lỗi phần phân trang - Thời gian qua có một số bạn còn hơi rối với thủ thuật này. Vì khi sử dụng trình duyệt IE hay trình duyệt khác ngoài Firefox thì phần phân trang sẽ nhảy lên phía trên của bạn viết.

Thời gian qua mình có test lại và đã khắc phục lỗi này, code ở trên đã được cập nhật lại. Bạn có thể yên tâm với các trình duyệt khác ngoài Firefox.

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