Hiện Widget trong Blogger

Bởi Blogger và An Thành Nguyễn

Lúc 16:35

Đố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ỹ.

>>Emoticons - Thủ thuật chèn biểu tượng vào bình luận Blogger

>>Recent Posts & Recent Comments - Thủ thuật tạo bài viết và bình luận mới nhất

>>Hình ảnh - Thủ thuật cho Logo chạy ngang trong Website/Blogger

>>Translate - Thủ thuật tự động dịch 10 ngôn ngữ cho Blogger/Website

>>Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS
>>Menu - Thủ thuật tạo Menu ngang cho Blogger bằng CSS
>>Back To Top - Thủ thuật nút lên đầu trang trong Blogger
>> Tắt/Mở đèn - Thủ thuật hiệu ứng tắt mở đèn cho Blogger
>>Image - Thủ thuật LazyLoad load ảnh theo trình tự trong bài viết Blogger
>>FeedBurner - Thủ thuật tạo FeedBurner cho Blogger
>>Sitemap - Thủ thuật tạo sơ đồ trang cho BLogger Version 3

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

Ẩn / Hiện Widget - Thủ thuật Ẩn / Hiện Widget trong Blogger

2 - Nhấp vào Chỉnh sửa trên Widget cần xử lý.

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 != &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>

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.

Khi đó bạn có đoạn code mới dạng 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 != &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>

Đế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 == &quot;archive&quot;'>

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 == &quot;item&quot;'>

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 == &quot;static_page&quot;'>

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 == &quot;index&quot;'>

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 != &quot;&quot;'>
    <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:

A. Trường hợp 1 : chỉ hiển thị widget khi thỏa mãn 2 hay nhiều điều kiện

Thay chữ Vị trí 1 thành đoạn code sau:

<b:if cond='data:blog.url != "Điều kiện 1"'>
<b:if cond='data:blog.url != "Điều kiện 2"'>

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 != "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:

<b:if cond='data:blog.url == "Điều Kiện 1"'>
  <!-- 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: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 != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
<b:else/>

Ví dụ, chỉ hiển thị widget ở chuyên mục Blog hoặc Blogger

<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 != &quot;&quot;'>
    <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 != &quot;&quot;'>
    <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ả.

====================================

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot

http://bittuot.blogspot.com.au/2013/08/cach-bai-viet-moi-nhat-ngoai-trang-chu.html

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot. Cách ẩn hết các bài viết mới nhất mặc định của blogspot ngoài trang chủ. Ẩn bài viết ngoài trang chủ .

Việc ẩn bài viết ở trang chủ ta phải dùng một thủ thuật khác với thủ thuật ẩn widget, nếu dùng thủ thuật ẩn widget thì bài viết không được ẩn hoàn toàn. Vì thế mình sẽ dùng CSS kết hợp lệnh để ẩn nó.
Đây là thủ thuật đơn giả nên mình sẽ không post hình minh họa kết quả.

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot !

Trước tiên thực hiện bạn phải xác định id của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1".Với một số blog có thể khác. Các bạn xác định theo các bước bên dưới:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed): => Tìm đoạn code sau :

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>

Sau đó ta vào: Mẫu -> chỉnh sửa HTML và dán code ngay bên dưới sau thẻ </b:skin>
<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {
display:none;
visibility:hidden;
}
</b:if>
</style>

Chú ý phần chữ màu đỏ phải giống nhau .

Vậy là bạn đã ẩn bài viết mới nhất ngoài trang chủ blogspot !

------------------------------------------------------

Ẩn các widget ở một trang nhất định

http://namkna.blogspot.com.au/2011/07/hien-thi-widget-o-nhung-trang-nhat-inh.html#.UkZAHIamiAg

Việc thao tác trên các widget của blogspot cũng rất quan trọng, đặc biệt khi bạn có nhiều tiện ích trên blog. Hôm nay mình hướng dẫn bạn cách để ẩn một số widget cho một bài viết, một nhãn hay một trang nhất định nào đó.

Trước đây thì mình đã giới thiệu bạn cách hiển thị bài viết ở một trang nhất định, tuy nhiên để ẩn các widget khác ở trên cùng trang này thì bạn cần đến thủ thuật này, bạn có thể kết hợp 2 thủ thuật này để tạo một trang riêng trên blog của mình.

1. Đăng nhập và vào phần thiết kế
Để ẩn được widget bạn cần xác định được ID của widget đó, ID của widget sẽ hiển thị trên thanh địa chỉ khi bạn click Chỉnh sửa (Edit) widget đó.

Sau khi xác định được ID của widget đó, bạn muốn ẩn widget này (ở đây mình ví dụ là ẩn widget có ID là HTML12) bạn làm như sau:

2. Bây giờ bạn nhấn chỉnh sửa HTML (Edit HTML)
3. Tìm đến thẻ đóng </head> và thêm vào trước nó một trong các code tùy chọn bên dưới.

A. Ẩn widget ở các trang bài viết

B. Ẩn widget ở trang chủ

C. Ẩn widget ở trang nhãn

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.

D. Ẩn widget ở trang nhất định

Bạn thay link màu đỏ thành link mà bạn muốn ẩn widget.

Ở trên mình chỉ ví dụ là ẩn 1 widget, nếu bạn muốn ẩn nhiều widget ở một trang nào đó bạn thêm ID của widget đó sau dòng #HTML12, ví dụ mình muốn ẩn 3 widget(HTML13, HTML18, HTML20) ở các trang bài viết, mình thêm như bên dưới.

4. Cuối cùng save template lại.

Ở đây bạn có thể ẩn bất kì wiget nào nếu bạn xác định đúng ID của nó.

☼ Mở rộng thêm thủ thuật

Ở trên là chúng ta thực hiện việc ẩn các Widget, đôi khi bạn thực hiện một số thủ thuật ở trang nhãn hay một trang nhất định nào đó và muốn cho bài viết ở trang đó ẩn đi (chỉ còn lại phần widget) thì bạn chỉ việc thay ID HTML trên thành Blog1 như bên dưới và làm tương tự như trên.

(Nguồn: traidatmui.com)

Tiep.....

http://namkna.blogspot.com.au/2011/07/hien-thi-widget-o-nhung-trang-nhat-inh.html#.UkZAHIamiAg

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

POSTED BY PON ALI UNDEFINED- UNDEFINED- UNDEFINED 0 NHẬN XÉT

Bài liên quan

Bước 1: trước tiên bạn phải xác định được Widget id của widget đó

Bước 2: Vào chỉnh sửa code HTML (edit code HTML) -> Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
Bước 3: Tìm đọan Widget id bạn muốn chỉnh (vd:HTML6)
Code thường có dạng mhư bên dưới

<b:widget id='HTML6' locked='false' title='' type='HTML'>
<b:includable id='main'>

<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>

Bước 4: thêm code màu vàng vào đúng vị trí như bên dưới

I. Chỉ cho phép widget hiển thị ở trang chủ

<b:widget id='HTML6' locked='false' title='' type='HTML'>
<b:includable id='main'>

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


<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>

II. Chỉ cho phép widget hiển thị ở từng bài viết:

<b:widget id='HTML6' locked='false' title='' type='HTML'>
<b:includable id='main'>

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


<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>

III. Chỉ cho phép widget hiển thị ở những trang nhất định

<b:widget id='HTML6' locked='false' title='' type='HTML'>
<b:includable id='main'>

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


<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>

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 == "Địa chỉ label của bạn"'>


<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>

http://m21love.blogspot.com.au/2012/06/hien-thi-widget-o-nhung-trang-nhat-inh.html

Ẩn các widget ở một trang nhất định

Ẩn / Hiện Widget - Thủ thuật Ẩn / Hiện Widget trong Blogger

====================================

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot

------------------------------------------------------

Ẩn các widget ở một trang nhất định

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

Follow TQTT

LeftMenu