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.

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ   
Phụ trách thiết kế : Mr.Mika 
Call me : 0926.340.479 - 0927.927.000 - Email :  Lienhe365@gmail.com 
Phụ trách kỹ thuật và kinh doanh : Mr. Sơn
Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com