Bài viết trên trang chủ hiển thị theo nhãn - Dạng 2

(iCOM) Blog Chính Trực hướng dẫ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. Bài viết này 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>

.boxhome{width:680px}
.box1,.box2{padding:15px;background:white;box-shadow:0 1px 3px 0 #B5B5B5;-moz-box-shadow:0 1px 3px 0 #b5b5b5;-webkit-box-shadow:0 1px 3px 0 #B5B5B5;border:1px solid #DDD;border-bottom:4px solid #0F83A0;overflow:hidden;position:relative;border-radius: 10px}
.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:5px;}
.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:#0F83A0;}
.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 #0F83A0; 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:#0F83A0; color:#fff}
.menu li:first-child a:hover::after { border-left-color: #0F83A0;}
.menu a:hover{background: #0F83A0;}
.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: #0F83A0;}

- 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 src='https://googledrive.com/host/0B4Ymog6fM1ZzcUQ4NjBtQjZ2VXM' type='text/javascript'/>
<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>
</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/-/Label1?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/-/Label2?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/-/Label3?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>
</div>
</b:if>

Trong đó:
 

Thay Label1 Label2, Label3 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 nha.

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.

4.Để ẩn bài viết ở trang chủ đi bạn thêm đoạn code sau vào trước thẻ </head>

<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {
display:none;
visibility:hidden;
}
</b:if>
</style>

Chúc các bạn thành công với thủ thuật này.

 

Nguồn: chinhtrucblog