Recent Post và Recent Comments

Blogspot cho đến hiện tại đã hỗ trợ rất nhiều dạng widget, ngoài các widget chính như Label, Archive, About, còn có các widget phụ rất hữu ích khác như LinkList, Video, About...(xem thêm tại đây). Tuy nhiên vẫn chưa thấy hỗ trợ 2 widget cũng không kém quan trọng đó là Recent Post và Recent Comments.

Thực ra thì việc tạo hai widget này giống nhau cả, có nhiều cách tạo nhưng nguyên tắc chung vẫn là lấy feed. Feed của bài viết có dạng http://yourblog.blogspot.com/feeds/posts/default còn của comment là http://yourblog.blogspot.com/feeds/comments/default?alt=rss, chỗ màu đỏ là địa chỉ blog của bạn. Sau đây tôi sẽ hướng dẫn sơ cách tạo Recent Post. Đối với Recent Comment bạn làm tương tự.

- Tạo một widget dạng HTML/Javascript với tiêu đề là (có thể khác) Recent Post
- Bằng cách sử dụng link feed của bài viết (có dạng) đã nêu ở trên, chuyển nó thành mã javascript. Cách chuyển có thể xem tại đây: Feed2Js
- Copy và Paste toàn bộ đoạn mã nhận được vào nội dung của widget. Thế là xong xuôi rồi đấy.

*** Nếu bạn muốn trang trí widget của mình trang trọng một chút, ví dụ như làm khung cho widget, thì làm khác trên một chút. Tạo widget không có tiêu đề và đặt đoạn mã feed2js vào giữa đoạn code tạo khung. Code tạo khung có thể tham khảo ở đây: Xem Code 4

Recent Post Widget sau khi trang trí như trên sẽ có dạng như sau:

Recent Posts

nguồn: vietwebguide.blogspot.com

Xem chi tiết...

Hiển thị Tóm tắt...

Sử dụng kỹ thuật mở rộng bài đăng theo kiểu hiển thị Peekaboo

Như bạn thấy, mỗi bài đăng trên blog này chỉ hiển thị phần đầu và mỗi khi bạn bấm trên Đọc tiếp... thì bài viết mới hiện ra đầy đủ, không phải tải lại, giúp blog nhanh hơn. Kỹ thuật này được phát triển bởi Ramani, khác với cách chèn đọc thêm (bài đăng phải tải lại một lần nữa) mà tôi có dịp giới thiệu trước đây. Để sử dụng kỹ thuật này trên blog, hãy thực hiện theo các bước sau:

Bước 1: Đăng nhập vào Blogger và chọn thẻ Template để sao lưu template của bạn.

Bước 2: Tại Edit HTML (Chỉnh sửa HTML) bạn kéo thanh trượt tìm tìm thẻ </head> (có thể nhấn đồng thời hai phím Ctrl + F để tìm) sau đó chép toàn bộ đoạn code dưới đây, dán phía trên thẻ này và lưu lại.

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
     var spans = post.getElementsByTagName('span');
     for (var i = 0; i &lt; spans.length; i++) {
          if (spans[i].id == "fullpost") {
              if (fade) {
                 spans[i].style.background = peekaboo_bgcolor;
                 Effect.Appear(spans[i]);
             } else spans[i].style.display = 'inline';
          }
          if (spans[i].id == "showlink")
              spans[i].style.display = 'none';
          if (spans[i].id == "hidelink")
              spans[i].style.display = 'inline';
     }
}


function hideFull(id) {
var post = document.getElementById(id);
     var spans = post.getElementsByTagName('span');
     for (var i = 0; i &lt; spans.length; i++) {
          if (spans[i].id == "fullpost") {
              if (fade) {
                spans[i].style.background = peekaboo_bgcolor;
                Effect.Fade(spans[i]);
              } else spans[i].style.display = 'none';
          }
          if (spans[i].id == "showlink")
              spans[i].style.display = 'inline';
          if (spans[i].id == "hidelink")
              spans[i].style.display = 'none';
     }
     post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
     var spans = post.getElementsByTagName('span');
     var found = 0;
     for (var i = 0; i &lt; spans.length; i++) {
          if (spans[i].id == "fullpost") {
              spans[i].style.display = 'none';
              found = 1;
          }
          if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
              spans[i].style.display = 'none';
     }
}

</script>

</b:if>

Bước 3: Bạn click chọn Expand Widget Templates sau đó tìm id='post' (có thể dùng Ctrl + F để tìm) có trên đoạn mã. Bây giờ hãy bổ sung các đoạn mã màu đỏ nằm đúng vị trí như dưới đây. Lưu ý: Một số template sẽ không có uncustomized-post-template nhưng bạn cũng không phải lo.

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>

 <a expr:name='data:post.id'/>
 <b:if cond='data:post.title'>
   <h3 class='post-title'>
   <b:if cond='data:post.url'>
     <a expr:href='data:post.url'><data:post.title/></a>

   <b:else/>
     <data:post.title/>
   </b:if>
   </h3>
 </b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

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

     <p><data:post.body/></p>

  <b:else/>

     <style>#fullpost {display:none;}</style>
     <p><data:post.body/></p>
     <span id='showlink'>
       <p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Đọc thêm ...</a></p>

     </span>
     <span id='hidelink' style='display:none'>
       <p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Tóm tắt ...</a></p>
     </span>
     <script type='text/javascript'>

       checkFull("post-" + "<data:post.id/>");
     </script>
  </b:if>

  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Bạn có thể tùy biến Đọc thêm ... và Tóm tắt ... nằm trong đoạn mã trên theo ý thích của mình.

Bước 4: Thay đổi cách đăng bài. Bây giờ mỗi bài đăng của bạn phải thực hiện theo cấu trúc sau:

Phần đầu hay tóm tắt
<span id="fullpost">
Phần còn lại hay mở rộng
</span>

Bạn có thể tham khảo thêm nội dung Sử dụng kỹ thuật mở rộng bài viết của Template ba cột mà trước đây tôi có dịp giới thiệu để biết cách dùng chi tiết hơn.

Cập nhật thêm (Bước 3):

Để thao tác đơn giản hơn, thay vì bổ sung các đoạn mã màu đỏ như bước 3 ở trên bạn hãy
copy hết tất cả mã nằm trong khung đó và thay thế đoạn mã nằm trong khung dưới đây có trong Edit HTML (Nhớ check Expand Widget Templates ở trên khung quản lý đoạn mã trước):

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
 <a expr:name='data:post.id'/>
 <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
  <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
     <b:if cond='data:post.url'>
       <a expr:href='data:post.url'><data:post.title/></a>
     <b:else/>
       <data:post.title/>
     </b:if>
  </b:if>
   </h3>
 </b:if>

 <div class='post-header-line-1'/>

 <div class='post-body entry-content'>
   <p><data:post.body/></p>
   <div style='clear: both;'/> <!-- clear for photos floats -->
 </div>

Chúc thành công!

nguồn: thuthuatblog.com

Xem chi tiết...

Hiển thị Tóm tắt...

Chèn “Đọc thêm” cho bài đăng của blog

Như bạn thấy mỗi bài đăng trên blog của tôi đều có phần “Đọc thêm” và click
vào phần này thì bài viết đầy đủ mới hiển thị ra. Nội dung phía trên tóm tắt bài
viết. Sử dụng thủ thuật này giúp blog bạn chuyên nghiệp và trông giống một
website hơn.

BƯỚC 1: SAO LƯU TEMPLATE VÀ CHÈN CSS

Sau khi đăng nhập vào blogger.com, click trên Template (Mẫu) -> Edit HTML (Chỉnh
sửa HTML) thực hiện sao lưu template vào máy tính của bạn.

Sao lưu xong, kéo thanh trượt tìm tag </head> (Có thể bấm Ctrl + F để tìm) và
chèn vào phía trên nó đoạn mã dưới và lưu lại.

<style> <b:if cond='data:blog.pageType == "item"'> span.fullpost {display:inline;} <b:else/> span.fullpost {display:none;} </b:if> </style>

BƯỚC 2: CHÈN LIÊN KẾT “ĐỌC THÊM”

Tiếp tục hãy click Expand Widgets Template và kéo thanh trượt để tìm tag

<data:post.body/>

(Có thể bấm đồng thời Ctrl + F để tìm). Sau đó chèn đoạn mã này phía dưới nó.

<b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'>Đọc thêm!</a> </b:if>

BƯỚC 3: TÙY BIẾN “ĐỌC THÊM”

Nếu bạn dùng đoạn mã trên, khi click vào “Đọc thêm!” bài đăng này sẽ được load
về trình duyệt và thay thế trang trước đó. Bạn muốn bài đăng được mở ở một cửa
sổ mới hãy chèn đoạn mã này.

<b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url' target='_blank'>Đọc thêm!</a> </b:if>

Trường hợp bạn muốn chữ “Đọc thêm” lớn hơn hay nhỏ hơn so với các chữ khác của
bài hãy chèn đoạn mã dưới. Thay đổi phần trăm để được nhỏ hơn.

<b:if cond='data:blog.pageType != "item"'> <span ><a expr:href='data:post.url' target='_blank'>Đọc thêm!</a></span> </b:if>

Trường hợp bạn muốn chữ “Đọc thêm” in đậm
hãy chèn đoạn mã dưới.

<b:if cond='data:blog.pageType != "item"'> <span style="font-weight:bold;"><a expr:href='data:post.url' target='_blank'>Đọc thêm!</a></span> </b:if>

Trường hợp bạn muốn chữ “Đọc thêm” có màu hãy chèn đoạn mã dưới (ví dụ ở đây là màu đỏ, bạn có thể lấy màu khác: Từ cửa sổ đăng bài Compose, gõ vài ký tự và chọn màu, click Edit Html để lấy mã, chữ có màu sẽ nằm giữa <span>…</span>).

<b:if cond='data:blog.pageType != "item"'> <span style="color: rgb(255, 0, 0);"><a expr:href='data:post.url' target='_blank'>Đọc thêm!</a></span> </b:if>

Bạn có thể sử dụng kết hợp cả ba.

BƯỚC 4: THAY ĐỔI CÁCH ĐĂNG BÀI

Ở cửa sổ đăng bài, thay vì chọn Compose, hãy chọn Edit Html và cấu trúc bài đăng
của bạn như bên dưới.

Phần tóm tắt hay đầu bài đăng <span class="fullpost"> Phần còn lại </span>

Xem hình:

Bài đăng phải nằm trong cấu trúc này. Nếu bạn cảm thấy khó nhớ đoạn code thì hãy
vào Settings (Cài đặt) -> Formatting (Định dạng), kéo thanh trượt và tìm Post
Template (Mẫu đăng bài), dán đoạn mã vào box kế bên và click Save Settings (Lưu
cài đặt) để lưu lại. Mỗi lần đăng bài, đoạn mã này được chèn trước và bạn chỉ
việc làm các thao tác để đăng bài.

Chúc thành công.

nguồn: thuthuatblog.com

Xem chi tiết...

Hiển thị Tóm tắt...