9:05 PM

Sắp xếp bài viết dạng List or Grid trong blogspot

 

 humghn.com 

Việc sắp xếp bố cục bài viết được xem là một khâu quan trọng trong thiết kế web/blog . Một web/blog có thiết kế bài viết gọn gàng , khoa học chắc chắn sẽ thu hút hơn rất nhiều so với một web/blog có bố cục rườm rà và bừa bộn . Trong bài viết lần này , chuyên mục sẽ hướng dẫn các bạn cách để sắp xếp bài viết theo dạng List hoặc dạng Grid trên web/blog . Với tiện ích này , khách tham quan web/blog của bạn sẽ có những sự lựa chọn khoa học phù hợp với yêu cầu cá nhân , giúp họ tùy biến giao diện phù hợp với nhãn quan của họ . 
Video giới thiệu về tiện ích :


Cách thực hiện :
Bước 1 : Đăng nhập blogspot , chọn " Mẫu " , chọn " Chỉnh sửa HTML "
Bước 2 : Tìm đến 1 trong 2 đoạn mã sau trong template của blogspot 
<b:section class='main' id='main' showaddelement='yes'>
hoặc
<b:section class='main' id='main' showaddelement='no'>
Bước 3 : Sau khi đã xác định được đoạn code như vậy , bạn tiến hành thêm đằng trước code tìm được đoạn mã lệnh sau :
<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ước 4 : Tiếp tục tìm đến 1 trong 2 đoạn mã sau và sửa lại
Nếu là :
<div class='post hentry uncustomized-post-template'>
Sửa lại là :
<div class='post bar hentry uncustomized-post-template'>
hoặc
<div class='post hentry'>
Sửa lại là :
<div class='post bar hentry'>
Bước 5 : Dán đoạn mã sau vào trước thẻ </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://googledrive.com/host/0BwgaalARAxhuOVZTWXlnSnhUak0/' 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 6 : Tìm đến thẻ ]]></b:skin> và dán vào sau nó đoạn 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/AVvXsEjT8hAOyEhq54mXLg7ZpKPvRBhMK1bUMUZbS2oPLJ5KPIHZEQp1iAkghEbI4BeK3uaF6d1u-mrwiF1AJnN8SwiAbSgqVbX_5RFmjMZ0QLDyyt2Zk-pwiAJRGuPr7Hlr4cGZoodrNQ5aIHBq/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFaurw0PWOH42boXEibox9e4NavyaClpc7fj9QvOSWCj0wWE_8o8BPR6RdKWeNdoD_P5YDbNfpnbt9v3uffY2F_1hPBpTIicuHhHjBKHVct_kpxH2HoBorjGRWLbYMvydladcz9bD4mmLB/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>
Cuối cùng tùy chỉnh lại code cho tối ưu với web/blog của bạn .
Chúc các bạn thành công

 

Copyright @ 2013 Thông Tin Công Nghệ - Giải Trí & Học Tập.

Designed by Templateism | MyBloggerLab