Iris Tips
Iris TipsBlogger Conditional Tag — b:if and b:else
Thẻ điều kiện trong Blogger được sử dụng để kiểm tra 1 sự kiện. Nếu chúng thỏa điều kiện thì sẽ thực thi một hành động, ngược lại sẽ là một hành động khác được thực hiện. Đây là cách tuyệt vời để để làm những việc như ẩn các tiện ích, css, javascript, html... nhằm giải quyết các vấn đề cần thiết khi tối ưu cũng như thực hiện việc SEO trên Blogger và giúp bạn có một website vượt trội hơn trong quá trình sử dụng Blogger. Với việc bạn nắm vững các điều kiện này thì Iris Tips tin tưởng bạn sẽ tối ưu được toàn bộ trang Blogger của bạn.
Sử dụng thẻ điều kiện để làm gì?
1. Bạn hoàn toàn có thể tối ưu, thêm title, description vào bất kỳ trang nào mà bạn muốn.2. Tối ưu và chặn index các trang nội dung kém.
3. Tối ưu việc hiển thị nội dung, đưa thêm nội dung hỗ trợ quá trình SEO Homepage và Nhãn (Label)...
Cú pháp sử dụng thẻ điều kiện trong Blogger
<b:if cond='Điều kiện'>
// Nội dung hiển thị
</b:if> <b:if cond='Điều kiện'>
// Nội dung hiển thị
<b:else/>
// Nội dung hiển thị
</b:if> - Câu lệnh IF…ELSE: Thực hiện 1 số câu lệnh khi điều kiện đúng và 1 số câu lệnh khác nếu điều kiện là sai.
Lưu ý: Câu lệnh <b:if> và <b:else/> chỉ hoạt động trong trang HTML/XML của Blogger, không hoạt động trong HTML/JS widget.
Danh sách các trường hợp sử dụng thẻ điều kiện <b:if> trong Blogger
1. Hiển thị nội dung chỉ trên trang Item (trang bài viết) <b:if cond='data:blog.pageType == "item"'>...nội dung...</b:if> 2. Hiển thị nội dung chỉ trên trang Static (trang tĩnh)
<b:if cond='data:blog.pageType == "static_page"'>...nội dung...</b:if> 3. Hiển thị nội dung trên trang Static với tên chỉ định (ví dụ: blogger)
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/blogger.html"'>...nội dung...</b:if>4. Hiển thị nội dung chỉ trên trang index (trang chủ, trang label (Danh mục), trang lưu chữ (archive))
<b:if cond='data:blog.pageType == "index"'>...nội dung...</b:if> 5. Hiển thị nội dung chỉ trên trang archive (trang lưu trữ)
<b:if cond='data:blog.pageType == "archive"'>...nội dung...</b:if> 6. Hiển thị nội dung chỉ trên homepage (trang chủ)
<b:if cond='data:blog.url == data:blog.homepageUrl'>...nội dung...</b:if> 7. Hiển thị nội dung chỉ trên URL tùy chỉnh
<b:if cond='data:blog.url == "URL-tuy-chinh"'>...nội dung...</b:if> http://iris-tips.blogspot.com/2015/04/hello.html
- Không sử dụng relative URL, ví dụ:
/2015/04/hello.html
8. Hiển thị nội dung khi có Backlink
<b:if cond='data:post.showBacklinks'>...nội dung...</b:if> 9. Hiển thị nội dung với Tên hiển thị cụ thể (ví dụ Tác giả bài viết)
<b:if cond='data:displayname == "Tên_hiển_thị"'>...nội dung...</b:if> 10. Hiển thị nội dung khi có một số lượng bình luận nhất định
<b:if cond='data:post.numComments == [number_here]'>...content...</b:if> [number_here] là 1 số nguyên không âm, ví dụ: 1, 2, 3...
Lưu ý: đối với dấu < (nhỏ hơn) và > (lớn hơn) chúng ta cần phải mã hóa chúng:
- Nhỏ hơn < thành <
- Lớn hơn > thành >
11. Hiển thị nội dung khi có jump link ("read more" link):
<b:if cond='data:post.hasJumpLink'>...nội dung...</b:if> 12. Hiển thị nội dung khi mở chức năng bình luận:
<b:if cond='data:post.allowComments'>...nội dung...</b:if> 13. Hiển thị nội dung chỉ trên trang Nhãn (Label)
<b:if cond='data:blog.searchLabel'>...nội dung...</b:if> 14. Hiển thị nội dung cho Nhãn (Label) được chỉ định (ví dụ: Blogger)
<b:if cond='data:blog.searchLabel == "Blogger"'>...nội dung...</b:if> 15. Hiển thị nội dung cho những trang có nhiều bài viết trên cùng một trang, áp dụng này cho bài viết đầu tiên:
<b:if cond='data:post.isFirstPost'>...nội dung...</b:if> 16. Hiển thị nội dung khi mở chức năng bình luận:
<b:if cond='data:post.allowComments'>...nội dung...</b:if> 17. Hiển thị nội dung chỉ trên trang Tìm kiếm (Search)
<b:if cond='data:blog.searchQuery'>...nội dung...</b:if>18. Hiển thị nội dung cho Tìm kiếm từ khóa được chỉ định (ví dụ: http://iris-tips.blogspot.com/search?q=Blogger)
<b:if cond='data:blog.searchQuery == "Blogger"'>...nội dung...</b:if> 19. Hiển thị nội dung khi truy cập bằng mobile:
<b:if cond='data:blog.isMobile'>...nội dung...</b:if>20. Hiển thị nội dung khi truy cập bằng máy tính (desktop), ẩn khi truy cập bằng mobile:
<b:if cond='data:blog.isMobileRequest == "false"'>...nội dung...</b:if>21. Hiển thị nội dung chỉ trên trang Báo lỗi (Error 404 Page)
<b:if cond='data:blog.pageType == "error_page"'>...nội dung...</b:if>22. Hiển thị một hình ảnh trước tiêu đề khi bài viết mang một nhãn chỉ định (ví dụ: hiện thị hình ảnh bông hoa trước các bài viết có chứa nhãn Flower)
<b:if cond='data:post.labels any (l => l.name == "Flower")'>
<img src='/img/flower.jpg' />
<b:if/>23. Hiển thị nội dung dựa vào PAGE_ID hoặc POST_ID
<b:if cond='data:blog.pageId == "PAGE_ID"'>...nội dung...</b:if><b:if cond='data:blog.pageId == "POST_ID"'>...nội dung...</b:if>
So sánh khác:
Dấu == là điều kiện so sánh bằng (TRUE), bạn cũng có thể áp dụng thêm kiểu so sánh khác (FALSE) !=Ví dụ: Hiển thị một nội dung trên tất cả các trang ngoại trừ Trang chủ (Homepage)
<b:if cond='data:blog.url != data:blog.homepageUrl'>
...nội dung...
</b:if>
Thế còn điều kiện rẽ nhánh: <b:else/>
Nó được đặt bên trong thẻ <b:if>Bạn có thể xem qua ví dụ sau:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
[...nội dung 1...]
<b:else/>
[...nội dung 2...]
</b:if> Điều kiện <b:if> có thể được xếp chồng lên nhau
Ví dụ: <b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.url != "URL-tuy-chinh"'>
[...nội dung 1...]
<b:else/>
[...nội dung 2...]
</b:if>
</b:if> Sử dụng <b:if> cho tiện ích (widget)
Thật ra chúng ta sử dụng lệnh <b:if> và <b:else/> để điều khiển sự xuất hiện của tiện ích.Bạn cần đi đến Mẫu >> Chỉnh sửa HTML và tìm (jump) đến widget bạn cần chỉnh sửa.
Ví dụ bạn cần chỉnh sửa tiện ích có id là HTML1, sau khi tìm đến tiện ích này sẽ có mẫu 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> Để điều khiển sự xuất hiện của tiện ích HTML1 bạn cần đặt thẻ <b:if> ngay sau thẻ <b:includable> và đặt thẻ đóng </b:if> ngay trước thẻ đóng </b:includable>
Ví dụ:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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> Ở ví dụ trên tiện ích HTML1 sẽ chỉ xuất hiện trên trang item.
Chỉnh sửa nội dung tiện ích (widget)
Bạn có thể nội dung tiện ích HTML1 từ trang Bố cục Blogger hoặc chỉnh sửa <data:content/> với nội dung tùy chỉnh của bạn - không khuyến khích thực hiện cách này. Chỉ thực hiện khi bạn có đủ tự tin để mày mò Blogger template.Bạn có thể tham khảo ví dụ sau:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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'>
Ghi nội dung tại đây (script hoặc bất kỳ cái gì)
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> Ví dụ với thẻ <b:else/>:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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/> hoặc Nội dung 1
</div>
<!--[#1] place it here-->
<b:else/>
Nội dung 2
<b:include name='quickedit'/>
<!--[#2] or here-->
<b:else/>
Nội dung 2
</b:if>
</b:includable>
</b:widget> Sử dụng cho CSS hoặc Script
Ngoài tiện ích (widget) ra thẻ điều kiện <b:if> còn có thể sử dụng cho CSS và Script. Bạn có thể xem ví dụ sau về CSS (script cũng tương tự như thế) <b:if cond='data:blog.pageType == "item"'>
<style>
/*styling của bạn*/
</style>
</b:if> So sánh, thêm bớt
- Thêm hoặc ghép các giá trị với nhau: +- Loại bỏ giá trị với: -
- So sánh các giá trị với nhau:
+ So sánh bằng và so sánh khác: == và !=
+ So sánh hơn kém: <, > ,<= và >=
Các cấu trúc điều kiện mới trong Blogger
Đảo ngược các điều kiện
Chúng ta sử dụng ! để đảo ngược các điều kiện. Ví dụ <b:if cond='!data:post.allowComments'>... là nếu không đồng ý mở chức năng bình luận.Chọn giữa 2 giá trị
Chọn giữa 2 giá trị bằng cách sử dụng ?. Ví dụ <a expr:class='data:post.allowComments ? "comments" : "no-comments"' ...Kiểm tra xem giá trị là một thành viên của một tập hợp hoặc mảng
Ví dụ: <b:if cond='data:blog.pageType in {"index", "archive"}'>...Kết hợp các điều kiện với nhau
Ví dụ: <b:if cond='data:blog.pageType == "index" and data:post.allowComments'>...Lời kết
Với một ít thủ thuật trong sử dụng câu lệnh điều kiện if-else bạn đã có thể tối ưu gần như toàn bộ các vấn đề trong SEO On-Site mà Google chưa hỗ trợ. Chúng ta hoàn toàn có thể tối ưu tất cả các trang mà mình muốn, bạn sẽ có một lời thế nhất định trong SEO.Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
Created by Iris Tips
bài viết quá hay. Làm thế nào để ẩn widget trên tất cả các trang nhãn và trang lưu trữ vậy?
Trả lờiXóaBạn có thể tham khảo điều kiện 3, 4 sửa == thành != hoặc sử dụng kết hợp các điều kiện 1, 2, 5
XóaNếu muốn ẩn luôn sidebar cho đẹp thì bạn có thể xem thêm bài viết này.
Xóahttp://iris-tips.blogspot.com/2015/10/an-widget-sidebar-tao-trang-bai-viet-full-width.html
Đã cập nhật thêm một vài thẻ điều kiện mới nhé :)
Trả lờiXóaMình dùng thẻ để ẩn quảng cáo không xuất hiện ở mobie nhưng không được, nó mất luôn trên desktop lẫn mobie
Trả lờiXóaThẻ điều kiện lỗi thì bạn có thể dùng CSS để thay thế cũng được
Xóa<style type='text/css'>
@media only screen and (min-width:640px){
.quangcao{display:block}}
@media only screen and (max-width:480px){
.quangcao{display:none!important}}
</style>
<div class="quangcao">
//dat code quang cao cua ban o day
</div>