Tạo Trang Tĩnh Tổng Hợp Các Thành Viên Viết Bài Cho Blogspot

Blog của bạn là một blog lớn có rất nhiều tác giả viết bài. Đôi khi bạn muốn xem ai viết nhiều hay ít thì phải làm sao. Chả lẽ và phần quản lý đếm từng bài. Không, làm vậy rất mất thời gian, thay vào đó mình sẽ hướng dẫn các bạn tạo một trang tĩnh, trong đó chứa các thành viên tác giả viết bài rất tiện lợi.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao
• Lời Kết

Mục Đích

• Giúp việc quản lý các tác giả viết bài hơn
• Dễ dàng thống kê bài viết từng người
• Tạo danh sách tác giả để cho mị người dễ liên hệ hơn
• .....

Thực Hiện

1. Đăng Nhập vào Blogger >> Trang >> Trang Mới
2. Sau đó chép toàn bộ code bên dưới vào trong trang mới tạo, rồi đặt tiêu đề cho nó

Chú ý: nhớ vào chế độ html nha

HTML<div class='container'>
<div class='centered'>
<script type='text/javascript'>
//<![CDATA[
var maxUserNameLength=15;
var txtAuthorLine="[image] <h5> [user] </h5>has published <b> [count] </b> [post]";
var sizeAvatar=150;
var cropAvatar=true;
var urlNoAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJKw2icleNXxYAzALO8CrSq0lGnAg8Q5hgl3x7aNBV7olzGpGaEjOgGeyx3fyh2YH38x9vS7f-3H1vZK3qLxzu5J9v4h6cnycQ5hacOq71ZzFeLOOJkgMbXzIAVr2AO8FrL0KXcmn2Tpw/"+sizeAvatar+"/avatar_blue_m_96.png";
function replaceAuthorVars(l,k,p){if(!k||!k.author){return l
}var r=k.author;
var o="";if(r.uri&&r.uri.$t!=""){o=r.uri.$t
}var n=urlNoAvatar;
if(r.gd$image&&r.gd$image.src){n=r.gd$image.src
}if(n=="http://img2.blogblog.com/img/b16-rounded.gif"&&urlNoAvatar!=""){n=urlNoAvatar
}var t="s"+sizeAvatar;
n=n.replace(/\/s\d\d+-c\//,"/"+t+"-c/");
if(cropAvatar){t+="-c"
}n=n.replace(/\/s\d\d+(-c){0,1}\//,"/"+t+"/");
var m=r.name.$t;
var q='<img class="author-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+m+'" src="'+n+'" />';
if(o!=""){q=""+q+""
}if(maxUserNameLength>3&&m.length>maxUserNameLength){m=m.substr(0,maxUserNameLength-3)+"..."
}var s=m;if(o!=""){s=""+s+""
}l=l.replace("[user]",s);
l=l.replace("[image]",q);
l=l.replace("[#]",p);
l=l.replace("[count]",k.count);
if(k.count!=1){l=l.replace("[post]","posts")
}else{l=l.replace("[post]","post")
}return l}var blauthors={};
var blndxbase=1;
function showAuthors(i){for(var p=0;
p<i.feed.entry.length;
p++){var m=i.feed.entry[p];
var o="";if(m.author[0].uri&&m.author[0].uri.$t!=""){o=m.author[0].uri.$t
}var n=m.author[0].name.$t;
if(blauthors[n]){blauthors[n].count++
}else{var q=new Object();
q.author=m.author[0];
q.count=1;blauthors[n]=q
}}if(i.feed.entry.length==500){blndxbase+=500;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+"/feeds/posts/default?redirect=false&max-results=500&start-index="+blndxbase+'&alt=json-in-script&callback=showAuthors"><\/script>');
return}var r=[];
for(var l in blauthors){r.push([l,blauthors[l]])
}r.sort(function(a,b){if(b[1].count-a[1].count){return b[1].count-a[1].count
}return(a[1].author.name.$t.toLowerCase()<b[1].author.name.$t.toLowerCase())?-1:1
});document.write('<div class="blog-author">');
for(var p=0;
p<r.length;
p++){var k=r[p][1];
document.write('<div class="author-line">');
document.write(replaceAuthorVars(txtAuthorLine,k,p+1));
document.write("</div>")
}document.write("</div>")
}document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/default?redirect=false&max-results=500&alt=json-in-script&callback=showAuthors"><\/script>');
//]]>
</script>
</div>
</div>
<style scoped="" type="text/css">
.container{width:96%}
.centered{text-align:center;font-size:90%;margin:0 auto;padding:10px 0 40px 0;width:100%;position:relative}
.author-line {padding:20px;width:150px;height:auto;margin:20px;text-align:center;display:inline-block;background:#f9f9f9;color:#444;opacity:0.9;transition:all 0.6s;}
.author-line:hover {box-shadow:0 0 10px rgba(0,0,0,0.2);background:#fff;opacity:1;}
.author-avatar {vertical-align:middle;margin-bottom:10px;border-radius:3px;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.1);}
.author-line h5{color:#fff;margin:20px auto;padding:6px 12px;background:#7798db;border-radius:3px;transition:all 0.5s;}
.author-line h5:hover{background:#6381c0;}
#sidebar-wrapper {display:none;}
#post-wrapper {width:100%;}
.post-inner {padding:0;}
h3.post-title a, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-weight:700;font-size:2rem;color:#999;}
.post-body p,.post-body code {font-size:1.3rem;font-weight:700;}
</style>

3. Xuất bản và xem kết quả

Demo
click to view

Nâng Cao

Thay đổi màu cái tiêu đề chứa tên tác giả

- Tìm dòng .author-line h5 và nhìn sang bên phải theo dòng đó sẽ thấy dòng background:#7798db. Lúc này thay đổi cái #7798db thành mã màu của bạn

Vào đây lấy mã màu 

Thay đổi màu cái tiêu đề chứa tên tác giả khi rê chuột vào

- Tìm dòng .author-line h5:hover và nhìn sang bên phải sẽ thấy ngay dòng có mã màu là #6381c0, sau đó thay đổi thành mã màu của bạn. 

Lời Kết

Vậy là mình đã hướng dẫn các bạn , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.