Tùy chỉnh hiển thị nội dung trong blogger

Bạn đang sắp xếp những widget, nội dung, hình ảnh hay một vài thông tin khác muốn hiển thị riêng biệt ở trang chủ, trang label, trang lưu trữ và ở trong bài viết blogger. Sau đây tôi sẽ hướng dẫn bạn có thể dễ dàng tùy chỉnh hiển thị nội dung, widget ở trang chủ hoặc các trang riêng biệt khác.

Tùy chỉnh hiện thị nội dung trong blogger / 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 blogger / 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, nội dung, hình ảnh 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.

Sau đây chúng ta sẽ có hai cách để bạn có thể tùy chỉnh nội dung hiển thị trong blogger / blogspot là can dự trực tiếp vào code html hoặc thông qua css ẩn nội dung đó đi.

1. Tùy chỉnh nội dung hiển thị bằng HTML

Các bạn xem ví dụ code bên dưới:

<b:if cond="data:blog.url == data:blog.homepageUrl">
Thông báo: Sun Fantastic chính thức khởi động !
</b:if>

Thì trong đó <b:if cond="data:blog.url == data:blog.homepageUrl"> ... </b:if> là thẻ được mở để tùy chỉnh nội dung Thông báo: Sun Fantastic chính thức khởi động ! chỉ hiển thị tại trang chủ (home page).

1-1. Code chỉ hiển thị nội dung trong blogger

Trường hợp 1. Chỉ hiển thị nội dung ở trang chủ.

<b:if cond='data:blog.url == data:blog.homepageUrl'> nội dung sẽ hiển thị </b:if>

Trường hợp 2. Chỉ hiển thị nội dung ở trang bài viết.

<b:if cond='data:blog.pageType == "item"'> nội dung sẽ hiển thị </b:if>

Trường hợp 3. Chỉ hiển thị nội dung ở trang static page.

<b:if cond='data:blog.pageType == "static_page"'> nội dung sẽ hiển thị </b:if>

Trường hợp 4. Chỉ hiển thị nội dung ở trang chủ, label, archive.

<b:if cond='data:blog.pageType == "index"'> nội dung sẽ hiển thị </b:if>

Trường hợp 5. Chỉ hiển thị nội dung ở trang lưu trữ.

<b:if cond='data:blog.pageType == "archive"'> nội dung sẽ hiển thị </b:if>

Trường hợp 6. Chỉ hiển thị nội dung ở trang riêng biệt.

<b:if cond='data:blog.url == "URL của trang riêng biệt"'> nội dung sẽ hiển thị </b:if>

Trường hợp 7. Chỉ hiển thị ở trang Error Page.

<b:if cond='data:blog.pageType == "error_page"'> nội dung sẽ hiển thị </b:if>

1-2. Code không hiển thị nội dung trong blogger

Xem ví dụ:

<b:if cond='data:blog.pageType != "index"'> nội dung sẽ hiển thị </b:if>
<b:if cond='data:blog.pageType != "item"'> nội dung sẽ hiển thị </b:if>

Các bạn có thể thấy code chỉ hiển thị sử dụng dấu == để nối trang hiển thị. Code không hiển thị được sử dụng dấu !=
Như vậy các bạn chỉ việc thay dấu == hoặc != để tùy chỉnh ẩn hiện nội dung trong blog.

1-3. Tùy biến ẩn / hiện

Dựa vào những trường hợp trên chúng ta có thể dễ dàng tùy chỉnh hiển thị nội dung trong blogger. Nhưng tôi sẽ giúp bạn viết nó một cách ngắn gọn hơn với thẻ <b:else/> (phương pháp loại trừ).

Ví dụ: Chỉ hiển thị ở trang chủ - không hiển thị ở các trang còn lại / Không hiển thị ở trang chủ - Hiển thị ở các trang còn lại

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  Nội dung chỉ hiển thị ở trang chủ
<b:else/>
  Nội dung không hiển thị ở trang chủ / Hiển thị trên tất cả trang còn lại
</b:if>

1-4. Tùy chỉnh hiển thị widget

Đối với widget khi chúng ta can dự trực tiếp bằng html để tùy chỉnh hiển thị. Chúng ta bắt buộc tìm kiếm code của widget trong Blogger > Mẫu > Chỉnh sửa HTML.
Ví dụ: Một widget có code như sau

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

Chúng ta sẽ thêm code hiển thị ở trước thẻ <b:includable id='main'> và đóng thẻ hiển thị trước thẻ đóng </b:includable>

Để tìm được ID của widget cần tìm ta click chuột phải vào tên tiêu đề của widget đó và chọn dòng Kiểm tra phần tử. Sau đó trên trình duyệt Chrome sẽ hiện lên một bảng code dàng cho các nhà quản trị web. Chúng ta nhìn lên dòng bên trên sẽ thấy id của widget chúng ta cần tìm.

2. Tùy chỉnh nội dung hiển thị bằng CSS

Với CSS thì chúng ta dễ dàng ẩn hiện nội dung trên các trang blogger chỉ với một số thuộc tính đơn giản và ngắn gọn.

Ví dụ: Trong trang bài viết chúng ta ẩn widget có id HTML1 hoặc bất cứ thẻ HTML nào chứa id HTML1

<b:if cond='data:blog.pageType == "item"'>
  <style type='text/css'>
    #HTML1 {display: none;}
  </style>
</b:if>

Thuộc tính display với giá trị none sẽ làm ẩn nội dung hoặc giá trị block để hiện và cố định nội dung.