Trong phần trước mình đã giới thiệu mọi người cách tạo forum cho blogger. Trong phần này mình sẽ hướng dẫn mọi người cách phân loại bài viết theo chủ đề một cách nhanh chóng.
Thực ra việc phân loại bài viết theo chủ đề đã được đề cập từ trước. Tuy vậy trong phần này mình sẽ giới thiệu một style mà bạn có thể qua tâm.
Bạn có thể xem ở hình dưới:
Nhìn trong hình mọi người có thể thấy các cấu thành nên phân loại bài viết này gồm có :
+ Xem tất cả chủ để (ẩn hoặc mở khi ấn vào đó - close or expand div)
+ Style phân loại (ảnh bên trên, tiêu đề bên dưới, thêm vào đó là nút like, +1)
Tạm thời mình sẽ bỏ qua phần Expand bằng Javascript và giới thiệu trong bài sau. Phần này mình chỉ tập trung cách làm style có ảnh, tiêu đề, like và +1 như hình.
Bắt đầu nào. Như thường lệ sẽ là CSS. Add CSS trước ]]></b:skin>
Bắt đầu với CSS
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
Thực ra việc phân loại bài viết theo chủ đề đã được đề cập từ trước. Tuy vậy trong phần này mình sẽ giới thiệu một style mà bạn có thể qua tâm.
Bạn có thể xem ở hình dưới:
Nhìn trong hình mọi người có thể thấy các cấu thành nên phân loại bài viết này gồm có :
+ Xem tất cả chủ để (ẩn hoặc mở khi ấn vào đó - close or expand div)
+ Style phân loại (ảnh bên trên, tiêu đề bên dưới, thêm vào đó là nút like, +1)
Tạm thời mình sẽ bỏ qua phần Expand bằng Javascript và giới thiệu trong bài sau. Phần này mình chỉ tập trung cách làm style có ảnh, tiêu đề, like và +1 như hình.
Bắt đầu nào. Như thường lệ sẽ là CSS. Add CSS trước ]]></b:skin>
Bắt đầu với CSS
.label_thumb
{
border:1px solid #f2f2f2;
}
.label_thumb:hover
{
background-color: #ffffff;
opacity:0.9;
}
.label_with_thumbs li
{
display:inline;
float:left;
padding-right:5px;
color:white;
}
.the-a
{
width:170px;
height:33px;
overflow:hidden;
}
.the-a a
{
font-weight:bold !important;
}
.label_with_thumbs a
{
font-size:13px;
font-weight:bold;
font:inherit
}
Tiếp theo là code Javascript, Add trước </head>
<b:if cond='data:blog.pageType == "item"'><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 phanloaibaiviet(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul class="label_with_thumbs">');
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;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
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;
//cmtext = (text != 'no') ? '<i><font color="'+cmcolor+'">('+pcm+' '+text+')</font></i>' : '';
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];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
//var daystr = (showPostDate) ? '<i><font color="'+cmcolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
if (i==0) {
var showposterhay = '<a href="'+posturl+'"><img src="'+img[i]+'" alt="" class="label_thumb"></a><br/><div class="the-a"><a class="a" href="' + posturl + '" target ="_top">' + posttitle + '</a></div><br/><div class="fb-like" data-href="' + posturl + '" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div><br/><br/><div class="g-plusone" data-href="' + posturl + '" data-size="small"></div>'+removeHtmlTag(postcontent,summaryPost)+'...';
document.write('<li class="clearfix">');
document.write(showposterhay);
document.write('</li>');
}
if (i==1) {
var showposterhay = '<a href="'+posturl+'"><img src="'+img[i]+'" alt="" class="label_thumb"></a><br/><div class="the-a"><a class="a" href="' + posturl + '" target ="_top">' + posttitle + '</a></div><br/><div class="fb-like" data-href="' + posturl + '" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div><br/><br/><div class="g-plusone" data-href="' + posturl + '" data-size="small"></div>'+removeHtmlTag(postcontent,summaryPost)+'...';
document.write('<li class="clearfix">');
document.write(showposterhay);
document.write('</li>');
}
if (i==2) {
var showposterhay = '<a href="'+posturl+'"><img src="'+img[i]+'" alt="" class="label_thumb"></a><br/><div class="the-a"><a class="a" href="' + posturl + '" target ="_top">' + posttitle + '</a></div><br/><div class="fb-like" data-href="' + posturl + '" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div><br/><br/><div class="g-plusone" data-href="' + posturl + '" data-size="small"></div>'+removeHtmlTag(postcontent,summaryPost)+'...';
document.write('<li class="clearfix">');
document.write(showposterhay);
document.write('</li>');
}
if (i==3) {
var showposterhay = '<a href="'+posturl+'"><img src="'+img[i]+'" alt="" class="label_thumb"></a><br/><div class="the-a"><a class="a" href="' + posturl + '" target ="_top">' + posttitle + '</a></div><br/><div class="fb-like" data-href="' + posturl + '" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div><br/><br/><div class="g-plusone" data-href="' + posturl + '" data-size="small"></div>'+removeHtmlTag(postcontent,summaryPost)+'...';
document.write('<li class="clearfix">');
document.write(showposterhay);
document.write('</li>');
}
j++;
}
document.write('</ul>');
}
//]]>
</script></b:if>
Nếu bạn muốn thể hiện nhiều tóm tắt hơn, bạn có thể thêm if(i=...). Nếu bạn thấy đoạn code màu đỏ này <b:if cond='data:blog.pageType == "item"'> ......</b:if> thì không cần thiết có cũng được.
Mọi người chú ý thêm vào phần code mầu xanh dùng để thêm +1 và like. Nếu bạn đã có Javascript cho G+ và facebook (nrói cách khác là đã có +1 button và facebook like trên blogger_ thì không cần chú ý đoạn này. Nếu chưa có bạn phải thêm đoạn code dưới này). Thêm trước script đó luôn nhưng nhớ là luôn bên trong <b:if cond='data:blog.pageType == "item"'> ......</b:if>.
Script G+
<script type='text/javascript'>
window.___gcfg = { lang: 'en-GB' };
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Script facebook like.
<!-- FB like -->
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
Muốn thêm share nữa thì mọi người tham khảo bài viết sau.
- Cuối cùng là html. Thêm đoạn code dưới, tại vị trí mà bạn muốn hiển thị bài viết như hình vẽ :
HTML
<div class='post-label'>
<script type='text/javascript'>
document.write(rdlabels[index]);
</script>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://lh5.googleusercontent.com/-S8QPYFzGhqc/UK9zh36GyDI/AAAAAAAAAlM/jMMTZCUWXpQ/s150/noimage.gif";
showRandomImg = true;
aBold = false;
summaryPost = 0; //số ký tự của bài viết hiển thị (bài tóm tắt)
sumPost = 0;
numposts = 4; //số bài được hiển thị
label = "AB.Máy tính điện thoại";
</script>
<script src='/feeds/posts/default/-/AB.Máy tính điện thoại?orderby=published&alt=json-in-script&callback=phanloaibaiviet' type='text/javascript'/>
</div>
Bỏ qua summaryPost(tóm tắt). Bạn chỉ cần chú ý đến phần chữ màu đỏ. Thay chủ đề của bạn tương ứng. Nếu khi bạn sửa bài viết thì bài viết đó xuất hiện trên đầu trang thì bạn có thể thay published bằngupdated.
Ok. vậy là đã xong rồi đó. Chúc mọi người thành công :D. Mọi thắc mắc mọi người có thể phản hồi tạihttp://ask.erhay.com hoặc comment trực tiếp trong bài
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn
0 nhận xét:
Đăng nhận xét