Thư viện

Trải nghiệm

Thứ Năm, tháng 5 30, 2013

[V4] Featured Posts metro slider cho blogspot

Slider lấy ảnh thumbnail của các bài viết mới theo nhãn hoặc toàn bộ blog, Bằng cách cải tiến code của tiện ích bloglisst. tự động với giao diện 2 cột bắt mắt thích hợp cho mọi blog.

Chia sẻ:
Slider này lấy ảnh thumbnail của các bài viết mới nhất có thể theo nhãn hoặc toàn bộ blog tùy lựa chọn của bạn, Bằng cách cải tiến code của tiện ích bloglisst. bạn có thể lấy ảnh từ bài viết của blog bạn hoặc blog nào khác bạn muốn. tất cả hoàn toàn tự động với giao diện 2 cột bắt mắt thích hợp cho mọi blog.

Thủ thuật này đã có trong template metro của Hồng Hòa Vi, Mình làm theo yêu cầu của Cậu bé mùa dông Bạn có thể xem demo hoặc ảnh minh họa:
[V4] Featured Posts metro slider cho blogspot

VIEW DEMO

 ¤ Bước 1. Thêm Featured Posts metro slider cho blogspot/ blogger!

1.1- Đăng nhập vào blog
1.2- Chọn Mẫu (Template)
1.3- Chọn chỉnh sủa HTML (Edit HTML)
1.4- Dán code sau trước thẻ ]]></b:skin> :
.feature{margin:-18px 0 30px}
#BlogList1 a{color:#fff}
#BlogList1 ul{list-style:none;padding:0}
#BlogList1 ul li{padding:2px 0 0 2px;float:left;clear:none;width:183px}
#BlogList1 .item-content{background:transparent}
#BlogList1 .item-thumbnail{background:transparent}
#BlogList1 .item-content img{width:183px;height:183px}
#BlogList1 .item-title{line-height:1.3em;font-size:90%;min-height:50px;max-height:50px;;opacity:0.75;background:#000;margin:-63px 0 1px;padding:5px;color:#fff;overflow:hidden}
#BlogList1 ul li:first-child{height:250px!important;width:250px!important;padding:2px 0 0!important}
#BlogList1 ul li:first-child img{height:250px!important;width:250px!important}
#BlogList1 ul li:first-child + li + li + li{width:368px!important;height:64px!important;overflow:hidden}
#BlogList1 ul li:first-child + li + li + li img{width:368px!important;height:368px!important}
#BlogList1 ul li:first-child + li + li + li div.item-title{margin:-373px 0 5px;padding-right:60px;min-height:56px;max-height:56px;opacity:0.90;background: #000 url('http://1.bp.blogspot.com/-auCM3D3AuC8/Uade2vtOhpI/AAAAAAAAKLQ/8RFAqWfGCmo/s1600/arrow-right_namkna-blogspot-com.png')  305px 7px no-repeat!important}
#BlogList1 ul li:first-child + li + li + li div.item-title a{font-size:16px;line-height:1.2em}

#BlogList2 ul{list-style:none;padding:0}
#BlogList2 ul li{padding:0 13px!important;float:left;clear:none;position:relative}

1.5- Tìm code:
<b:section class='main' id='main' showaddelement='no'>
- Them vào trước nó đoạn code bên dưới:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='feature' id='feature' showaddelement='yes'>
  <b:widget id='BlogList1' locked='false' title='Feature' type='BlogList'>
    <b:includable id='main'>
<span class='fade'>        <ul>
          <b:loop values='data:items' var='item'>
            <li>
                <div class='item-content'>
                      <div class='item-thumbnail'>
                        <a expr:href='data:item.itemUrl'>
                          <img expr:src='data:item.itemThumbnail.url'/>
                        </a>
                      </div>
                  <b:if cond='data:showItemTitle == &quot;true&quot;'>
                    <div class='item-title'>
                      <b:if cond='data:item.itemUrl != &quot;&quot;'>
                        <a expr:href='data:item.itemUrl'>
                          <data:item.itemTitle/></a>
                      <b:else/>
                        <data:item.itemTitle/>
                      </b:if>
                    </div>
                  </b:if>
               </div>
            </li>
          </b:loop>
        </ul> </span><div style='clear: both;'/> 
        <b:if cond='data:numItemsToShow != 0'>
          <b:if cond='data:totalItems &gt; data:numItemsToShow'>
            <div class='show-option'>
              <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
              </span>
              <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
              </span>
            </div>
          </b:if>
        </b:if>
  </b:includable>
  </b:widget>
</b:section>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("BlogList1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s300-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>     
<div class='clear'/>
</b:if></b:if>

1.6- Lưu mẫu lại và tiến hành bước 2.

 ¤ Bước 2. Để Featured Posts hiển thị bạn cần phải làm những việc sau.

- Sau khi thực hiện xong bước 1 bạn quay trỏa lại Bố cục (Layout) sẽ thấy có một mục Featured phí trên bài đăng.
2.1 Tìm đến Bloglist widget có tên Featured nhấn Chỉnh sửa (Edit)
2.2- Đánh dấu check vào chính xác 3 dòng sau

  1. Tiêu đề của mục gần đây nhất (Title of most recent item).
  2. Đoạn trích của mục gần nhất (Snippet of most recent item).
  3. Hình thu nhỏ của mục gần đây nhất (Thumbnail of most recent item).
2.3-  Nhấn Thêm vào danh sách (Add to list) để thêm đường link vào trong Bloglist. Có tất cả 4 bài viết nên bạn cần thêm vào chính xác 4 đường link sau.
http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?start-index=1
http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?start-index=2
http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?start-index=3
http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?start-index=4
- Nhớ thay http://namkna.blogspot.com/ bằng tên blog của bạn (VD: namknatest.blogspot.com)
- Bây giờ muốn bài viết nào lên Featured Posts bạn cần gán cho nó nhãn  Blogspot-tips (viết thường, không hoa)
- Nếu bạn muốn lấy cho tất cả các nhãn thì chỉ cần xóa phần màu xanh đi là oke.

» Cập nhật nâng cao chất lượng ảnh Thumbnail.

Như các bạn biết đoạn code trên lấy ảnh thumbnail có kích thước là 72x72 px do vậy hình ảnh to thường sẽ bị mờ để khắc phục bạn có thể dán đoạn code bên dưới vào trước thẻ </body>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("BlogList1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c\//gi, "");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
 Trong đó Bloglist1 là ID của tiện ích vừa thêm ở trên.

Để resite thêm ảnh ở một tiện ích khác ví dụ tiện ích Popularpost bạn có thể sửa đoạn code như sau:
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("BlogList1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c\//gi, "");
bodyText.innerHTML = theText;
bodyText2 = document.getElementById("PopularPosts1");
theText2 = bodyText2.innerHTML;
theText2 = theText2.replace(/s72-c\//gi, "");
bodyText2.innerHTML = theText2;
}replaceText();
//]]>
</script>
Bạn có thể tìm hiểu thêm về đoạn code này ở đây nha. Tăng độ phân giải ảnh thumbnail của blogger
Chúc các bạn thành công.

53 nhận xét:

  1. Có hiển thị được ảnh thumb ko thuộc Picasa ko bạn ?

    Trả lờiXóa
    Trả lời
    1. Hiện tại hiển thị được ảnh thuộc album picasa, ảnh tải lên blog, và video youtobe,

      Xóa
  2. NHỜ NAMTA CHỈ CÁCH SỬA CÁI NÀY VỚI. MÌNH ĐANG SỬ DỤNG 1 TEM KHÔNG PHẢI TỪ NAMTA NHƯNG MÌNH KO BIẾT VỀ CODE NÊN NHỜ NAMTA CHỈ CÁCH. NẾU BẠN CÓ THỜI GIAN CHỈ GIÚP MÌNH CẢM ƠN LẮM.
    -----------
    MÌNH ĐANG SỬ DỤNG 1 TEM KIỂU GIAO DIỆN NHƯ HAIVL.COM
    NHƯNG CỦA MÌNH GẶP VẤN ĐỀ LÀ KHI CLICK VÀO ẢNH KHÔNG ĐƯA NGƯỜI XEM ĐẾN TRANG BÀI RIÊNG CỦA ẢNH ĐÓ (click vào tiêu đề ảnh thì được) MÀ CHỈ HIỆN ZOOM ẢNH TO LÊN. VẬY LÀM THẾ NÀO ĐỂ KHI CLCIK VÀO ẢNH CŨNG NHƯ CLICK VÀO TIÊU ĐỀ BÀI ẢNH ĐỀU ĐƯA NGƯỜI XEM ĐẾN TRANG RIÊNG CỦA BÀI ĐÓ ? NHỜ NAMTA CHỈ MÌNH NHÉ.

    Trả lờiXóa
    Trả lời
    1. QUÊN KO DẪN BLOG MÌNH: http://buoncuoivl.blogspot.com/

      Xóa
    2. Mỗi blog có 1 tiện ích autoreadmore khác nhau.
      hãy ghi rõ yêu cầu và gửi template vào mail tavannam01@gmail.con mình sẽ sửa giúp.

      Xóa
  3. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  4. Mình add code vào bị lỗi, admin kiểm tra lại giúp mình với!
    Mình đang rất cần...

    Trả lờiXóa
    Trả lời
    1. Owqr bước 1.5 nếu thêm vào trước đoạn <b:section class='main' id='main' showaddelement='no'> mà báo lỗi thì hãy thêm vào sau nó nha.

      Xóa
    2. Mình làm được rồi, nhưng slider nhìn không động nên hơi cứng, không có hiệu ứng chuyển động như trong Start của Win 8 bạn nhỉ?

      Xóa
    3. Đây là dạng tùy biến trên CSS nhằm tối ưu tốc độ tải. nếu bạn muốn hiển thị chuyển động ta phải dùng JQuery và javar sẽ làm chậm blog đi bạn ak.

      Xóa
  5. Mình thêm cả trước & sau đều lỗi như này bạn à :
    "More than one section was found with id: feature. Section IDs should be unique."
    :D
    Làm sao b giờ :)

    Trả lờiXóa
    Trả lời
    1. Thông báo lỗi này tức là blog của bạn đã có một tiện ích có id là feature Mình không có URL blog của bạn nên đoạn blog của bạn có một tiện ích future post khác. Khắc phục bằng 1 trong 2 cách.

      1- Gỡ tiện ích cũ trước khi thêm tiện ích này.

      2- Thay thế toàn bộ các từ feature xuất hiển trong 2 đoạn code ở hướng dẫn trên thành feature-post1

      Xóa
  6. nên phát triển nhiều thế loại như này dựa trên bloglist
    tks bạn

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bạn mình sẽ cố gắng phát triển nhiều loại hơn.

      Xóa
  7. cảm ơn nhé mình làm dc rồi :D http://www.idmviet.com

    Trả lờiXóa
  8. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  9. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  10. trong template của e không có đoạn code 1.5 thì làm sao zậy anh nam

    Trả lờiXóa
    Trả lời
    1. Đoạn đó có thể khác biệt chút tìm với từ khóa class='main' id='main' hoặc blog1 là sẽ thấy ngay.

      Xóa
  11. Sao của mình làm như hướng dẫn mà View k thấy có bài viết nhỉ bạn? Chỉ hiển thị ra mỗi cái khung thôi. Mình đã bỏ cả cái "/-/Blogspot-tips" mà cũng chẳng hiện ra gì cả.

    Trả lờiXóa
    Trả lời
    1. Nó chỉ hiển thị với các blog để chế độ puplish cho nhiều người xem thôi nha bạn. VÌ nếu đẻ chế độ giới hạn feed lấy bài sẽ không hoạt dộng.

      Xóa
  12. Chào bạn !
    Cảm ơn bạn về bài viết rất hay, nhưng khi mình điều chỉnh lại kích thước hiện ảnh cho vừa với contern thì các ảnh hiển thị nhòe, bạn giúp mình khắc phục lỗi này với ah

    Trả lờiXóa
  13. Bạn có thể vào blog www.lcd10.com để xem chi tiết các hình bị nhòe với ah, kích thước hình ảnh rộng 298px cao 200px.
    Cảm ơn bạn!

    Trả lờiXóa
    Trả lời
    1. Bạn có thể chỉnh sửa đoạn:

      theText = theText.replace(/s72-c/gi, "s300-c");

      s72 và s300 bạn có thể thay thế thành s1200 hoặc s1600 hay s400 tùy ý bạn nha,

      Xóa
    2. Cảm ơn bạn đã hướng dẫn.
      Nhưng khi mình các thông số như bạn đã hướng dẫn hình vẫn bị vỡ và nhòe bạn ah! :(
      Rất mong bạn chỉ dẫn thêm.
      Cảm ơn bạn nhiều !

      Xóa
    3. Mình thay amin nha. Ví dụ bạn chỉnh sửa thành:

      theText = theText.replace(/s72-c/gi, "s500-c");

      hoặc:

      theText = theText.replace(/s72-c/gi, "s1600-c");

      Xóa
    4. Cảm ơn các bạn đã hướng dẫn, nhưng thật đáng tiếc dù cố gắng thay đổi thông số từ "s300-c"tới "s1800" mà hình ảnh hiển thị vẫn bị vỡ và bị nhòe bận ah :( !!

      Xóa
    5. Oke để mình tesst lại code coi sao nha bạn,

      Xóa
    6. Cảm ơn bạn nhiều! Rất mong nhận được sự giúp đỡ của bạn!

      Xóa
    7. Hôm nay ngồi mới thấy nhận xét này bạn thêm đoạn bên dưới vào trước thẻ </body>

      <script type='text/javascript'>
      //<![CDATA[
      function replaceText(){if(!document.getElementById){return;}
      bodyText = document.getElementById("BlogList1");
      theText = bodyText.innerHTML;
      theText = theText.replace(/s72-c\//gi, "");
      bodyText.innerHTML = theText;
      }replaceText();
      //]]>
      </script>

      Nếu không muốn resize thêm tiện ích nào nữa thì bạn thêm đoạn code tương tự nha. Ví dụ:

      <script type='text/javascript'>
      //<![CDATA[
      function replaceText(){if(!document.getElementById){return;}
      bodyText = document.getElementById("BlogList1");
      theText = bodyText.innerHTML;
      theText = theText.replace(/s72-c\//gi, "");
      bodyText.innerHTML = theText;
      bodyText2 = document.getElementById("PopularPosts1");
      theText2 = bodyText2.innerHTML;
      theText2 = theText2.replace(/s72-c\//gi, "");
      bodyText2.innerHTML = theText2;
      }replaceText();
      //]]>
      </script>

      Xóa
    8. Giờ thì tất cả các ảnh có size 72 đó thay đổi về kích thước ban đầu.

      Xóa
    9. cảm ơn bạn nhiều

      Xóa
  14. sao mình không index được cả 4 cái mà chỉ được có 1 cái nhỉ, 4 cái toàn báo lỗi k load được trang, mong bạn giúp đỡ

    Trả lờiXóa
    Trả lời
    1. Do feed của bạn có dung lượng quá lớn nên không tải hết được bài viết hãy đọc bài viết sau để hiểu nguyên nhân và cách khắc phục nha: Sửa lỗi "feed filesize is larger than 576K..." khi đăng ký FeedBruner

      Xóa
  15. Bạn có thẻ tạo 1 code đơn giản để chèn vào widget giống như vậy mà mình có thể thay link, hình ảnh tùy thích ý mình đc ko?
    vì mình muốn slide như vậy, nhưng muốn hiển thị những bài mình muốn thui

    Trả lờiXóa
  16. Đoạn code này có ưu điểm hơn những đoạn code được chèn vào trong tiện ích HTML là nó sử dụng chính tiện ích feature post của blogger nên không cần phải can thiệp và sử dụng thêm nhiều code java từ bên ngoài rất có lợi cho tăng tốc độ load của blog bạn ak,

    bạn có thể so sánh ưu thế của nó so với cac thử thuật được chèn trong tiện ích HTML ở đây XEM

    Trả lờiXóa
  17. Cái này cũng hay mà mình không làm được, thấy rắc rối lắm. Có cách nào kiểu như này mà dễ làm hơn không bạn !

    Trả lờiXóa
    Trả lời
    1. Cách này là đơn giản nhất mà bạn bạn chỉ cần thêm 2 đoạn mã css và xml vào vị trí mà bạn muốn còn linl bài viết thì thêm trong phần bố cục.

      Cụ thể bạn gặp lỗi ở phần nào bạn hãy nói đẻ mình hỗ trợ nha bạn.

      Xóa
  18. bạn ơi, sau khi làm theo các hướng dẫn trên, blog của mình bị lỗi như hình này . Bạn chỉ mình cách khắc phục với

    Trả lờiXóa
    Trả lời
    1. Không liên quan gì đến thủ thuật cả, lỗi đó sảy ra khi blogger đang trong quá trình bảo trì định kì. Bạn chờ khoảng 5 phút sau truy cập trở lại là được thôi mà .

      Xóa
  19. Mình làm đúng mọi thứ nhưng nó ko hiện lên, Namkna có thể xem giúp mình được ko? web của mình là vncanho.com mình muốn chèn thay thế cái bài viết xem nhiều nhất ở trên đầu

    Trả lờiXóa
    Trả lời
    1. Mình vào trang của bạn và thấy rằng bạn chưa áp dụng nên trước mắt không thể đưa ra biện pháp cho bạn được.

      Xóa
  20. thank Namkna mình test trên http://batdongsanlive.blogspot.com/ vì sợ nếuko thành công sẽ làm hỏng site. Namknam xem dùm mình nhé

    Trả lờiXóa
    Trả lời
    1. Bạn sửa 2 đoạn:

      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>

      thành:

      <b:if cond='data:blog.pageType == &quot;index&quot;'>


      - Tiếp tục sửa đoạn:

      </b:if></b:if>

      thành;

      </b:if>

      - Lưu ý những đoạn đó ở bước 5 nha.

      Xóa
    2. - Cảm ơn Namkna, nhưng cũng không được rồi, để mò mò sau vậy
      - Tiện đây cho mình hỏi: cũng theme đó www.vncanho.com, mình muốn "widget popular-posts" thành popular-posts nhưng theo nhãn thì sửa lại phần nào, theme mình dùng là theme nàyhttp://www.soratemplates.com/2013/06/modernblog-blogger-template.html#.UzBYL86rPa4
      - ah...Lúc ban đầu lọ mọ sau mình làm mất luôn cái bài viết liên quan. GIờ ko biết chỉnh lại làm sao.

      Xóa
    3. Tiện ích popularpost lấy bài dựa trên feed hiện tại thì không thể lấy theo nhãn bạn ak.

      Về phần bài viết liên quan bạn kiểm tra lại đoạn mã javarscript của thủ thuật ở trước thẻ đóng /head nếu không còn thì tải mẫu cũ theo link của bạn về mở ra để lấy đoạn mã đó nha bạn.

      Xóa
    4. Mình muốn hiện 1 bài viết có hình và link cụ thể thì làm sao bạn, chứ k muốn hiện mới nhất vậy

      Xóa
  21. Anh ơi em add link vào nhưng k save được. Nó báo là Chúng tôi không thể thêm đăng ký vào danh sách blog của bạn. Hãy thử lại sau vài giây.

    Trả lờiXóa
    Trả lời
    1. Tiện ích này trong thời gian này sẽ không thực hiện được nhé, vì Google đang bị lỗi nha bạn!

      Xóa