Ẩn/Hiện Widgets/Gadgets tại một trang bất kì trong blogspot

Blogger Thủ thuật

{ 9 comments }
Ẩn - Hiện Widgets trong Blogger -Blogspot

Ẩn – Hiện Widgets trong Blogger -Blogspot

Theo mặc định thì các Widgets/Gadgets khi được thêm vào blogspot sẽ được hiển thị ở mọi trang và mọi bài viết. Tuy nhiên với thủ thuật nhỏ trong bài viết này việc ẩn hoặc hiện một widgets/gadgets bất kì tại một trang hoặc một post sẽ không phải là một điều quá khó khăn với các blogger nữa.

Trước tiên để đọc bài viết này các bạn nên tìm hiểu kĩ về các kiểu trang trong Blogger – Blogspot để giúp cho quá trình tùy biến được dễ hơn.

Xem thêm  Bảo mật file pdf: Chống copy - chống chỉnh sửa và in ấn

Bước 1: Thêm một Widgets/Gadgets bất kì trong Blogger –Blogspot

Các bạn truy cập vào trang quản lý của Blogger, chọn blog muốn thực hiện thủ thuật này và chọn Bố cục (Layout). Tiếp tục chọn Thêm tiện ích (Add Gadgets), một cửa sổ sẽ hiện ra cho phép các bạn lựa chọn các tiện ích để thêm vào blogger. Ở đây tôi chọn tiện ích bài đăng phổ biến (Popular Post). Để nguyên mặc định và nhấn lưu. Bây giờ tiện ích bài đăng phổ biến đã được thêm vào blog của bạn.

Thêm Widgets - Gadgets trong Blogger

Thêm Widgets – Gadgets trong Blogger

Bước 2: Truy cập vào phần tùy chỉnh mẫu giao diện bằng cách nhấn vào mẫu và chọn Chỉnh sửa HTML

Chỉnh sửa html Blogger Template

Chỉnh sửa html Blogger Template

Bước 3: Trong mục Chuyển tới tiện ích hãy chọn Popular Post 1 hoặc Widget mà bạn đã thêm trước đó.

Sửa Code HTML cho Blogger Widgets

Sửa Code HTML cho Blogger Widgets

Bước 4: Click vào mũi tên ở đầu dòng để mở Code của tiện ích đó.

Hiển thị code HTML của các Widgets trong Blogger - Blogspot

Hiển thị code HTML của các Widgets trong Blogger – Blogspot

Chúng ta sẽ thấy Code của Widgets Popular Post 1 như sau:


<b:widget id='PopularPosts1' locked='false' title='Bài đăng phổ biến' type='PopularPosts'>
 <b:includable id='main'>
 <b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content popular-posts'>
 <ul>
 <b:loop values='data:posts' var='post'>
 <li>
 <b:if cond='data:showThumbnails == &quot;false&quot;'>
 <b:if cond='data:showSnippets == &quot;false&quot;'>
 <!-- (1) No snippet/thumbnail -->
 <a expr:href='data:post.href'><data:post.title/></a>
 <b:else/>
 <!-- (2) Show only snippets -->
 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
 <div class='item-snippet'><data:post.snippet/></div>
 </b:if>
 <b:else/>
 <b:if cond='data:showSnippets == &quot;false&quot;'>
 <!-- (3) Show only thumbnails -->
 <div class='item-thumbnail-only'>
 <b:if cond='data:post.thumbnail'>
 <div class='item-thumbnail'>
 <a expr:href='data:post.href' target='_blank'>
 <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
 </a>
 </div>
 </b:if>
 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
 </div>
 <div style='clear: both;'/>
 <b:else/>
 <!-- (4) Show snippets and thumbnails -->
 <div class='item-content'>
 <b:if cond='data:post.thumbnail'>
 <div class='item-thumbnail'>
 <a expr:href='data:post.href' target='_blank'>
 <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
 </a>
 </div>
 </b:if>
 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
 <div class='item-snippet'><data:post.snippet/></div>
 </div>
 <div style='clear: both;'/>
 </b:if>
 </b:if>
 </li>
 </b:loop>
 </ul>
 <b:include name='quickedit'/>
 </div>
</b:includable>
 </b:widget>

Bước 5: Tùy chỉnh Ẩn – Hiện Widgets/Gadgets trong một trang hoặc một post bất kì

Để Widgets/Gadgets chỉ hiện ở trang chủ các bạn sẽ chỉnh sửa code như sau:

<b:widget id=’PopularPosts1′ locked=’false’ title=’Bài đăng phổ biến’ type=’PopularPosts’>
<b:includable id=’main’>

<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content popular-posts’>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Hoặc:

<b:widget id=’PopularPosts1′ locked=’false’ title=’Bài đăng phổ biến’ type=’PopularPosts’>
<b:includable id=’main’>

<b:if cond=’data:blog.pageType == “index”‘>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content popular-posts’>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Chỉ hiển thị Widgets tại trang xem bài viết

<b:widget id=’PopularPosts1′ locked=’false’ title=’Bài đăng phổ biến’ type=’PopularPosts’>
<b:includable id=’main’>

<b:if cond=’data:blog.pageType == “index”‘>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content popular-posts’>

<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Chỉ hiển thị Widgets tại một trang bất kì

<b:widget id=’PopularPosts1′ locked=’false’ title=’Bài đăng phổ biến’ type=’PopularPosts’>
<b:includable id=’main’>

<b:if cond=’data:blog.url == “URL of the page”‘>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content popular-posts’>

<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Thay thế URL of the page bằng url của trang, bài viết mà bạn muốn widget sẽ hiển thị

Chỉ hiển thị Widgets tại những trang tĩnh – Static Page

<b:widget id=’PopularPosts1′ locked=’false’ title=’Bài đăng phổ biến’ type=’PopularPosts’>
<b:includable id=’main’>

<b:if cond=’data:blog.pageType == “static_page”‘>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content popular-posts’>

<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Ẩn Widgets tại trang tĩnh

<b:widget id=’PopularPosts1′ locked=’false’ title=’Bài đăng phổ biến’ type=’PopularPosts’>
<b:includable id=’main’>

<b:if cond=’data:blog.pageType != “static_page”‘>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content popular-posts’>

<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Ẩn Widgets tại một kiểu trang đặc biệt, ngoài loại trang đó các trang còn lại Widgets sẽ được hiển thị

<b:widget id=’PopularPosts1′ locked=’false’ title=’Bài đăng phổ biến’ type=’PopularPosts’>
<b:includable id=’main’>

<b:if cond=’data:blog.pageType != “index”‘>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content popular-posts’>

<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Thay index bằng các kiểu trang mà bạn muốn widgets ẩn đi (static_page, archive, item…)

Chỉ hiển thị Widgets tại trang lưu trữ

<b:widget id=’PopularPosts1′ locked=’false’ title=’Bài đăng phổ biến’ type=’PopularPosts’>
<b:includable id=’main’>

<b:if cond=’data:blog.pageType == “archive”‘>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content popular-posts’>

<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Trên đây là cách ẩn – hiện widgets tại một trang bất kì trong blogger – blogspot.

Do code quá dài nên ở phần sau mình thu gọn lại những phần không cần thiết để các bạn dễ theo dõi. Các bạn chỉ cần chú ý tới đoạn code được bôi màu đỏ và vị trí đặt đoạn code đó là đủ rồi. Hi vọng với thủ thuật nhỏ này các bạn sẽ có một giao diện blogger pro hơn.

Góp ý cho Tô Triều

  • Rượu Quê Kim Sơn 08/02/2014, 19:16

    Chơi blogspot kể ra cũng sướng, như bác biết cả wordpress nữa thì quá tuyệt luôn 🙂

    Reply
    • Tô Hải Triều 08/02/2014, 21:34

      Cũng lan man quá bác ạ. Giao diện của bác đẹp quá. Tuy nhiên hơi khó khăn là khi em có thói quen click vào logo để về trang chủ thì lại ko có click được. Nếu bác để chỗ đó là link và thẻ h1 thì quá đẹp. Phục template của bác thật.

    • Rượu Quê Kim Sơn 08/02/2014, 22:24

      template này còn nhiều cái khó lắm, chắc sắp tới em chuyển sang template khác. có gì inbox với bác qua face nhé xem cái mới nó thế nào? tương tác cao hơn không :)) giờ e ngủ phát thức 2 đêm liền lại vừa đi dẫn khách thăm cơ sở mệt quá rồi 🙂

    • Tô Hải Triều 08/02/2014, 22:35

      Riêng e thấy template quá đẹp và phù hợp đó chứ. Khi nào bác đổi thì pm nhé. Em cũng hóng mấy template đẹp mê ly của bác rồi 🙂

    • Rượu Quê Kim Sơn 08/02/2014, 22:27

      E khoái blogspot hơn, yêu cầu của mình không cao lại dễ nhằn. chứ thím wordpress nhiều cái khó hiệu chỉnh quá.

    • S-Design 04/06/2014, 17:26

      Các cao thủ blogger cho mình hỏi là có cách nào ẩn “Text” ở trang search label giống như trang chính của bạn “Rươu qué kim sơn ” không Vì khi nhập nội dung bài viết thì nó không nằm trong cái thẻ nào để mình cho ẩn được

    • Hải Triều 04/06/2014, 17:37

      Bạn chụp hình cho mình xem chi tiết ý định được không?

  • Ngọc Tú 09/01/2014, 19:50

    Bác dạo này ngâm cứu về BlogSpot kỹ thế. Chắc em cũng phải làm cái blogspot cho máu lửa 😀

    Reply
    • Tô Hải Triều 09/01/2014, 20:06

      Có đâu tại e vừa làm blogger, vừa wp nên thấy cái gì hay thì viết thôi hehehehe