Tạo nhiều chuyên mục cho bài viết ở trang chủ Blogger - Đã fix lỗi

Mình có tham khảo qua vài bài viết nói về vấn đề này. Trong đó có 2 bài đáng chú ý của voquocan và namkna, mạn phép được và chỉnh sửa lại chút xíu. cách của bác này không tự đặt số lượng bài cho từng box được nếu như bạn muốn bài viết hiển thị nhiều hơn 7 bài. hoặc không tự đặt được độ dài tiêu đề hay độ dài nội dung bài viết. Mình sẽ fix lại những cái này để bạn có thể sử dụng linh hoạt hơn cho blog của bạn.

Xem Demo

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

.boxhome{width:700px}
.boxhome ul {margin:0; padding:0}
.box1{overflow:hidden;}
.box1-left{width:380px; float:left; height:400px; border-right:1px solid #777; padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px;  height:250px; width:380px}
.box1-right{height:49px; width:279px; float:right; padding: 10px; line-height:23px; border-bottom:1px solid #777; }
.box2-right:hover, .box1-right:hover {background:#999}
.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:10px; overflow:hidden}
.box2-left{width:380px; float:left; height:140px; padding:10px; border-right:1px solid #777; }
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px;  height:100px; width:160px;float:left}
.box2-right{height:29px; width:289px; float:right;  border-bottom:1px solid #777; padding:5px; line-height:15px;}
.box2-right img {float:left; height:29px; width:48px; margin-right:5px}
.box1-left-info, .box2-left-info{ text-align:justify;}
.box1 img, .box2 img {box-shadow: 1px 1px 2px 1px #666;}
.menu{overflow: hidden; width: 100%; border-bottom:1px solid #777; 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:#888; color:#eee}
.menu li:first-child a::after{border-left-color: #888;}
.menu li:first-child a:hover{background:#444; color:#fff}
.menu li:first-child a:hover::after { border-left-color: #444;}
.menu a:hover{background: #aaa;}
.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: #bbb; right: -1.1em; z-index: 1; }
.menu a:hover::after{ border-left-color: #aaa;}

Lưu ý:

Mặc định box này được đặt trong class boxhome có chiều rộng 700px. Bạn cần thay đổi chiều rộng này lại cho phù hợp với mẫu template trên blog của bạn.
Ở bước 1 mình đánh dấu các đoạn code màu đỏ là chiều rộng của các thành phần bạn thay đổi lại cho phù hợp với blog của bạn.
Nếu có chổ nào không hiểu bạn để lại comments bên dưới mình sẽ trả lời trong thời gian sớm nhất có thể.

2. Chèn đoạn code sau phía trên thẻ </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>     
<script type='text/javascript'>
var imgr=["https://lh3.googleusercontent.com/-IBkOgk0LW6c/TqulPrgd6RI/AAAAAAAAAmg/VHnAiJCR4jc/s800/no_img.jpg"],
summary_post_box1 = 300,
summary_title_box1 = 0,
summary_post_box2 = 280,
summary_title_box2 = 0;
</script>
<script src='http://rumfyblog.googlecode.com/files/post_homepage_fix.js' type='text/javascript'/>
<style type='text/css'>
        .main.section {display:none}
</style>
</b:if>

imgr: link ảnh thumbnail mặc đinh cho những bài viết không có ảnh.
summary_post_box1, summary_post_box2: độ dài nội dung bài viết ở Box1 và Box2. (Box1 và Box2 sẽ nói ở dưới)
summary_title_box1, summary_title_box2: Độ dài tiêu đề bài viết ở Box1 và Box2 tương ứng. Nếu bạn muốn cắt tiêu đề của bạn ngắn gọn lại cho phù hợp với giao diện blog của bạn, còn không muốn sử dụng chức năng này thì để là 0;

3. Dùng 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='mainpost' id='mainpost' 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='http://template.voquocan.com/'>Blogger Template</a></li>
    <li><a href='http://template.voquocan.com/p/magazine-template.html'>Magazine Template</a></li>
    <li><a href='http://template.voquocan.com/p/shopping-template.html'>Shopping Template</a></li>
    <li><a href='http://template.voquocan.com/p/movie-template.html'>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='http://www.voquocan.com/'>Thủ Thuật Blog</a></li>
    <li><a href='http://www.voquocan.com/search/label/Blogger?max-results=5'>Blogger</a></li>
    <li><a href='http://www.voquocan.com/search/label/css-html?max-results=5'>CSS - HTML</a></li>
    <li><a href='http://www.voquocan.com/search/label/Tổng Hợp?max-results=5'>Tổng Hợp</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></b:if>

Trong đoạn code trên mình tạo 1 box lớn là Box1 (hiển thị các bài viết mới nhất) và 2 box con là Box2 cho 2 chuyên mục). Đề tạo thêm các chuyên mục bạn tạo thêm các mục box2 là được.