Ẩn / Hiện Widget - Thủ thuật Ẩn / Hiện Widget trong Blogger
Đối với các blog có nhiều chủ đề thì việc sử dụng nhiều Widget (Tiện ích) là điều không tránh khỏi. Do vậy làm thế nào để các Widget tiện ích đó hiển thị đúng nơi, đúng chỗ là điều mà các Blogger phải tính toán và cân nhắc rất kỹ.
Việc bố trí các Widget trên Templates một cách hợp lý sẽ làm nổi bật nội dung cần truyền tải, logic và hài hòa với bố cục Blog.Hiển thị Widget ở những trang nhất định trong Blogspot - ẩn hiện Wiget ở những trang nhất định.
Chính vì lý do đó, xin được giới thiệu đến bạn đọc những thủ thuật blogger nhỏ để “hiển thị Widget ở những trang nhất định trong Blogspot”, giúp các bạn thiết kế website được hài hòa và SEO tốt hơn. Chúng ta tiến hành như sau :
1 - Bố cục
Một cửa sổ Popup bật lên, bạn nhìn vào phía trên góc phải (gần thanh tiêu đề) sẽ thấy dòng có dạng tương tự sau: …null&widgetId=HTML1 (trong trường hợp này là widget HTML1, đối với widget khác sẽ có ID khác)
Sau khi xác định được ID của widget, bạn vào Mẫu > Chỉnh sửa HTML > Chuyển đến tiện íchđể tìm widget đó trong Template (Chọn ID trong trường hợp này là HTML1).
Sau đó bạn được chuyển đến tiện ích HTML1 và làm theo hướng dẫn trên ảnh:
Tiếp tục làm theo hướng dẫn dưới đây:
Khi đó bạn sẽ thấy đoạn code tương tự như sau:
<b:widget id='HTML1' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable></b:widget>
Như vậy, ta đã xác định được ID cũng như vị trí và nội dung của Widget, Bây giờ sẽ thêm lệnh ẩn hoặc hiện Widhet ở 2 vị trí là:
- Vị trí 1: Sau thẻ mở <b:includable id='main'>Phần này bạn thay dổi theo các mã mình cung cấp bên dưới.
- Vị trí 2: Thêm lệnh </b:if> vào trước thẻ đóng như sau </b:includable> phần này dung chung cho tất cả các thủ thật bên dưới.
<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
Vị trí 1
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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>
Đến đây bạn thay chữ Vị trí 1 thành các đoạn code tương ứng bên dưới:
1. Chỉ hiển thị Widget ngoài trang chủ
Thay chữ Vị trí 1 thành đoạn code sau:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
2. Chỉ hiển thị Widget ở trang Archive
Thay chữ Vị trí 1 thành đoạn code sau:
<b:if cond='data:blog.pageType == "archive"'>
3. Chỉ hiển thị Widget ở trang bài viết
Thay chữ Vị trí 1 thành đoạn code sau:
<b:if cond='data:blog.pageType == "item"'>
4. Chỉ hiển thị Widget ở trang Static Page
Thay chữ Vị trí 1 thành đoạn code sau:
<b:if cond='data:blog.pageType == "static_page"'>
5. Chỉ hiển thị Widget ở những trang với liên kết cụ thể
Thay chữ Vị trí 1 thành đoạn code sau:
<b:if cond='data:blog.url == "URL của trang chỉ định"'>
Trong đó URL của trang chỉ định là địa chỉ của trang nhãn hay bài viết. Ví dụ mình muốn HTML1 bên trên chỉ hiển thị trong bài viết này thì mình thay chữ Vị trí 1 bằng đoạn code sau:
<b:if cond='data:blog.url == "http://namkna.blogspot.com/2011/07/hien-thi-widget-o-nhung-trang-nhat-inh.html"'>
6. Chỉ hiển thị Widget ở Trang chủ, trang Label và trang Archive
Thay chữ Vị trí 1 thành đoạn code sau:
<b:if cond='data:blog.pageType == "index"'>
Ghi chú: Ở trên bạn có thể thấy mình cố ý đánh dấu “==” bằng màu đỏ, có nghĩa là, bạn hoàn toàn có thể thay dấu “==” bằng dấu “!=” sẽ mang ý nghĩa khác.
Qui ước :
== : “bằng” hoặc tương đương - Tức là chỉ hiện thị khi thỏa mãn điều kiện mà ta đưa ra. != : “khác” hoặc không tương đương - Tức là không hiển thị khi thỏa mãn điều kiện ta đưa ra.
Ví dụ, nếu bạn muốn Widget HTML10 hiển thị ở tất cả các trang khác ngoại trừ trang chủ, thì ta thay chữ Vị trí 1 bằng đoạn code sau:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
Tùy biến nâng cao sử dụng kết hợp các điều kiện
Vì một lý do nào đó, bạn chỉ muốn hiển thị widget ở trang A và trang B hoặc hiển thị khi thỏa mãn là trang A hoặc trang B, ta sẽ kết hợp các điều kiện với nhau như sau : Khi đó ta phải thêm 2 thẻ đóng </b:if> vào trước thẻ đóng </b:includable> của Widget như sau:
<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
Vị trí 1
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:if>
</b:includable>
</b:widget>
Ghi chú:
Trong đó phần màu vàng là nội dung của Widget. - Tiếp theo thay lệnh điều kiện cho các Wiget như sau:
Thay chữ Vị trí 1 thành đoạn code sau:
Ví dụ: Hiển thị widget ở tất cả các trang ngoại trừ chuyên mục Blog và Blogger :<b:if cond='data:blog.url != "Điều kiện 1"'> <b:if cond='data:blog.url != "Điều kiện 2"'>
<b:if cond='data:blog.url != "http://www.thietkeblogger/search/label/Blog"'> <b:if cond='data:blog.url != "http://www.thietkeblogger/search/label/Blogger"'> nội dung widget </b:if></b:if>
B. Trường hợp 2 : chỉ hiển thị widget khi thỏa mãn một trong các điều kiện
Thay chữ Vị trí 1 và đoạn màu vàng thành đoạn code sau:
Ví dụ, chỉ hiển thị widget ở chuyên mục Blog hoặc Blogger<b:if cond='data:blog.url == "Điều Kiện 1"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> <b:else/> <b:if cond='data:blog.url == "Điều Kiện 2"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> <b:else/>
<b:if cond='data:blog.url == "http://www.thietkeblogger/search/label/Blog"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> <b:else/> <b:if cond='data:blog.url == "http://www.thietkeblogger/search/label/Blogger"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> <b:else/> </b:if></b:if>
Bạn Save Template - Lưu Mẫu Xem kết quả.
0 nhận xét:
Đăng nhận xét