Cảm nhận tư duy và tổng hợp kiến thức

Hiển thị các bài đăng có nhãn Cơ bản. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Cơ bản. Hiển thị tất cả bài đăng

Thứ Hai, 1 tháng 1, 2018

Hiển thị Widget ở những trang nhất định trong Blogspot


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

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.

Chính vì lý do đó, hôm nay Hueit.net sẽ giới thiệu đến bạn đọc những thủ thuật nhỏ để “hiển thị Widget ở những trang nhất định trong Blogspot”, tiến hành như sau :

» Bước 1: Xác định ID của Wdget tiện ích cần tùy biến theo thủ thuật này.


1.1- Vào Bố cục (Layout) -> Nhấp vào Chỉnh sửa (Edit) trên Widget cần xử lý



1.2 - 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=HTML10 (trong trường hợp này là widget HTML10, đối với widget khác sẽ có ID khác)

- Sau khi xác định được Id của tiện ích bạn đóng cửa sổ popup đó lại và tiến hành bước tiếp theo nha.

Bước 2: Ẩn hiện  Widget ở những trang nhất định trong Blogspot

2.1- Bạn vào Mẫu (Template) => vào Chỉnh sửa HTML (Edit HTML) để tìm Id widget đó trong Template (trường hợp này là HTML10) Hãy sử dụng chức năng Tìm kiếm nội tuyến để tìm nó.

- Ngoài ra bạn có thể tìm kiếm trực tiếp nó trên thanh menu của phần chỉnh sửa blogger bằng cách bấm vào Chuyển đến tiện ích như hình dưới. 


- Bạn sẽ được chuyến đến tiện ích đó (nhưng nó sẽ bị thu nhỏ) do vậy hãy bấm vào mũi tên màu đen nằm ở trước đoạn code của tiệ ích để mở rộng nó ra:


- Sau khi mở rộng nó ra bạn sẽ được đoạn code tương tự như sau:
<b:widget id='HTML10' 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ờ Mình sẽ thêm lệnh ẩn hoặc hiện  Widget ở 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ủ thuậ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>

2.2-  Đến đây bạn thay chữ <-- Vị trí 1 --> thành một trong các đoạn code tương ứng bên dưới:

2.2.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.2.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 HTML10 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://www.hueit.net/2016/01/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;'>

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

- 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 BOOT và GHOST :
<b:if cond='data:blog.url != "http://www.hueit.net/search/label/BOOT"'>
<b:if cond='data:blog.url != "http://www.hueit.net/search/label/GHOST "'>
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 BOOT hoặc  GHOST
<b:if cond='data:blog.url == "http://www.hueit.net/search/label/BOOT"'>
  <!-- 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.hueit.net/search/label/GHOST"'>
  <!-- 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ả nha.

Nguồn Hueit.net

Share:

Tạo form đăng ký nhận bài viết mới qua email cho blogspot


Feedburner là gì ?



Feedburner là một dịch vụ miễn phí của Google cho phép quản trị viên có thể tạo nguồn cấp RSS trên website. Feedburner hiện đang cung cấp khá nhiều tính năng hữu ích  Một bộ công cụ hữu ích là tính năng Newletter cần cho chúng ta sử dụng để chuyển tải liên thông thông tin bài viết giữa các Web Blog và người dùng qua email.
feedburner có rất nhiều tác dụng đặc biệt, bởi trong quá trình thiết kế Web Blog có rất nhiều tính năng yêu cầu phải cung cấp Fead mới có thể hoạt động.
RSS là một định dạng tập tin thuộc họ XML dùng trong việc chia sẻ tin tức Web (Web syndication) được dùng bởi nhiều website tin tức và weblog.
Công nghệ của RSS cho phép người dùng Internet có thể đặt mua, hoặc miễn phí thông tin từ các websites có cung cấp khả năng RSS (RSS feeds); chúng thường là các site có nội dung thay đổi và được thêm vào thường xuyên.
Rõ ràng đây là một nguồn traffic không nên bỏ qua. Vì vậy bạn cần một dịch vụ để gửi “feed” đến khách truy cập đăng ký nhận bản tin mới trên website của mình. Hai dịch vụ miễn phí tốt nhất hiện nay được cung cấp bởi WordPress (cài đăt plugin Jetpack) và Google feedburnerGoogle feedburner dễ sử dụng, có số liệu thống kê trực quan và hoàn toàn miễn phí.


Bước 1: Cách đăng ký:



URL feedburner là điều kiện quan trọng để form đăng ký nhận bài viết mới hoạt động ổn định. Có lẽ vì cùng chung cha đẻ Google mà mỗi blogspot khi vừa sinh ra đã có sẵn URL feedburner.
Việc đầu tiên là bạn đã có Account trên Google chưa? Nếu chưa có, bạn hãy vào trang: Làm thế nào đăng ký tài khoản Google?  nhé, ở nơi đây mình sẽ hướng dẫn cho bạn một cách tường tận.

Nếu đã có rồi và hiện thời đã đăng nhập vào Google Account rồi, bạn cần thực hiện các bước sau:
- Truy cập vào Blogger Dashboard như hình dưới:

- Bên menu trái chọn Bố cục.
- Kéo nội dung xuống phần Sidebar và nhấn Thêm tiện ích.
- Kéo thanh cuộn trượt dọc biên phải cửa sổ xuống phía dưới, chọn vào: Theo dõi qua Email





- Chọn Theo dõi qua email (Subcribe via email). Đây chính là phiên bản thu nhỏ của feedburner.

- Cửa sổ mới xuất hiện, copy đoạn text khoanh như hình dưới đây (KtBnCngKhanhnguyensBlog). Sau đó nhấn Hủy để kết thúc, chỉ cần lấy được đoạn text này là xong.




Bước 2 : Tạo form đăng ký nhận bài viết mới:

- Tạo 1 Widget HTML hoặc một trang HTML mà bạn muốn đặt Source Code bên dưới. Có thể bạn muốn đặt trong Template cũng được, ở chổ nào mà bạn muốn, chẳng hạn ở những phần <data:post.body/> hoặc <post-footer-line post-footer-line...> nhưng phải mã hóa Code. Trong Blog của mình có phần mã hóa Code nằm trên phần Comments cho Blogger.
-  Add Code dưới đây vào phần bạn chọn và cho xuất bản. Nhớ làm xong thao tác nào, bạn cũng cần phải Save để ghi lại nhé.

Mã Code:
<div class="Email">
<style>
.Email {width:270px; height:250px; background:#3e433e; margin:5px auto; font-size:13px; color:#d1d1d1; text-align:center; padding:10px; }
.Email b {font:bold 24px helvetica; color:#fff; float:left; width:inherit; text-align:center; padding:20px 0; }
.Email form {width:250px; margin:0 auto;}
</style>
<b>Theo dõi qua Email</b><br />
Đăng ký để cập nhật những bài viết mới nhất từ Khanhnguyen' s Blog!<br />
<br />
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=KtBnCngKhanhnguyensBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="KtBnCngKhanhnguyensBlog" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Đăng ký" /></form></div>
- Chọn Mẫu / Chỉnh sửa HTML.
- Copy - paste đoạn mã sau vào vị trí bạn muốn đặt form theo dõi.- Thay thế URL chổ mã in đậm trên Code bằng đoạn text copy ở hình trên.
- Chỉnh sửa lại chiều rộng width và chiều cao height cho phù hợp với yêu cầu của bạn.
- Lưu template lại và cho Blog của bạn hoạt động thử xem nào.
Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:


Bạn có thể xem thêm các bài viết sau:
  • Hướng dẫn đăng ký và sử dụng FeedBurner cho Blogger

Chúc các bạn thành công tốt.

Người viết: Nguyễn Đạt Khánh

Share:

Thống kê Blogspot

  • Total visitors::
  • Lưu trữ Blog

    Bài có nhiều người xem nhất

    Comments trên Blog

    Bài đăng ngẫu nhiên

     
    BACK TO TOP