Tạo trang homepage riêng cho trang nhãn nhất định

Để tạo ra những thủ thuật vừa mới vừa độc thì mình luôn luôn khuyến khích các bạn đóng góp ý tưởng, bởi một lẽ hiển nhiên là “một cây làm chẳng nên non – ba cây chụm lại nên hòn núi cao” và trí óc mình dù có sáng tạo mãi thì nó cũng cạn đấy bạn ạ. Thế nên sự đóng góp của các bạn rất hữu ích cho cộng đồng.

Mới đây bạn Minh Triết có hỏi rằng, có cách nào tạo hẳn một trang giao diện riêng cho một nhãn gồm cả phần main blog hay không, và nếu cái này mà làm được nữa thì vô đối. Lấy ví dụ blog của mình có 3 chủ đề chính: là A, B, C gồm các bài viết theo các nhãn A, B và C. Mình muốn trang homepage riêng và mỗi khi vào trang có dạng http://abc.blogspot.com/search/label/A thì sẽ tạo ra một trang homepage riêng cho nhãn A (tương tự với B và C).

Quả thật thì ý tưởng này rất hay và rất độc đáo. Trước tiên xin cảm ơn bạn Minh Triết đã đóng góp ý tưởng này. Và sau đây là trang Demo để các bạn xem trước.

Nào chúng ta cùng tìm hiểu vấn đề nhé bạn. Hẳn bạn cũng biết, mỗi trang chủ của blogspot được định dạng trong phần main (gồm tiện ích Blog Posts và các tiện ích khác có thể được thêm vào). Code của phần main này ở chế độ Edit HTML của Template không mở rộng mẫu tiện ích có dạng chuẩn như sau:

<!-- Main content -->

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='yes'>

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

</b:section>

</div>

<!-- /Main content -->

Như vậy muốn tạo kiểu trang chủ riêng cho một nhãn thì chúng ta tạo thêm một phần main khác (có ID khác phần main chính của blogspot) và dùng lệnh điều kiện để chỉ hiển thị phần main mới tạo ở trang nhãn đó. Khi đó bạn sử dụng code như sau (thay đoạn code nói trên bằng đoạn code bên dưới:

<!-- Main content -->
<b:if cond='data:blog.url == &quot;URL_đến nhãn nào đó&quot;'>
<style>
#main2-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
<b:else/>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='yes'>

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

</b:section>

</div>

</b:if>
<!-- /Main content -->

Lưu ý phần code CSS ở trên bạn có thể tạo giống như CSS của phần main ở trang chủ hoặc có thể tạo khác nếu bạn muốn nó khác biệt.

Bạn cần phải nhớ rằng phần main mới tạo chỉ hiển thị ở trang nhãn chỉ định nên khi vào phần Page Elements để thêm tiện ích thì bạn sẽ không thấy được phần main này. Do đó nếu muốn tùy biến cho phần main này thì bạn phải chỉnh sửa ở chế độ mở rộng mẫu tiện ích hoặc thêm tiện ích ở trang chủ và hoàn thiện nó rồi sau đó vào Edit HTML để di dời nó đến phần main mới tạo. Lấy ví dụ mình tạo một tiện ích có ID là HTML100 ở trang chủ, sau đó mình vào Edit HTML và di dời nó đến phần main mới tạo như sau:

<b:section class='main' id='main2' showaddelement='yes'>

<b:widget id='HTML100' locked='false' title='' type='HTML'/>

<b:widget id='Blog2' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Hoặc

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

<b:widget id='HTML100' locked='false' title='' type='HTML'/>

</b:section>

Như vậy nếu bạn muốn một trang nhãn nào đó có định dạng rất phức tạp với nhiều tiện ích thì trước tiên bạn thêm chúng ở trang chủ, xong rồi bạn di dời chúng đến phần main mới tạo theo cách như trên.

Tương tự nếu bạn muốn tạo kiểu trang chủ cho nhiều nhãn, ví dụ các nhãn A, B, C thì bạn dùng code như sau:

<!-- Main content -->
<b:if cond='data:blog.url == &quot;URL_đến nhãn A&quot;'>
<style>
#main2-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</b:if>

<b:if cond='data:blog.url == &quot;URL_đến nhãn B&quot;'>
<style>
#main3-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main3-wrapper'>
<b:section class='main' id='main3' showaddelement='yes'>
<b:widget id='Blog3' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</b:if>

<b:if cond='data:blog.url == &quot;URL_đến nhãn C&quot;'>
<style>
#main4-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main4-wrapper'>
<b:section class='main' id='main4' showaddelement='yes'>
<b:widget id='Blog4' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</b:if>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='yes'>

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

</b:section>

</div>

<!-- /Main content -->

Xin lưu ý một điều rằng, thủ thuật này chỉ dành cho các bạn đã có chút kiến thức về blogspot và có máu phiêu lưu với Template của mình, đồng thời đầu óc phải sáng suốt khi Edit HTML nếu không bạn sẽ phá tanh bành lên đó. Hãy nhớ Download Full Template để sao lưu dữ liệu trước khi thực hiện thủ thuật.