Hướng dẫn tùy biến Widget ở những trang nhất định trong Blogspot

LongAnIT 6/22/2019
Hello các bạn. Hôm nay chúng ta lại gặp nhau trong topic thủ thuật blogspot. Như các bạn đã biết blogspot quản lý giao diện chính từ Template chứa tất cả các code người dùng sử dụng. Một phần nữa là Bố cục (Widget) - Giao diện đồ họa dành cho người dùng dễ thao tác có thể thêm/xóa các tiện ích

Đối với các blog có nhiều bốc cục 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 Wiget 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 Template 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 trên desktop và moblie sẽ giúp tối ưu hóa tốc độ tải trang cho blog của bạn rất nhiều

Chính vì thế mà trong bài viết này longanit xin được giới thiệu đến các bạn thủ thuật ẩn hiện Widget ở những trang nhất định trong Blogspot”

 Xác định ID của Widget tiện ích cần tùy biến ta làm như sau:

Bước 1: Đăng nhập vào Blogger - Bốc cục như hình

Cách xác định ID của tiện ích Widget
Cách xác định ID của tiện ích Widget

Tại giao diện tiện ích chọn một Widget bất kỳ cần tùy biến click vào chỉnh sửa như hình

ID nằm phía bên phải cuối cùng của thanh Address
ID nằm phía bên phải cuối cùng của thanh Address
Nhìn lên phía trên thanh địa chỉ màu xanh bạn kéo con trỏ chỏ cho đền cuối cùng sẽ hiện thị ID của Widget như trong hình trên ID=HTML7.

Các bước tùy biến Widget

Sau khi hoàn thành xác định ID của Widget cần tùy biến bạn quay lại trang quản trị Blogger

  1. Chủ đề - Chình sửa HTML. 
  2. Phần phía trên thanh menu của template bạn sẽ thấy tab "chuyển đến tiện ích". 
  3. Tìm ID có tên là HTML7
Chỉnh sửa tùy biến trong template blogspot
Chỉnh sửa tùy biến trong template blogspot

Click vào dấu tam giác màu đen bên trái để mở rộng code ra như trong hình tôi có code này


<b:widget id='HTML7' locked='false' title='Liên hệ quảng cáo' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<a href="https://www.longanit.com/" target="new"><img  src="https://1.bp.blogspot.com/-uvy7EJFXU64/XOuWV1zbIRI/AAAAAAAABhQ/PWvJ5GADafIwEVofohOM9sD1JYUe8WwlgCLcBGAs/s1600/ad-longanit.com.jpg" class="img-responsive"/></a>]]></b:widget-setting>
      </b:widget-settings>
      <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ây giờ để ẩn Widget này ngoài trang chủ tôi sẽ thêm code bên dưới vào phía dưới dòng  <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>
Sau khi hoàn thành tôi có code hoàn chỉnh như sau
 <b:widget id='HTML7' locked='false' title='Liên hệ quảng cáo' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<a href="https://www.longanit.com/" target="new"><img  src="https://1.bp.blogspot.com/-uvy7EJFXU64/XOuWV1zbIRI/AAAAAAAABhQ/PWvJ5GADafIwEVofohOM9sD1JYUe8WwlgCLcBGAs/s1600/ad-longanit.com.jpg" class="img-responsive"/></a>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>

  <!-- 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>
Tiến hành lưu lại và xem kết quả. Cũng tương tự như thế dùng cho các thè điều kiện bên dưới để tùy biến

Hide from home page

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

Hide from index pages

(home, label, search page or all posts page (include home and its older posts pages).
<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:remove/>
</b:if>

Hide from static pages

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <b:remove/>
</b:if>

Hide from item pages (articles, posts)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:remove/>
</b:if>

Hide from archive pages (showing posts by months / years)

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
 <b:remove/>
</b:if>

Hide from 404 pages

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
 <b:remove/>
</b:if>

Hide from mobile

<b:if cond='data:blog.isMobileRequest'>
 <b:remove/>
</b:if>
Kết luận: Như vậy qua bài viết trên tối đã hướng dẫn các bạn cách để chúng ta tùy biến một widget bất kỳ trong blogspot bằng cách sử dụng một số thẻ điều kiện cơ bản. Chúc các bạn thành công

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Không có nhận xét nào:

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây