Tùy chỉnh hiển thị widget ở trang chủ hoặc trang riêng biệt trong blogspot

Đây là một điều căn bản các bạn cần phải nhớ để có thể thiết kế được giao diện blogspot với các phong cách, kiểu dáng khác nhau. Một ví dụ điển hình đó là việc di chuyển các widget chỉ hiển thị ở trang chủ hoặc trang riêng biệt nào đó. Ngoài ra các bạn cũng có thể áp dụng nó vào các code CSS , JS, HTML chỉ hiển thị ở trang chủ hoặc trang riêng biệt.

Nào ! Chúng ta cùng bắt đầu.

Đây là ví dụ về hiển thị widget chỉ ở trang chủ các bạn xem code bên dưới:

<b:widget id="HTML1" locked="false" title="Random Post" type="HTML">
<b:includable id="main">
<b:if cond="data:blog.url == data:blog.homepageUrl">
<!-- only display title if it's non-empty -->
<b:if cond="data:title != &quot;&quot;">
<h2 class="title">
<data:title></data:title></h2>
</b:if>
<div class="widget-content">
<data:content>
</data:content></div>
<b:include name="quickedit">
</b:include>
</b:if>
</b:includable>
</b:widget>

Trong đó <b:if cond='data:blog.url == data:blog.homepageUrl'>...</b:if> là code mình đã thêm vào widget  để nó chỉ hiển thị ở trang chủ. Đối với widget bình thường thì sẽ chưa có dòng màu đỏ đó, muốn tùy chỉnh hiển thị thì các bạn cần thêm nó vào đúng vị trí giống code trên.

Dưới đây là những code tùy chỉnh hiển thị: 

Trường hợp 1: Chỉ hiển thị Widget (tiện ích) ở trang chủ

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Trường hợp: 2: Hiển thị widget ở tất cả các bài viết, trừ trang chủ.

<b:if cond='data:blog.pageType == "item"'> 

Trường hợp 3: Chỉ hiển thị widget ở một trang riêng biệt nào đó.

<b:if cond='data:blog.url == "URL của trang riêng biệt"'>  

Trường hợp 4: Chỉ hiển thị widget ở các trang chính gồm trang chủ, các trang Label và Archive.

<b:if cond='data:blog.pageType == "index"'>  

Trường hợp 5: Chỉ hiển thị widget ở các trang lưu trữ.

<b:if cond='data:blog.pageType == "archive"'>

Trường hợp 6: Chỉ hiển thị widget ở trang Static Page.

<b:if cond='data:blog.pageType == "static_page"'>

Dưới đây là những code loại trừ trang hiển thị.

Trường hợp 7: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang lưu trữ.

<b:if cond='data:blog.pageType != "archive"'> 

Trường hợp 8: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang bài viết.

<b:if cond='data:blog.pageType ! = "item"'> 

Trường hợp 9: Chỉ hiển thị widget ở tất cả các trường hợp trừ trang chủ.

<b:if cond='data:blog.url != data:blog.homepageUrl'>  

Trường hợp 10: Chỉ hiển thị widget ở tất cả các trang trừ một trang riêng biệt nào đó.

<b:if cond='data:blog.url != "Url của trang đặc biệt"'>  

Trường hợp 11: Chỉ hiển thị widget ở tất cả các trang trừ hai trang riêng biệt nào đó trở lên.

<b:if cond='data:blog.url != "Url của trang đặc biệt 1"'>
<b:if cond='data:blog.url != "Url của trang đặc biệt 2"'>  

Các bạn có thể thấy trường hợp 1 > 6  sử dụng dấu: == trường hợp 7 > 11 sử dụng dấu: != vậy thì cứ khi chúng ta muốn loại trừ trang hiển thị đó thì chỉ việc thêm dấu ! vào trước dấu = thôi, dễ nhớ phải không. ^^!

Một số tùy biến khác.

Trường hợp 12: Nếu bạn muốn hiển thị một thứ gì đó ở trang chủ và một thứ gì đó khác ở tất cả các trang. Bạn sử dụng lệnh điều kiện như thế này:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Đây là điều cần hiển thị ở trang chủ
<b:else/>Đây là điều không hiển thị ở trang chủ
</b:if>  

Để ý <b:else/> ngăn giữa 2 code nhé.

Trường hợp 13: Chỉ hiển thị widget ở một trang nhãn.

<b:if cond='data:blog.url == "http://yourblogname.blogspot.com/search/label/Tennhan"'> 

Trường hợp này chỉ hoạt động với tên nhãn không dấu như Blogger, CSS, Thuthuat, Thuvien (không dùng cho nhãn tiếng Việt). Đối với các nhãn có khoảng cách như Recent Posts thì phải đặt là Recent%20Posts (tức là thay khoảng cách bằng %20).
Các liên kết trang nhãn trong trường hợp này cũng không hoạt động được khi có đuôi ?max-resul

Các code trên là những ví dụ cho widget, ngoài ra các bạn cũng  có thể áp dụng nó cho HTML, CSS, JS...
Ví dụ:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#main {width: 500px; margin-top: 0px}
</style>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<style>
#main {width: 700px; margin-top: 10px}
</style>
</b:if>

Giải thích:
Khi ở trang chủ nó sẽ nhận CSS #main với width:500px và margin-top: 0px
Còn khi ở trang xem bài viết thì nó sẽ nhận CSS #main với width: 700px và margin-top: 10px
Vậy thì chúng ta có thể làm hiển thị 3 colum ở trang chủ, và 2 colum ở trang bài viết.
Đơn giản là chúng ta sẽ chỉnh độ rộng của main, và giấu sidebar-left đi.

Ví dụ: Giấu sidebar-left chúng ta có code sau:

Vậy là ta đã giấu cột sidebar-left đi rồi. Và nó sẽ không hiển thị ở trang bài viết nữa.
Các bạn có thể ghé qua trang http://mp3.jakub-bb.net/ để xem thử, mình đặt 3 cột ở trang chủ và 2 cột ở trang bài viết.

Có lẽ viết hơi dài rồi, bài tiếp theo mình sẽ hướng dẫn các bạn sâu hơn nhé. Pp !

Chúc bạn thành công!

Jakub BB