Hiển thị widget ở những trang nhất định

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Trên blog bạn thường có nhiều Widget, và việc hiển thị chúng cũng làm mất thời gian khi load trang. Bây giờ mình giới thiệu cách tùy chỉnh cho nó hiển thị ở những nơi bạn muốn hiển thị. Nó sẽ giúp bạn có thể sắp xếp các widget ở các trang mà bạn muốn để trang blog hay web của bạn trông thẩm mĩ hơn. Để thực hiện thủ thuật này , trước tiên bạn phải xác định được Widget id của widget đó như hình bên dưới:


☼Bây giờ là cách để tùy chỉnh Widget đó:

1. Đăng nhập blog
2. Vào chỉnh sửa code HTML (edit code HTML)
3. Chọn mở rộng mẫu tiện ích (Expand Widget Templates).
4. Tìm đọan Widget id bạn muốn chỉnh (vd:HTML3)
Code thường có dạng mhư bên dưới
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<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:includable>
</b:widget>

☼ Sau khi đã biết được "Widget" đó thì chúng ta sẽ tùy chỉnh hiển thị chúng
bây giờ bạn hãy chọn nơi để hiển thị "Widget" đó, bạn chỉ việc thêm code màu đỏ vào đúng vị trí như bên dưới

I. Chỉ cho phép widget hiển thị ở trang chủ
<b:widget id='HTML3' locked='false' title='' 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/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

II. Chỉ cho phép widget hiển thị ở từng bài viết:
<b:widget id='HTML3' 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 != &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>

III. Chỉ cho phép widget hiển thị ở những trang nhất định:
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == "Link của bạn"'>

<!-- only display title if it's non-empty -->
<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>

Bạn hãy thay code màu xanh trên thành đường link mà bạn muốn widget đó hiển thị (ví dụ:http://www.traidatmui.com/2010/03/chen-google-translate-vao-blogger.html). Khi bạn chọn đường link như vậy thì khi bạn click đến link đó widget mới hiển thị, còn những đường dẫn khác widget đó sẽ không hiển thị

IV. Hiển thị ở trang label nhất định
<b:widget id='HTML4' locked='false' title='test 1' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == "http://www.traidatmui.com/search/label/Advanced blogger"'>

<!-- only display title if it's non-empty -->
<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>

V. Hiển thị ở các trang index
<b:widget id='HTML4' locked='false' title='test 1' type='HTML'>
<b:includable id='main'>

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

<!-- only display title if it's non-empty -->
<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>

VI. Hiển thị ở các trang Archive
<b:widget id='HTML4' locked='false' title='test 1' type='HTML'>
<b:includable id='main'>

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

<!-- only display title if it's non-empty -->
<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>

VII. Hiển thị ở các trang tĩnh
<b:widget id='HTML4' locked='false' title='test 1' type='HTML'>
<b:includable id='main'>

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

<!-- only display title if it's non-empty -->
<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>

VIII. Hiển thị ở các trang bài viết và tĩnh
<b:widget id='HTML4' locked='false' title='test 1' type='HTML'>
<b:includable id='main'>

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

<!-- only display title if it's non-empty -->
<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>

IX. Hiển thị ở trang tìm kiếm
<b:widget id='HTML4' locked='false' title='test 1' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.searchLabel'>

<!-- only display title if it's non-empty -->
<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>

X. Hiển thị ở giao diện mobile
<b:widget id='HTML4' mobile="yes" locked='false' title='test 1' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<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:includable>
</b:widget>

Bạn thay Yes thành No nếu muốn tiện ích không hiển thị trên giao diện Mobile.

XI. Chỉ hiển thị nội dung bất kỳ ở giao diện mobile
<b:if cond='data:blog.pageType == "data:blog.isMobile">

Nội dung bất kỳ hoặc đoạn code mà bạn chỉ muốn hiển thị ở trên mobile

</b:if>

XII. Không cho hiển thị nội dung bất kỳ ở giao diện mobile
<b:if cond='data:blog.pageType != "data:blog.isMobile">

Nội dung bất kỳ hoặc đoạn code mà bạn không muốn hiển thị ở trên mobile

</b:if>

Bạn hãy thay dòng màu xanh (http://www.traidatmui.com) thành địa chỉ blog của bạn và dòng (Advanced blogger) thành tên nhãn bài viết của bạn.

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

Tham khảo fandung.com

Loading...

13 nhận xét

  1. anh Dinh ơi!Nếu đc anh ghé sang blog em xem giùm em, em đã ẩn tiện ích nhưng khi chọn một bài viết bất kì thì tiện ích ko ẩn hẳn mà hiện ra một dòng nhỏ ở trên, anh giúp em đc ko.
    http://worldmoviedvd.blogspot.com/

    Trả lờiXóa
  2. em hãy nói rỏ hơn nhe, tiện ích em ẩn là tiện ích nào anh không thấy hiện tượng em nói. Em đã ẩn như hướng dẫn ở trên chưa? em ẩn tiện ích ở trang chủ hay ở vị trí nào.em hãy xem lại cách ẩn nha.

    Trả lờiXóa
  3. Hiện thị 1 widget cho nhiều label hay nhiều bài viết thì làm thế nào hả anh.
    Anh xem giùm em.http://xaydungnganh.blogspot.com.
    Khi click vào label giáo trình widget menu xuất hiện.giờ em muốn khi click các label "chuyên ngành" hay " đề thi" thì widget vẫn hiễn thị.
    Anh giúp em nha.
    Thank anh nhiều

    Trả lờiXóa
  4. Chức năng " Chỉ cho phép hiển thị widget ở trang chủ ",mình tìm thấy dòng " " phần phía dưới không có trong template !!!?

    Trả lờiXóa
  5. Bạn cần chọn "Mở rộng tiện ích" thì code mới hiển thị đầy đủ bạn ah. Thân!

    Trả lờiXóa
  6. Theo bạn xuandat719 hỏi thì anh vẫn chưa tìm được cách tối ưu lắm. Bạn có thể tạo thêm nhiều widget giống nhau (ví dụ như menu của bạn) và làm theo thủ thuật hiển thị widget ở trang nhãn nhất định. Đó là cách thủ công nhưng cũng có thể dùng được đó. Thân!

    Trả lờiXóa
  7. Em cũng đã nghĩ đến phương án đó nhưng không biết tốc độ load trang có nặng hơn hay không nữa.khi nào có phương án tối ưu nhắn cho em với.Em cảm ơn anh

    Trả lờiXóa
  8. Anh traidatmui oi, Magnificat thấy có nhiều thủ thật hay cho blog nhưng khi copy về tập làm cho blog của mình thì phải làm sao anh nhỉ? vì khi copy thì nhận được dòng chữ: Vui lòng điền traidatmui....
    Magnificat phải làm sao? Anh giúp dùm. Cảm ơn a nhé

    Trả lờiXóa
  9. Đó chỉ là dòng thông báo nhắc nhở việc copy và đăng lại bài viết của traidatmui.com trên blog của bạn. Đó chỉ là việc yêu cầu tôn trọng bản quyền của tác giả.

    Còn việc em thực hiện theo các thủ thuật trên trang này thì em copy code và dán bình thường, chỉ cần "OK" ở cửa sổ hiện ra. Thân!

    Trả lờiXóa
  10. Muốn hiển thị widget cho các bài viết trong cùng 1 label thì phải làm thế nào hả anh?

    Trả lờiXóa
  11. Thời gian qua cũng có một số bạn đề cập đến vấn đề em hỏi nhưng hiện tại anh chưa tìm được cách để thực hiện việc này. Thời gian tới nếu có thể anh sẽ chia sẻ cùng mọi người. Thân! battay

    Trả lờiXóa
  12. Cái Này ko thấy ghi Chỉ ẩn wignet ở Trang chủ thì dùng đoạn code nào nhỉ

    Trả lờiXóa