Hiện thị bài viết ở trang chủ dưới dạng List và Grid ở trang chủ

Các blog Indonexia thường đặt chế độ hiện thị dưới dạng hình ảnh và danh sách có thể chuyển đổi qua lại trông rất đẹp. Hôm nay mình giới thiệu với các bạn cách để thực hiện thủ thuật này.

VIEW DEMO

#Thêm HTML

1. Đăng nhập Blogger
2. > Mẫu > Chỉnh sửa HTML
3.1 > Tìm thẻ

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

Hoặc là thẻ

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

3.2 > Dán code ở dưới vào trên thẻ vừa tìm được

<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>

4.1 > Tìm thẻ

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

Hoặc

<div class='post hentry'>

Hoặc

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

4.2 > Thay thế code tìm được bằng code tương ứng ở bên dưới

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

Hoặc

<div class='post bar hentry'>

Hoặc

<div class='post bar hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

#Thêm Scrip

1. > Tìm thẻ </head>

2. > Dán code dưới vào trên thẻ vừa tìm được

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://css3-tutsplus.googlecode.com/svn/trunk/personal/switch-display.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
 * jQuery switch
 *
 * active class active pada switch grid atau list
 * update by denddy gustiana
 * http://under-88.blogspot.com/
 * https://plus.google.com/109783772548428705949
 *
 */
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>

Nếu blog của bạn đã có đoạn scrip màu đỏ thì xóa nó đi

#Thêm CSS

1. > Tìm thẻ ]]></b:skin>
2. > Dán code dưới vào dưới thẻ vừa tìm

<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/AVvXsEgLAPf8QuSc27XSlVdhJaibMkvHUbfM_dWc08zTRTz778ZFVTJZ255haBWrD_-aVHfjpyQ9APYO0fuFVC_SaiaZJqUC9CLImQ3oBoC-QGut0cA9GelJNUvAd21b9XWOerrAjk60v85v108Y/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCIOc1u86fU0J4IX3768fZWFKYecxtDpCiSF5jEjbe5s5XpsMIy4WY830GJvkiVv1tHIVYGUu-ZUnEDZ4Wsw_AFlQTuA75a0mSIa-8jiAmKctpsp-zt_D0cofjlm_g4SwGzwK4wUTSWcUI/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>

3. > Save