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 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNhcCYvj6EITfm8lpdp-qw7Lqhe8sjY5wEALp_NY-JYgWYupIarUHFeFBtzhFN9dpvgUOwAMt9iqm7LZ2NuLMF3nrvGCo4ahDu3krGXrZNXt4oCQH60Zq3IuOYJmCegF_NmySap-pjPw/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.