Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi huycovip, 5/9/13.

Lượt xem: 6,921

  1. huycovip Banned

    Rất khó để có thể tìm thấy trên các blog khác bài viết hướng dẫn về cách làm cách nào để hiển thị tiện ích chuyển chế độ xem bài viết dưới dạng list hoặc grid nhưng may mắn mình đã vô tình gặp được một bài viết của tác giả người In-đô-nê-xia viết về vấn đề này, và ở bài viết này mình xin được chia sẻ đến các độc giả của Việt Designer nói riêng và cộng đồng blogspot Việt nói chung. 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

    [​IMG]


    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
    Code:
    <b:-section class='main' id='main' showaddelement='yes'>
    hoặc
    Code:
    <b:-section class='main' id='main' showaddelement='no'>
    trong template sau đó dánh trước nó đoạn code bên dưới
    Code:
    <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 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
    Code:
    <div class='post bar hentry uncustomized-post-template'>
    Hoặc
    Code:
    <div class='post bar hentry'>
    Bước 3: Dán đoạn code bên dưới trước thẻ đóng </head>
    Code:
    <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>
    Lưu ý: Nếu trong template của bạn đã có jQuery rồi thì xóa dòng code đầu tiên đi

    Bước 4: Thêm CSS vào sau thẻ
    Code:
    ]]></b:-skin>
    Code:
    <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://2.bp.
    	
    blogspot.com/-7BeF7FZiHo0/T6vZzVSzTzI/AAAAAAAABJs/FlrWN7ZRxmk/s1600/drid.gif) no-repeat 3px center;
    }
    a.dat_view {
    background:url(https://1.bp.
    	
    blogspot.com/-43EW3Gjakwc/T6vZz6K4N_I/AAAAAAAABJ0/hi2LK0zc4JQ/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>[CODE]
     
    [LIST]
    [*]Đoạn CSS này được tác giả denddy viết giống như Demo, vì thế bạn hãy chỉnh sửa sao cho phù hợp với template của mình.
    [/LIST]
     
    [B]Bước 5:[/B] Lưu lại template
     
    [B]Hỗ trợ[/B]
    [QUOTE]Hầu hết các lỗi thường gặp ở trong tiện ích này là do CSS mà tác giả viết ra không phù hợp với template của bạn. Nếu bạn gặp khó khăn trong vấn đề CSS hãy để lại comment cùng nhau thảo luận để đưa ra phương án tốt nhất cho template của bạn. Chúc bạn thành công![/QUOTE]

    TrollVLTONE.Rs thích bài viết này.
  2. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    TrollVL khi bị ban, có ghi rõ lý do bị ban mà bạn, mình tưởng bạn phải hiểu rõ vì sao bị ban chứ! Mình có dạo qua blog của bạn, bạn có rất nhiều thủ thuật hay về Blogspot, hi vọng bạn sẽ chia sẻ lên diễn đàn Việt Designer 1 cách nhiệt tình nhất, chứ đừng nghĩ đến mỗi chuyện PR.

    Tất nhiên bạn cũng có thể PR trang blogspot của bạn, nhưng phải có giới hạn và chừng mực! Mình rất muốn box Blogspot phát triển, hi vọng bạn sẽ góp sức giúp diễn đàn xây dựng ;)
    TrollVL thích bài viết này
  3. saint1001

    saint1001 Mới đăng kí

    Mình thao tác giống như hướng dẫn nhưng nó ko hiện ra vậy. Bạn xem giúp mình với. reupphim. blogspot.com
  4. dinhhiep36

    dinhhiep36 Thành viên cấp 1

    rất nhiều thủ thuật hay. Cái này mình rất thích. Giờ đang hoàn thiện chức năng của blog sau đó thêm mấy cái này vào là ngon
  5. dinhhiep36

    dinhhiep36 Thành viên cấp 1

    làm theo như vậy, bấm grid thì đơ đơ. Không có chuyện gì xảy ra cả :)
  6. TrollVL

    TrollVL Thành viên cấp 2

  7. bo_giaktvn

    bo_giaktvn Banned

    mình có 1 file này muốn nhờ bạn sửa giúp mình đoạn mã để hiển thị ảnh thumbnail như trong hình này với, cảm ơn bạn, mình gửi mẫu file cho bạn sửa dùm mình nhé

    lkkkB80.jpg

    box.com/s/jgvxeh91ifeeh9xohpjx

Ủng hộ diễn đàn