Thư viện

Trải nghiệm

Thứ Ba, tháng 7 02, 2013

Danh sách Bài viết mới xổ dọc khi click chuột cho blogspot

tiện ích bài mới nhất dạng xổ dọc của menu. Tức là tiêu đề của các bài viết sẽ hiển thị khi bạn bấm vào nhãn bạn muốn xem.

Chia sẻ:
Bài viết này namkna sẽ hướng dẫn các bạn tạo một tiện ích bài mới nhất dạng xổ dọc của menu. Tức là tiêu đề của các bài viết sẽ hiển thị theo danh sách khi bạn bấm vào nhãn bạn muốn xem. Tiện ích này hoạt động dựa trên nguyên tắc Json kết hợp với Javascript, các bài viết được gọi từ feed, do vậy trước khi áp dụng tiện ích này bạn phải chắc chắn blog bạn phải đăng ký feed rồi (chắc là ai cũng đăng ký rồi tuy nhiên vì một lý do nào đó mà bạn chưa đăng ký thì bạn có thể tham khảo bài viết này nha)

Các bạn có thể xem hình ảnh minh họa được mình quay lại ở bên dưới:
Bài viết mới xổ dọc khi click chuột cho blogspot

» Thêm Khung Like Fanpage ở góc màn hình bên trái hoặc bên phải cho blogspot

1- Vào Bố cục (Layout)
2- Tạo một tiện ích HTML/Javascripts và dán code bên dưới vào:
<script type="text/javascript">
    function recentpostslist(json) {
    document.write('<select class="selectchapter" onchange="window.location=this[this.selectedIndex].value;">');
    document.write('<option>Chọn bài viết thuộc nhãn Blogspot-tips</option>');
    for (var i = 0; i < json.feed.entry.length; i++)
    {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
    if (json.feed.entry[i].link[j].rel == 'alternate') {
    break;
    }
    }
    var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
    var entryTitle = json.feed.entry[i].title.$t;
    var item = "<option value="+ entryUrl + '>' + entryTitle + "</a> </option>";
    document.write(item);
    }
    document.write('</select >');
    }
    </script>
    <script src="http://namkna.blogspot.com/feeds/posts/summary/-/Blogspot-tips?max-results=500&alt=json-in-script&callback=recentpostslist"></script>
» Tùy chỉnh code:
  • Thay thế http://namkna.blogspot.com/ thành URL trang web của bạn (Lưu ý thay thế nó thành tên miền bạn đang sử dụng nếu bạn cài đặt tên miền tùy chỉnh cho blog của mình nha).
  • Thay thế Blogspot-tips thành tên nhãn mà bạn muốn hiển thị các bài viết mới nhất của nhãn đó.
  • Dòng màu vàng Chọn bài viết thuộc nhãn Blogspot-tips là dòng luôn luôn hiển thị trên blog. Bạn bấm vào đó để chọn các bài viết. Dòng này bạn có thể thay đổi tùy theo ý muốn của bạn không cần phải theo quy luật nào hết, Tuy nhiên bạn không nên viết quá dài như vậy nó sẽ bị xuống dòng gây ra sấu nha.
  • max-results=500 là số bài viết sẽ hiển thị trong tiện ích này bạn có thể chỉnh lại theo ý của bạn. (Lưu  ý là số bài đăng ở mục này càng lớn thì tốc độ tải càng lâu do vậy bạn không nên lạm dụng để quá nhiều nha.

3- Lưu mẫu lại và kiểm tra thành quả nha.

6 nhận xét:

  1. Ad hướng dẫn làm cái related post theo label dạng này được không?

    Trả lờiXóa
  2. Bạn chỉ giúp mình cái này http://diendangioitre.blogspot.com/. Sao khi mình click vào các chuyên mục lại không hiện ra danh sách bài viết. Nhưng khi click vào bài viết thì phần phía trên bài viết lại hiện ra danh mục của bài viết đó

    Trả lờiXóa
    Trả lời
    1. bạn tìm các đoạn có dạng như bên dưới:

      <script>document.write("<script src=\"/feeds/posts/default/-/Label A?max-results="+7+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");</script><script src="/feeds/posts/default/-/Label A?max-results=7&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2"></script>

      Sửa Label A thành tên nhãn bạn muốn hiển thị tương tự với Label B, Label C,....

      Xóa
  3. có thể sắp xếp theo bảng chữ cái không bạn?

    Trả lờiXóa