Hiển thị bài viết dưới dạng Grid hoặc List

Nếu bạn áp dụng thủ thuật trong bài viết này hãy kết hợp với Auto readmore có hình ảnh thu nhỏ để đạt được kết quả tốt và đẹp nhất cho blog của bạn.

Chế độ Grid: Mặc định khi độc giả truy cập blog của bạn sẽ hiển thị bài đăng dưới dạng Grid, tức là sẽ hiển thị tiêu đề bài viết kèm với hình ảnh thu nhỏ. Có lẽ thủ thuật này phù hợp dành cho những blog chuyên về hình ảnh và phim hơn

Chế độ List: Đây là chế độ xem mặc định template của bạn

Làm thế nào để cài đặt tiện ích vào template?

Bước 1: Tìm đoạn code 

<b:section class='main' id='main' showaddelement='yes'>

hoặc :

<b:section class='main' id='main' showaddelement='no'>

trong template sau đó dánh trước nó đoạn code bên dưới :

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='switch'>
  <div class='switch-left'>
    <span style='color: #CC0000;'>Recent</span> Post
  </div>
  <div class='switch-right'>
    <a class='bar_view' href='#'>Grid</a>
    <a class='dat_view' href='#'>List</a>
  </div>
</div>
</b:if></b:if>

Bạn có thể tùy chỉnh đoạn được đánh dấu cho phù hợp với blog của mình

Bước 2: Tìm đoạn code 

<div class='post hentry uncustomized-post-template'> 

hoặc 

<div class='post hentry'>

sau đó thêm class bar cho nó. Sau khi thêm code trên sẽ có dạng như sau

<div class='post bar hentry uncustomized-post-template'>

Hoặc :

<div class='post bar hentry'>

Bước 3: Dán đoạn code bên dưới trước thẻ đóng : </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://vietconsinfo.googlecode.com/svn/switch-display.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
 * jQuery switch
 * active class active pada switch grid atau list
 * http://www.vietcons.info
 * https://plus.google.com/103062579774076611071
 *
 */
jQuery(document).ready(function () {
    var $box=jQuery(".post"),
        $bar=jQuery("a.bar_view");
    $dat=jQuery("a.dat_view");
    $dat.click(function () {
        $box.removeClass("bar");
        jQuery(this).addClass("active");
        $bar.removeClass("active");
        jQuery.cookie("dat_style", 0);
        return false
    });
    $bar.click(function () {
        $box.addClass("bar");
        jQuery(this).addClass("active");
        $dat.removeClass("active");
        jQuery.cookie("dat_style", 1);
        return false
    });
    if(jQuery.cookie("dat_style")==0) {
        $box.removeClass( "bar");
        $dat.addClass("active")
    } else {
        $box.addClass("bar");
        $bar.addClass("active")
    }
});//]]>
</script>

Lưu ý: Nếu trong template của bạn đã có jQuery rồi thì xóa đoạn được đánh dấu đi

Bước 4: Thêm CSS vào sau thẻ : ]]></b:skin>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
/*FONT PT Sans Narrow*/
@font-face {
    font-family:'PT Sans Narrow';
    font-style:normal;
    font-weight:400;
    src:local('PT Sans Narrow'),local('PTSans-Narrow'),
url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format('woff');
}
/* CSS Untuk Tombol Switch*/
.switch {
 border-bottom:5px solid #CC0000;
 height:35px;
 color:#444;
 margin:0 10px;
 padding:5px 9px;
 text-transform:uppercase;
}
.switch-left {
 width:360px;
 float:left;
 margin:0 auto;
 padding-top:5px;
 font:20px PT Sans Narrow;
 text-shadow:1px 1px 0 #000;
 color:#AAA;
}
.switch-right {
 width:120px;
 float:right;
 margin:0 auto;
 padding-top:10px;
}
.switch a {
 border:1px solid #999;
 font:11px Arial;
 padding:3px 8px 3px 25px;
 text-transform:none;
 color:#aaa;
}
a.bar_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlH2LAfM_Z4b6WCde5EI3y1lBYe0nyQhfnxEfS6W2wuH_cyL-0OTncew-D3DrQ4lODbJmXqrIqqTzlJmAgR89nJiYpjai1MbK16kxU6bwuXTJkP5jqu5xjRcdVCOkbbV-BUU2_JaKqjkXp/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkESGDCfV5t30IvJt9xqOo6ms-1Cv-3KlosaXeWMBlyMuCt1CEvNX6ckmSBJoWIrMnWAx44HVI2kwBOJjtAPPOXiY_7d_FN28B-8OqK7YTq0kKgoCAYGcz1QdvBdFBPkjcR0cHTjHTnzI6/s1600/listed.gif) no-repeat 3px center;
}
.switch a.active {
 background-color:#aaa;
 border:1px solid #999;
 color:#111;
 cursor:default;
}
/* CSS Bar untuk bagian grid */
.bar {
    background-color:rgba(0,0,0,0.3);
    border:1px solid #000;
    box-shadow:0 0 0 1px #333;
    -moz-box-shadow:0 0 0 1px #333;
    -webkit-box-shadow:0 0 0 1px #333;
    -o-box-shadow:0 0 0 1px #333;
    display:inline;
    float:left;
    height:160px;
    list-style:none;
    margin:10px 0 0 9px;
    overflow:hidden;
    padding:2px 3px 5px;
    position:relative;
    text-align:center;
    width:160px;
}
.bar h3 {
    height:30px;
    border:0 none;
    line-height:8px;
    margin:0 5px 5px;
    padding:2px;
    text-shadow:1px 1px 0 #000;
}
.bar h3 a {
    font:14px PT Sans Narrow;
    text-align:center;
    line-height:16px;
}
.bar h3 a:hover {
    color:#c1541a;
}
.bar .post-body {
    background:none;
    height:245px;
    overflow:hidden;
    width:167px;
    padding:0;
    margin:0 0 .3cm;
}
.bar img {
    float:left;
    height:110px;
    margin:0 18px;
    width:110px;
}
</style>
</b:if></b:if>

Bước 5: Lưu lại template