Trình bày bài viết theo chuyên mục thật chuyên nghiệp với plugin boxhome.

Trình bày bài viết theo chuyên mục thật chuyên nghiệp với plugin boxhome.

Bạn thích thú với cách trình bày bài viết của những website tin tức lớn như zing news, vnexpress, kenh14... nhưng không biết làm thế nào với trang blogger của mình. Cũng chính vì lý do đó tối qua mình thức tới hơn 3h sáng ngồi viết ra plugin này nhằm giúp cho cộng đồng blogger nhà ta có thêm sự lựa chọn trong cách trình bày bài viết theo chuyên mục sao cho chuyên nghiệp hơn.

1. Sơ lược về plugin này:

Plugin: Boxhome version 1.4
Tác Giả: Võ Quốc An
Ngày hoàn thành: 01/03/2014
Số mẫu trình bày: 6

2. Ưu nhược điểm:
Ưu điểm: 

- Có thể sử dụng cùng lúc nhiều mẫu mà không bị xung đột code.
- Các bài viết gọi ra đã được tối ưu hóa về SEO
- Tốc độ load ở mức chấp nhận được.
- Tương thích với mọi kích thước chiều ngang (hoạt động tốt nhất với kích thước chiều ngang khoãng 600px đến 700px) (trừ mẫu 5 chỉ hoạt động tốt với kích thước chiều ngang 500px)

Nhược điểm:

- Với các bài viết có ảnh thumbnail là ảnh đứng thì sẽ hiển thị không được đẹp lắm. Vì trong plugin này mình lấy toàn ảnh ngang.
- Còn nữa thì mình chưa thấy. Các bạn sử dụng rồi góp ý để mình hoàn thiện plugin này nhiều hơn.

Chèn plugin vào template: vào mục "Mẫu" → "Chỉnh sửa HTML":
3. Code plugin: chèn đoạn code này phía trên thẻ </head>

<script src=' https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='https://googledrive.com/host/0B-PN1SIugzO-a1ZJcVBaZG5YR1k' type='text/javascript'/>
<link href="https://googledrive.com/host/0B-PN1SIugzO-LXlISHZwMVVGQlU" rel="stylesheet" type="text/css" media="screen" />
<style type='text/css'>
#Blog1{display:none}
</style>
</b:if>

Lưu ý: nếu trong template đã có file jquery thì bỏ đoạn code màu đỏ đi để tránh xung đột code.
4. Chèn code vào template:
Vào template dùng từ khóa "Blog1" tìm đoạn code sau:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>...</b:widget>
</b:section>

Chèn các mẫu bạn muốn hiển thị ở phía trên đoạn code vừa tìm được.
5. Các mẫu trình bày bài viết:
Ở version 1.4 này mình dựng sẵn 6 mẫu (như ở trang demo) và sẽ còn phát triển tiếp.

Mẫu 1:

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box01'>
<ul class='boxmenu'>
    <li><a href='http://thuthuat.voquocan.com/p/blogger.html'>Blogger</a></li>
    <li><a href='http://thuthuat.voquocan.com/p/code.html'>Tự Học Thiết Kế Web</a></li>
    <li><a href='http://thuthuat.voquocan.com/p/template.html'>Blogger Template</a></li>
</ul>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox01'/>
</div>
</b:if>

 Mẫu 2:

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box02'>
<ul class='boxmenu'>
    <li><a href='http://thuthuat.voquocan.com/p/blogger.html'>Blogger</a></li>
    <li><a href='http://thuthuat.voquocan.com/p/code.html'>Tự Học Thiết Kế Web</a></li>
    <li><a href='http://thuthuat.voquocan.com/p/template.html'>Blogger Template</a></li>
</ul>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox02'/>
</div>
</b:if>

Mẫu 3:

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box03'>
<ul class='boxmenu'>
    <li><a href='http://thuthuat.voquocan.com/p/blogger.html'>Blogger</a></li>
    <li><a href='http://thuthuat.voquocan.com/p/code.html'>Tự Học Thiết Kế Web</a></li>
    <li><a href='http://thuthuat.voquocan.com/p/template.html'>Blogger Template</a></li>
</ul>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox03'/>
</div>
</b:if>

Mẫu 4:

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box04'>
<ul class='boxmenu'>
    <li><a href='http://thuthuat.voquocan.com/p/blogger.html'>Blogger</a></li>
    <li><a href='http://thuthuat.voquocan.com/p/code.html'>Tự Học Thiết Kế Web</a></li>
    <li><a href='http://thuthuat.voquocan.com/p/template.html'>Blogger Template</a></li>
</ul>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox04'/>
</div>
</b:if>

Mẫu 5:

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box05'>
<ul class='boxmenu'>
    <li><a href='http://thuthuat.voquocan.com/p/blogger.html'>Blogger</a></li>
    <li><a href='http://thuthuat.voquocan.com/p/code.html'>Tự Học Thiết Kế Web</a></li>
    <li><a href='http://thuthuat.voquocan.com/p/template.html'>Blogger Template</a></li>
</ul>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox05'/>
</div>
</b:if>

Mẫu 6:

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box06'>
<div class='box06a'>
  <h2><a href='http://thuthuat.voquocan.com'>Thủ Thuật Blogger</a></h2>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox06a'/>
</div>
<div class='box06b'>
  <h2><a href='http://kts.voquocan.com'>Blog Kiến Trúc</a></h2>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox06b'/>
</div>
<div style='clear:both'/>
</div>
</b:if>

Lưu ý:  
6 mẫu code ở trên là lấy ra tất cả bài viết trên blog. Nếu chỉ muốn lấy bài viết của 1 label thì thay

/feeds/posts/default?

thành

/feeds/posts/default/-/Tên Label?

Những chổ đánh dấu màu đỏ bạn sửa lại cho phù hợp với trang web của mình.
Mẫu 5 có kích thước chiều ngang cố định là 500px. Nên nếu sử dụng thì lựa chọn vị trí cho phù hợp.
Mẫu 6 là mẫu kép nên nếu dùng thì nên dùng cho 2 label.
Cơ bản plugin này chỉ bao nhiêu đó thôi. Nếu có vấn đề gì thì để lại comment bên dưới bài viết này mình sẽ sớm hồi âm.

Nguồn:http://thuthuat.voquocan.com/2014/03/plugin-trinh-bay-bai-viet-theo-chuyen-muc-chuyen-nghiep.html