Tiện ích recent posts kì này khác với tiện ích VnE Tab Recent posts. Nhưng ở bản lần này sẽ có 2 điểm khác biệt, đó là các bạn có thể tùy chỉnh số bài viết có ảnh thumbnail, và điểm chú ý ở thủ thuật này là sẽ có ảnh gif minh họa cho bài viết mới. Mới ở đây là trong phạm vi 1 ngày.
Bạn có thể xem Demo:


Tab recent posts giống trang quantrimang
Anh minh họa
Tab recent posts giống trang quantrimang
- Qua demo các bạn có thể thấy tiện ích có 2 phần, 1 phần hiển thị bài viết có ảnh thumbnail, phần 2 là các biết viết dạng list. Như đã nói ở trên, các bài viết xuất bản trong ngày sẽ có ảnh gif chú thích là bài viết mới. Nếu số bài viết hiển thị dạng thumbnail là 1 thì bạn cần phải có ít nhất 2 bài viết được xuất bản trong ngày thì ảnh gif minh họa mới hiển thị.
- Biến list1 để tùy chỉnh số bài viết dạng thumbnail, và còn lại sẽ là dạng list.

* Tab recent posts giống trang quantrimang :

1. Vào bố cục (Layout)
2.Chọn Thêm tiện ích (Add widget)
3. Tạo widget HTML/javascript ở nơi bạn muốn hiển thị và dán code của thủ thuật vào:
<style type="text/css">
.wbox {background-color:#ffffff;width:auto;height:auto;}
.wbox.Cat {width:500px;height:auto;margin-bottom:5px;}

.wbox .tl {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiticEduwiH0lPiXSlnUEmyk77i_fQ6e5bTMjoZyOE-joTdu5xd17xHzXDCmyENXvCZstiw_ScC5PPVawyXL1zFLbG5nLZuFYG926-tdXM-vK7ygnOnjxF_xB_XcBuEMoU0Hzg3rQwv/s1600/left_wbox_03-namkna-blogspot-com.jpg) no-repeat left top;
 padding-left:3px;
}
.wbox .tr {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicLrkmOtrejbwsFFGwospd5NVvMitrWOOnBeF1Jyp0zoAZRYZhkicAUCg0AnXZspOClJf9GdZYWRjLGOUsuzo-6lJLnHOcFaHBzK0-Rok0u48DR8D2wBFV9g5VGz9qo0Mo1FlHGxOw/s1600/right_wbox_03-namkna-blogspot-com.jpg) no-repeat right top;
 padding-right:3px;
}
.wbox .tc {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkOuBjDB2H-RVzCaa-WxI78fC4_IJIpwdjqu_PCtFYwaYkyUP_KYcp6nc1ZVThiQCAw0O-_mAYpEoLIdn5EgQEzU9STt92QL3g6SldZpE_5ApF_PrDBeeEm8dYWfo725X48acym8_J/s1600/mid_wbox_03-namkna-blogspot-com.jpg) repeat-x left top;
 height:23px;
 color:#246296;
 font-size:12px;
 text-transform:uppercase;
 font-weight:bold;
 padding-top:5px;
 padding-left:7px;
}
.wbox .tc a {text-decoration:none;color:#246296;}
.wbox .ml {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-Z7kLqZvp5rR6o4IlKGzJ4Ae8x2PLJZJX9fjEHaaMZgp130sQjxHNZIf5nzhuuAzTU2okrBhSE5ezm-zH-Fi2zbq76Ip5uQsvi8mN2MbbH5iut1fWyVVrdzGoYCfZWnt-qrMNUMu/s1600/left_contannerbox-namkna-blogspot.jpg) repeat-y left top;
 padding-left:3px;
}
.wbox .mr
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJl2r6ijMU8islCRMTSROFQ1xahc_26dUSrxpOPqUCY0WkqscyQQSAnmpQ6UgKKPM6LVX0-6UwT3Lqmf3ZdWVicBF_IWZRRsDoCX1NuTaHK5_hbgK1cE34UPFtBRMy8U1i8DA9yXi1/s1600/right_contannerbox-namkna-blogspot.jpg) repeat-y right top;
 padding-right:3px;

}
.wbox .mc {background-color:#FFFFFF;}
.wbox .bl
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBeRk16-Ry37Y9h5mkz94MDxvoycPjpXpU8LSpd9ERnlYojnwUmixo1Gz7QB4VW_Sm7sAHwQKwGsc96fix-YyCW6VPDeBtkb8aOk0p_urWGlRor1hLbqS4BPr12v0fiqVDHNBVQb18EgUv/h120/bottomLeft_wbox-namkna-blogspot-com.jpg) no-repeat left top;
 padding-left:3px;
 height:5px;
}
.wbox .br
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6iagYm_LYzXKqdYYuA9QA_tkLnjwdMWJzz4r6n17ZhC1k55s2bau4cDFbeXT3av6ET5J1TRA5pluVE4wUI7OFeVDnl1W98SeKNHiL_qt-lWJzCG2JagJMf7WG9YwT34O9v11NoOf/s1600/bottomLeft_wbox-namkna-ngoctra.jpg) no-repeat right top;
 height:5px;
 padding-right:3px;
}
.wbox .bc
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6iagYm_LYzXKqdYYuA9QA_tkLnjwdMWJzz4r6n17ZhC1k55s2bau4cDFbeXT3av6ET5J1TRA5pluVE4wUI7OFeVDnl1W98SeKNHiL_qt-lWJzCG2JagJMf7WG9YwT34O9v11NoOf/s1600/bottomLeft_wbox-namkna-ngoctra.jpg) repeat-x left top;
 height:5px;
 font-size:0;
 line-height:5px;
}
.Tin_lienquan ul li {list-style:none;}
.Title_article {
 color:#246296;
 font-size:12px;
 font-weight:bold;
 padding-top:10px;
 padding-bottom:10px;
 padding-left:5px;
}
.Title_article {text-decoration:none;color:#246296;}
.Title_article a {text-decoration:none;color:#303030;}
.Title_article a:hover {color:#990000; text-decoration:none;}
.imgModule {padding-left:5px;}
.imgModule img {width:120px; margin-right:5px;}
.imgModule a {text-decoration:none;}

.Tin_lienquan {
 color:#797979;
 font-size:11px;
 padding-top:15px;
 font-family:Tahoma;
    padding-left:5px;
}
.Tin_lienquan a {text-decoration:none; color:#004784;}
.Tin_lienquan a:hover {text-decoration:none;color:#CC3300;}
</style>

   <script type="text/javascript">
                  home_page = "http://namkna.blogspot.com/";
                  label = "Blogspot-tips";
                  numposts = 6;
           list1 = 1;
                  sumPosts = 268;
           mode = "label";
      </script>

<div class="wbox Cat">
<!-- Header widget -->
<div class="tl"><div class="tr"><div class="tc"><a href="http://namkna.blogspot.com/search/label/Blogspot-tips">Blog Tips</a></div></div></div>
<!-- END Header widget -->

    <div class="ml">
        <div class="mr">
            <div class="mc">
<!-- noi dung cua tien ich -->
 <script type="text/javascript" src=" http://namkna1.googlecode.com/files/rc-post-qmt.js"></script>
<!-- END noi dung cua tien ich -->
            </div>
        </div>
    </div>

<!-- Footer widget -->
    <div class="bl"><div class="br"><div class="bc"></div></div></div>
<!-- END footer widget -->
</div>
Trong đó: 
  • biến mode để tùy chỉnh dạng hiển thị theo nhãn hoặc cho cả blog
  • Nếu mode=”blog”; thì sẽ là cho cả blog
  • Nếu mode=”label”; thì sẽ là cho 1 nhãn nào đó. Nếu sử dụng mode ="label"; thì bạn thay label = "Blogspot-tips"; trong đó Blogspot-tips là tên nhãn muốn hiển thị.
Lưu ý: Để tránh tình trạng File Js bị die do hết băng thông bạn nên Download File Js v sau đó Upload lên host riêng để sử dụn. nếu chưa có host thì bạn xem Bài nay.
Chúc các bạn thành công.
Theo: mothuthuat.