Công cụ xem bài viết dưới dạng Grid hoặc List cho Blogspot

Xin chào các bạn, hôm nay Việt Blogger lại giới thiêu đến các bạn một thủ thuật khá là hay nữa đó chính là thêm tính năng xem bài viết trên trang chủ theo dạng Grid hoặc List.

Nếu như bạn nào chưa hiểu rõ thi có thể vào demo sau đây để có thể hình dung được nó là như thế nào nhé! switchgridandlist.blogspot.com

Được rồi. Chúng ta bắt tay vào làm ngay thôi.!

Bước 1:

Các bạn vào chỉnh sửa template và tìm đoạn code sau:

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

Hoặc:

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

P/s: một số tem khi bạn tìm theo hai đoạn này mà không thấy thì bạn hãy chịu khó tìm theo  b:section class='main' hay showaddelement=' xem có đoạn nào tương tự không nhé!

Bước 2:

Các bạn tiếp tục copy đoạn code này và dán vào trước đoạn code trên

<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 đoạn <span style='color: #CC0000;'>Recent</span> Post cho phù hợp với blog của mình.

Bước 3: 

Các bạn tìm đoạn code sau

<div class='post hentry

Và thêm class bả cho nó  thì sẽ được như thế này

<div class='post bar hentry

Bước 4:

Copy toàn bộ đoạn code sau và chèn trước thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='http://trollvlhcv.googlecode.com/svn/trunk/demo/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>

Bước 5: 

Copy đoạn CSS này và chèn vào trước thẻ ]]></b:-skin> rồi nhấn lưu lại là xong nhé!

<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/AVvXsEgw-Na0F7x3RCtUGNdX5Jzaavb_uGe53pe1w26-Ky9LsD2reizu7603mbdWj8W3SSliw2wh3XW0SpZbNikVlkADzNzEwgIRhXFgZswRRWnZn4aOey38ahh8ABPJtzbDEJQJjWtsEw4-2DYL/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdEwdH_VdVYykth5mSawq1sG7IVWBQO6VY4j_tdHrQcFm56X-rEE8rRXsbBoW-5bdf5ouEMA-lB_Ao_6MWLRI_GP5YWMfx-aeXmbhDntU6FVs4fEs3mTN-flO8YtRy48LvDeLtl-E6JmLO/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>

Xong. Và đây là kết quả.
Đây là dạng Grid

Đây là dạng List

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