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

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ị.

DEMO

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.

Tweet

Related Posts

• Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứngThủ thuật sau đây sẽ giúp các bạn chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng.Trước khi đi vào th
• Tạo nút Back to Top với hiệu ứng từ jQueryHôm nay xin giới thiệu với các bạn tiện ích Back to Top Button khá đẹp, sử dụng hiệu ứng trượt từ jQuery, và đặc biệt l
• Tạo chữ to đầu dòng cho bài viết giống tạp chíCó nhiều cách để làm cho bài viết của bạn trông đẹp mắt hơn, ví dụ như tạo bố cục rõ ràng, phối màu trong bài viết, chè
• Hiệu ứng chữ 3DChia sẻ với các bạn thủ thuật chữ 3D. Chắc rằng sau khi thực hiện sẽ blog của các bạn sẽ trở nên đẹp và lạ mắt hơn đấy.
• Thêm comments facebook song song với comments bloggerTheo yêu cầu của bạn DINH VAN Tu mình sẽ hướng dẫn bạn cách thêm "comment facebook song song với comments blogger vào b
• Tạo lưu trữ dạng lịch cho blogger với nhiều style đẹpVới thủ thuật này Widget lưu trữ blog (Archive blog) mặc định của blogspot sẽ được biến đổi thành một lịch tuyệt đẹp Th

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

4/ 5

Oleh Đỗ Trực

Đỗ Trực Pada 02:50 68 Komentar