Tiện ích bài HOT responsive cho Blogger

Mới hôm qua mình có bài viết tham khảo các bạn về tiện ích bài HOT mới mà mình vừa hoàn thành trên blog. Bữa nay mình chia sẻ nhanh tiện ích này cho các bạn vì cũng chã có nhiều thời gian để đăng bài. Được công ty cho đi học nhiều hội thảo cũng khá hay, mà nó cũng chiếm dụng hết thời gian viết blog luôn.

Tiện ích bài HOT responsive cho Blogger
Tiện ích bài Hot cho Blogger
Tiện ích bài HOT này là tiện ích mình viết lại tiện ích bài đăng phổ biến có trên blog theo cách riêng của mình, ảnh thumbnail được mình viết ra một script nhỏ tự động resize lại ảnh, với script này bạn có thể sử dụng cho cả Auto Readmore nữa. Với giao diện theo mình là tương đối OK, nhưng cũng có nhiều bất cập về ảnh thumbnail mà nhiều người cũng phản hổi mình sẽ có gắng cập nhật sao cho vừa ý hết mọi người.

Không dài dòng nữa mời các bạn làm theo hướng dẫn sau đây để thêm tiện ích bài HOT được viết theo phong cách responsive cho Blogger.

Tiện ích bài HOT responsive cho Blogger

Mình ở đây chia sẻ đoạn mã đó thôi, còn đặt nó vào đâu là tùy thuộc vào bạn vì mỗi blog mỗi khác nhé. Đầu tiên truy cập vào chỉnh sửa HTML template của bạn, tìm đến thẻ ]]></b:skin>
/* CSS HOT BOX */
#hotposts *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#hotposts ul,#hotposts li{padding:0;margin:0;list-style:none;position:relative}
#hotposts ul{height:320px}
#hotposts li{width:50%;height:100%;position:absolute;display:none}
#hotposts li:nth-child(1), #hotposts li:nth-child(2), #hotposts li:nth-child(3), #hotposts li:nth-child(4), #hotposts li:nth-child(5){display:block}
#hotposts li:nth-child(1){left:0;top:0}
#hotposts li:nth-child(2){left:50%;width:25%;height:50%}
#hotposts li:nth-child(3){left:75%;width:25%;height:50%}
#hotposts li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#hotposts li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#hotposts li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:15px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#hotposts li:nth-child(1) .hotp_text {font-size:30px;display:block;top:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#hotposts li:nth-child(1) span.hotp {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#hotposts a{display:block;width:100%;height:100%;overflow:hidden}
#hotposts img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#hotposts li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#hotposts .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#hotposts h4{position:absolute;bottom:10px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#hotposts .hotp_text{font-size:12px;color:#fff;top:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;display:none;}
#hotposts li:nth-child(2) .autname,#hotposts li:nth-child(3) .autname,#hotposts li:nth-child(4) .autname,#hotposts li:nth-child(5) .autname{display:none;}
#hotposts .overlayx,#hotposts li{transition:all .4s ease-in-out}
#hotposts li:nth-child(1) .overlayx{display:none;}
#hotposts li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#hotposts li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #hotposts ul{height:600px}
  #hotposts li:nth-child(1){width:100%;height:50%}
  #hotposts li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #hotposts li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #hotposts li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #hotposts li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#hotposts li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
đây là đoạn css chỉnh lại giao diện của cái tiện ích bài HOT của mình.

Bước quan trọng tiếp theo, chèn đoạn mã này vào nơi mà bạn muốn tiện ích này xuất hiện, ví dụ sau đây mình sẽ hướng dẫn các bạn chèn lên trên widget Blog, bạn tìm đến đoạn mã sau đây
<b:widget id='Blog1'
và chèn lên trên nó đoạn mã này
<b:widget id='PopularPosts2' locked='false' title='Bài đăng phổ biến' type='PopularPosts'>
    <b:includable id='main'>
<script type='text/javascript'>//<![CDATA[
//Resize Thumbnail
function hp_thumbnail_resize(image_url,post_title) {
    var image_size=600;
    var show_default_thumbnail=true;
    var default_thumbnail="http://1.bp.blogspot.com/-4fqrt2MACHQ/UADPlJjibiI/AAAAAAAAAcc/FBN03q3jT2A/s1600/blank_post_thumbnail.png";
    if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
    image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" alt="'+post_title+'"/>';
    yimage_tag = '<img src="' + image_url.replace('default', '0') + '" alt="' + post_title + '"/>';
    if (image_url.indexOf("img.youtube.com")!= -1){
      return yimage_tag;
    }
    else if (image_url != "") {
      return image_tag;
    }
    else
    return "";
}

//]]></script>
<div id='hotposts'>
    <ul>
      <b:loop values='data:posts' var='post'>
        <li>
          <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
            <div class='overlayx'/>
            <script type='text/javascript'>
            document.write(hp_thumbnail_resize(&quot;<data:post.thumbnail/>&quot;,&#39;<data:post.title/>&#39;));
            </script>
            <h4><data:post.title/></h4>
          </a>
          <div class='hotp_text'>
              <span class='hotp'>HOT</span>
          </div>
        </li>
      </b:loop>
    </ul>
</div>
</b:includable>
</b:widget>
lưu lại và bạn sẽ thấy nó xuất hiện ngay trên bai viết đầu tiên trên blog. Do giao diện được viết responsive nên bạn có thể đặt ở bất kì đâu mà không lo phải tự chỉnh lại giao diện, bạn có thể đặt nó vào sidebar, footer, hoặc những nơi khác.

Sau khi chèn xong bạn có thể vào phần "Bố cục" trong blog của bạn, chỉnh sửa tiện ích "Bài đăng phổ biến" chỗ mà bạn chèn mã vào ví dụ ở trên là trên widget Blog, và thay đổi lại số lượng bài viết thành 5 để tối ưu hơn về tốc độ, Javascript đỡ phải chạy nhiều.

Đây là một trong những widget cực đơn giản chỉ cực ở mỗi cái CSS thôi, nếu như bạn nào có ý thích riêng, và muốn chèn vào một vị trí nào đó mà không biết chèn, hãy để lại nhận xét ở dưới hoặc liên hệ trực tiếp với mình để được hỗ trợ.

P/S: Tiện ích này được viết từ widget mặc định chỉ thêm vào một ít Javascript để resize ảnh nên tốc độ của nó hoạt động rất nhanh, bạn sẽ không cảm thấy sự thay đổi về tốc độ trên blog của bạn.

12 bình luận

  1. avatar says

    23:52 Ngày 22 tháng 10 năm 2014

    Nếu có tiện ích bài viết nổi bật rồi thì sẽ chèn cái này vào không được. Em đã thử và thất bại . Cái này chỉnh đúng với những trang chưa có cài đặt tiện ích bài viết nổi bật thôi anh . Hy vọng anh có thể sửa lại để phù hợp hơn

  2. avatar says

    08:02 Ngày 23 tháng 10 năm 2014

    Em thử thay PopularPosts1 thành 2 xem, anh đang trên công ty rồi nên không test được.

  3. avatar says

    13:52 Ngày 12 tháng 11 năm 2014

    mình muốn nó hiển thị như vậy nhưng bài viết hiển thị mình tự chọn thì sao bạn?

  4. avatar says

    20:53 Ngày 12 tháng 11 năm 2014

    Vậy thì bác phải chèn thủ công thế này thôi, cứ lặp thủ công lại thẻ "li"
    <div id='hotposts'>
    <ul>
    <li>
    <a href='link_bài' rel='bookmark'>
    <div class='overlayx'/>
    <img src='link_ảnh'/>
    <h4>Tiêu đề bài viết</h4>
    </a>
    <div class='hotp_text'>
    <span class='hotp'>HOT</span>
    </div>
    </li>
    <li>
    <a href='link_bài' rel='bookmark'>
    <div class='overlayx'/>
    <img src='link_ảnh'/>
    <h4>Tiêu đề bài viết</h4>
    </a>
    </li>
    </ul>
    </div>

  5. avatar says

    17:06 Ngày 12 tháng 12 năm 2015

    admin cho mình hỏi là tại sao cái widget mình cho đoạn code quảng cáo vào rồi, nhưng sao web không xuất hiện quảng cáo vậy admin ơi ?

  6. avatar says

    19:19 Ngày 13 tháng 12 năm 2015

    Bạn nói như vậy thì thiếu thông tin quá mình không thể giải thích cho bạn được :D Bạn xài quảng cáo nào, domain là gì, mã quảng cáo thế nào?

  7. avatar says

    07:19 Ngày 14 tháng 12 năm 2015

    day la code quang cao cua GA ne admin :


    mình không hiểu tại sao có lỗi này, nếu mình đưa code quảng cáo này vào web khác thì nó vẫn chạy, không biết là do cái template bị lỗi gì đó, phải không ad ?

  8. avatar says

    07:26 Ngày 14 tháng 12 năm 2015

    ua sao khi dan code quang cao GA thi khong duoc comment vay ad ?

  9. avatar says

    10:13 Ngày 14 tháng 12 năm 2015

    Không, tại nội dung đó Google chưa kiếm được quảng cáo phù hợp thôi bạn ạ. Khi đặt mã vào một website Google bắt đầu quét sơ qua nội dung trang web có ok không để kiếm quảng cáo thích hợp. Ngoài ra bạn có thể kiểm tra trong Adsense coi có block url hay cho phép url đó sử dụng chưa.

  10. avatar says

    10:14 Ngày 14 tháng 12 năm 2015

    Ở blogspot bạn muốn comment thẻ HTML vào thì không được nhé :D Bạn muốn hiện mã bình thường thì bạn phải convert nó tại đây http://www.kslzone.net/p/function-esctool-return-document.html

  11. avatar says

    17:09 Ngày 14 tháng 12 năm 2015

    đây blog của em đây bác vào xem giúp em, chứ thật sự là đưa code quảng cáo công ty khác cũng không xuẤT hiện ad ơi, sportnewseveryday@gmail.com (top109876),

  12. avatar says

    19:14 Ngày 14 tháng 12 năm 2015

    Cái này thì mình chắc là bạn vi phạm chính sách của Google rồi, đặt quá nhiều quảng cáo. Nội dung thì mình không chắc, có thể một phần nhỏ có khả năng bị Google blacklist :D

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.