BẢO NGOC SHOP

Thursday, February 27, 2014

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

Filled under:

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

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.

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
5. 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://quyet223.blogspot.com/2013/11/zip-postal-code-ma-buu-chinh-64-tinh.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://quyet223.blogspot.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>

Bạn hãy thay dòng màu xanh (http://quyet223.blogspot.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ú ý quan trọng:
 Tôi đã làm theo cách trên, cũng thấy ẩn đi các Widget, tuy nhiên vẫn có chỗ chưa ưng ý (xem ảnh dưới), đó là vẫn còn xuất hiện các dòng ngăn cách giữa các Widget (trong ảnh là tôi chỉ có 3 Widget), làm cho trang Blog xấu đi:
 

    Tôi không ưng ý lắm nên cố gắng tìm cách khác, và cuối cùng tìm ra cách này, các bạn có thể làm theo, rất mỹ mãn:

Bài: Ẩn tiện ích và thành phần tại trang chủ hoặc trang riêng biệt


-- Chúng ta đã biết cách ẩn bài viết ở trang chủ và chỉ hiển thị tiện ích ở trang chủ hoặc trang riêng biệt. Đôi khi chúng ta cần ẩn một hay nhiều tiện ích hoặc một thành phần nào đó tại trang chủ hoặc trang riêng biệt nào đó để giúp dễ dàng hơn trong việc bố trí thiết kế trang chủ blogspot theo ý thích của người tạo blog. Hôm nay tôi sẽ hướng dẫn cách ẩn tiện ích và thành phần ở một phần riêng biệt nào đó của blog.

Muốn ẩn một tiện ích hoặc một thành phần nào đó thì ta phải xác định được id hoặc class của nó. Các id thông thường trong blogspot như là: HTML1, HTML2, HTML3, …, Label1, Label2, Label3, …, BlogList1, Followers1, Blog1, BlogArchive1, Profile1, header-wrapper, sidebar, main-wrapper, footer-wrapper, comments, comments-block, … Các id khi đưa vào CSS có dấu # ở phía trước, ví dụ: #HTML1. Các class thường gặp trong blogspot như: header-outer, main-outer, footer-outer, post-body, post-footer, … Các class khi đưa vào CSS có dấu . (dấu chấm) ở phía trước, ví dụ: .header-outer.

Lấy ví dụ muốn ẩn tiện ích có id là HTML1 ở trang chủ thì đặt đoạn code sau đây vào sau dòng ]]></b:skin> trong Template.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn nhiều tiện ích ở trang chủ, ví dụ các tiện ích có id lần lượt là HTML1, Label1, Followers1 thì sử dụng đoạn code sau.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#HTML1#Label1#Followers1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang bài viết thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#HTML1
 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang chính gồm trang chủ, trang nhãn, trang lưu trữ thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang lưu trữ thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang tĩnh thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở một trang riêng biệt nào đó thì sử dụng đoạn code sau.

<b:if cond='data:blog.url == &quot;URL của trang riêng biệt&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Trong trường hợp muốn ẩn tiện ích có id là HTML1 ở trang chủ, các trang nhãn, các trang lưu trữ mà không ẩn ở các trang bài viết thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Như vậy muốn ẩn một cái gì đó thì nó phải có id hoặc class. 



Như vậy, làm theo cách trên tôi thực hiện chèn đoạn code sau dòng ]]></b:skin> trong Template:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#HTML1
, #HTML6, #HTML8 {display:none !important;visibility:hidden !important}
</style>
</b:if>
 thì tôi đã ẩn được 3 Widget ở các trang bài viết mà không còn xuất hiện các dòng ngăn cách giữa các Widget nữa.
Thanks! 


     Hik, hik, tôi đã thực hiện như trên, nhưng khi tôi nhấn sang các Tab "Thủ thuật Blog, Mạng máy tính, Phần mềm, ...." thì không thấy ẩn các Widget, mày mò mãi tôi mới làm được. Các bạn muốn chỉ xuất hiện các Widget có id là HTML1, HTML6, HTML8... ở trang chủ thì sử dụng đoạn code sau:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#HTML1, #HTML6, #HTML8 {display:none !important;visibility:hidden !important}
</style>
</b:if>

     
     Tại sao tôi mày mò được: Đọc kĩ các hướng dẫn ở trên, tôi thấy là chỉ cần thay dấu ( == ) thành ( != ) thì tác dụng sẽ ngược lại.
VD: 
Muốn ẩn tiện ích có id là HTML1 ở trang chủ thì đặt đoạn code sau đây vào sau dòng ]]></b:skin> trong Template.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu thay == ) thành ( != ) thì kết quả sẽ là chỉ Hiện các tiện ích có Id là HTML1,....ở trang chủ.


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

0 comments:

Post a Comment

Xem nhiều nhất