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

Bữa nay mình chia sẻ nhanh tiện ích này cho các bạn.

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

tìm đến thẻ ]]></b:skin> và đặt trước nó

/* 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzwhY0SQ3M4RZFZhH7rJdyguyIgYajzKf9fB0zLDtQravLtdWNeurjpvJuYb-_-dGy8EVV9wwI9wDom7NFOuVm8WnstuXA8x00WGDgyy_6LRP71HPLVZlKtMIXHL_317yopISa7FJVzMc/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.