Tiện ích Magazine Recent Posts cho Blogger

Tiếp tục chủ đề tạo tiện ích Recent Posts cho Blogger, bài viết này sẽ giới thiệu Recent Posts đẹp mắt mang phong cách báo chí, được phát triển bởi Fandung – một blogger trẻ tiềm năng trong giới Blogger Việt Nam.

Recent Post mang phong cách Quantrimang.

 

 
Minh họa cho list1=1

Thực hiện :
1.Vào Thiết Kế >> Phần Tử trang >>
2. Tạo 1 widget HTML\JavaScript và dán code bên dưới 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(http://quantrimang.com.vn/App_Themes/default/images/left_wbox_03.jpg) no-repeat left top; 
    padding-left:3px; 
} 
.wbox .tr { 
    background:url(http://quantrimang.com.vn/App_Themes/default/images/right_wbox_03.jpg) no-repeat right top; 
    padding-right:3px; 
} 
.wbox .tc { 
    background:url(http://quantrimang.com.vn/App_Themes/default/images/mid_wbox_03.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(http://quantrimang.com.vn/App_Themes/default/images/left_contannerbox.jpg) repeat-y left top; 
    padding-left:3px; 
} 
.wbox .mr 
{ 
    background:url(http://quantrimang.com.vn/App_Themes/default/images/right_contannerbox.jpg) repeat-y right top; 
    padding-right:3px; 
} 
.wbox .mc {background-color:#FFFFFF;} 
.wbox .bl 
{ 
    background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomLeft_wbox.jpg) no-repeat left top; 
    padding-left:3px; 
    height:5px; 
} 
.wbox .br 
{ 
    background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomright_wbox.jpg) no-repeat right top; 
    height:5px; 
    padding-right:3px; 
} 
.wbox .bc 
{ 
    background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomMiddle_wbox.jpg) repeat-x left top; 
    height:5px; 
    font-size:0; 
    line-height:5px; 
} 
.Tin_lienquan ul,.Tin_lienquan 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://kythuatcongtrinh.blogspot.com/"; 
                  label = "Phong Thủy Nhà Ở"; 
                  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://kythuatcongtrinh.blogspot.com//label/Phong Thủy Nhà Ở">Tin học văn phòng</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="https://sites.google.com/site/itechroot/javascripts/rc-post-qmt.txt"></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>

Thay đoạn code in đậm cho phù hợp với Blog bạn, cần lưu ý :
- list1 : số bài viết có hiện ảnh thumbnail kèm trích dẫn
- mode :

• mode=”label” : áp dụng cho Label
• mode=”blog” : áp dụng cho cả Blog
• Bạn thay tên blogs mình thành blogs bạn.
• Thay tên nhãn thành tên nhãn bạn.

Chúc các bạn thành công !

Posted in: Thủ Thuật Blogspot