$type=grid$count=5$cate=0$rm=0$sn=0$au=0$cm=0

Tạo nhiều chuyên mục cho bài viết theo nhãn

T heo yêu cầu của 1 số bạn nhờ mình hướng dẫn cách đăng bài theo từng chuyên mục với nhãn riêng biệt .Hôm nay mình sẽ hướng dẫn cho các b...

Bài viết liên quan

Theo yêu cầu của 1 số bạn nhờ mình hướng dẫn cách đăng bài theo từng chuyên mục với nhãn riêng biệt .Hôm nay mình sẽ hướng dẫn cho các bạn cách thiết kế giao diện trang chủ của bạn theo phong cách báo chí (magazine). Bài viết này được tác giả Võ Quốc An viết khá lâu rồi và có nhiều bạn làm theo nhưng vẫn chưa thực hiện được.Nên mình sẽ hướng dẫn cụ thể hơn và có tùy chỉnh lại css nên tiện ích trông bắt mắt hơn.Blog của bạn sẽ nhìn chuyên nghiệp với các mục bài viết mới nhất và bài viết hiển thị theo nhãn (label) mà bạn muốn hiển thị.






1. Chèn đoạn css sau phía trên thẻ ]]></b:skin>

/*Chinhtrucblog.blogspot.com Magazine with 2 box */
.boxhome{width:680px}.boxhome ul {margin:0; padding:0}
.box1, .box2{box-shadow:0 1px 3px 0 rgba(0, 0, 0, 1);}
.box1{border-top: 0px solid #D0D0D0; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #ECEDE8;border-left: 0px solid #D0D0D0;border-radius:2px;}
.box2, .box3{border-top: 1px solid #DBDBDB; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #DBDBDB;border-left: 0px solid #D0D0D0;border-radius:0 15px;}
.box1{margin-bottom:1px;overflow:hidden;}
.box1-left{width:300px; float:left; height:370px;border-right: #ABABAB  1px dashed;  padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px;  height:230px; width:270px}
.box1-right{height:60px; width:300px; float:right; padding: 10px; line-height:20px;border-bottom: #ABABAB 1px dashed; }
.box2-right:hover, .box1-right:hover {background:#c2361c;}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left; height:49px; width:72px; margin-right:10px}
.box2{margin-top:15px; overflow:hidden}
.box2-left{width:330px; float:left; height:170px; padding:10px; border-right:#ABABAB  1px dashed; }
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px;  height:100px; width:160px;float:left}
.box2-right{height:50px; width:285px; float:right;  border-bottom:#ABABAB  1px dashed; padding:5px; line-height:15px;}
.box2-right img {float:left; height:37px; width:48px; margin-right:5px}
.box1-left-info, .box2-left-info{ text-align:justify;}
.box1-googlesearch{width:650px;float:left}
.menu{overflow: hidden; width: 100%; border-bottom:1px solid #c2361c; background:#eee;}
.menu li{float: left; list-style: none;}
.menu a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu li:first-child a{padding-left: 15px; background:#007ABE; color:#eee}
.menu li:first-child a::after{border-left-color: #007ABE;color:#FFFFFF}
.menu li:first-child a:hover{background:#c2361c; color:#fff}
.menu li:first-child a:hover::after { border-left-color: #c2361c;}
.menu a:hover{background: #c2361c;}
.menu a::after, .menu a::before{content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu a::after{z-index: 2; border-left-color: #eee;}
.menu a::before{border-left-color: #888; right: -1.1em; z-index: 1; }
.menu a:hover::after{ border-left-color: #c2361c;}

- Các bạn thay đổi kích thước ở những ô mình bôi màu vàng. Nếu độ rộng blog của bạn khác bạn sẽ phải chỉnh lại toàn bộ code để cho phù hợp nha. 

2- Thêm đoạn mã bên dưới vào trước thẻ </head>



<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
/*<![CDATA[*/
//https://chinhtrucblog.blogspot.com/2013/10/tao-nhieu-chuyen-muc-cho-bai-viet-theo.html- Home box v1.0[
imgr=["https://lh3.googleusercontent.com/-IBkOgk0LW6c/TqulPrgd6RI/AAAAAAAAAmg/VHnAiJCR4jc/s800/no_img.jpg"];aBold=showRandomImg=!0;summaryPost=70;summaryTitle=25;numposts=7;
function box1(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box1-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><h2><a href="'+
h+'">'+l+'</a></h2><div class="box1-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box1-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",document.write(e));j++}document.write("")}
function box2(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box2-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+
h+'">'+l+'</a><div class="box2-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box2-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",
document.write(e));j++}document.write("")};
    //]]>
</script>
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;
summary_img = 160;
img_thumb_height = 85;
img_thumb_width = 124;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('l m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3 b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0 j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9" K="\'+L+\'9" /></k>\';e=M}3 f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{}))
//]]>
</script>
<style type='text/css'>
#blog1{display:none}
</style>
</b:if> 
3. Tìm với từ khóa Blog1 tìm đoạn code tương tự như sau: (những đoạn màu đỏ có thể khác nhau tùy blog)
<b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/></b:section>

Chèn đoạn code sau phía trên đoạn code vừa tìm được.


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='boxhome'>

<div class='box1'>
<script src='/feeds/posts/default?max-results=7&amp;orderby=published&amp;alt=json-in-script&amp;callback=box1'/>
<div style='clear:both;'/>
</div>
<div class='box2'>
<ul class='menu'>
<li><a href='#'>Blogger Template</a></li>
<li><a href='#'>Magazine Template</a></li>
<li><a href='#'>Shopping Template</a></li>
<li><a href='#'>Movie Tempalte</a></li>
</ul>
<script src='feeds/posts/default/-/Label 1?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>
<div class='box2'>
<ul class='menu'>
<li><a href='#'>Thủ Thuật Blog</a></li>
<li><a href='#'>Giải Trí</a></li>
<li><a href='#'>Ebook</a></li>
<li><a href='#'>Nhạc Trẻ</a></li>
</ul>
<script src='/feeds/posts/default/-/Label 2?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>
<div class='box2'>
<ul class='menu'>
<li><a href='#'>Game</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Ghost Win 7</a></li>
</ul>
<script src='/feeds/posts/default/-/Label 3?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>
</div>
</b:if>
  • Thay Label 1, Label 2,Label 3 thành tên nhãn mà bạn muốn hiển thị.
  • Lưu ý là tên nhãn phải chính xác cả dấu cách và các chữ in hoa hoặc in thường nếu sử dụng trong tên nhãn. 
  • max-results=5 là số bài hiển thị ở cột bên trái của phần nhãn. 
  • max-results=7 là số bài hiển thị ở cột bên phải mục bài viết mới nhất. 
  • Trong đoạn code trên mình tạo 1 box lớn (hiển thị các bài viết mới nhất) và 2 box con (2 chuyên mục). 
  • Để tạo thêm chuyên mục bạn tạo thêm các mục box2 là được. 
Update : #1 Đã sửa lỗi không hiện thị bài viết.
Xem thêm bản cập nhật :  Tạo chuyên mục cho bài viết theo nhãn v2
Chúc các bạn thành công với thủ thuật này.

COMMENTS

BLOGGER: 100
Loading...
Tên

Android,3,Ảnh động,2,Comment Blogger,6,động vật,11,Game Flash,8,Game hay,4,Ghost Win 10,2,Ghost Win 7,4,Giáng sinh,3,Hình nền,43,Hoa,10,Học tiếng anh,14,Kết nối,2,Máy tính,1,Mp3 & Video Suy Niệm,1,Năm mới,2,Nhạc thánh ca,12,ô tô,1,Phần mềm,8,Phim Công Giáo,37,Phong cảnh,2,Popular posts,1,Radio Catholics,1,Relax,1,Sách suy niệm,1,Sách thiêng liêng - giáo lý,1,Sách Tu Đức,1,Sống đạo,13,Sống đẹp,1,Template Blogspot,1,Thủ Thuật Blogger,35,Thủ thuật Office,6,Widget,2,Windows,10,
ltr
item
Trực Blog: Tạo nhiều chuyên mục cho bài viết theo nhãn
Tạo nhiều chuyên mục cho bài viết theo nhãn
https://2.bp.blogspot.com/-DHMETYPpxs0/WSw3bsNDHNI/AAAAAAAAEBM/JpBJrqLm-V4ZZgKfSZWj_BPEl10yXVUdQCLcB/s1600/T%25E1%25BA%25A1o%2BNhi%25E1%25BB%2581u%2BChuy%25C3%25AAn%2BM%25E1%25BB%25A5c%2BCho%2BB%25C3%25A0i%2BVi%25E1%25BA%25BFt%2BTheo%2BNh%25C3%25A3n.jpg
https://2.bp.blogspot.com/-DHMETYPpxs0/WSw3bsNDHNI/AAAAAAAAEBM/JpBJrqLm-V4ZZgKfSZWj_BPEl10yXVUdQCLcB/s72-c/T%25E1%25BA%25A1o%2BNhi%25E1%25BB%2581u%2BChuy%25C3%25AAn%2BM%25E1%25BB%25A5c%2BCho%2BB%25C3%25A0i%2BVi%25E1%25BA%25BFt%2BTheo%2BNh%25C3%25A3n.jpg
Trực Blog
http://chinhtrucblog.blogspot.com/2013/10/tao-nhieu-chuyen-muc-cho-bai-viet-theo.html
http://chinhtrucblog.blogspot.com/
http://chinhtrucblog.blogspot.com/
http://chinhtrucblog.blogspot.com/2013/10/tao-nhieu-chuyen-muc-cho-bai-viet-theo.html
true
2131708145211028542
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy