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

Thêm button "Read More" cho tiện ích Popular post

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

Lượt xem: 4,442

  1. TrollVL Thành viên cấp 2

    Bài viết này mình sẽ hướng dẫn các bạn thêm nút "Read more" vào tiện ích Bài xem nhiều của blogspot. Các bạn chỉ việc thực hiện theo các bước đơn giản bên dưới
    [​IMG]
    Lưu ý
    Thủ thuật có thể làm thay đổi một số tính năng mà trước đó bạn đã thêm vào cho tiện ích này. Vì vậy trước khi thực hiện bạn nên lưu lại template để nếu không phù hợp có thể back up lại

    Thực Hiện
    Bước 1:
    Trong template bạn thêm đoạn CSS sau trước thẻ ]]></b:-skin>
    Code:
    .
    	
    widget.PopularPosts .widget-content {
      font-size:96%;
      line-height:normal;
    }
    .
    	
    widget.PopularPosts li {padding:.5em 0 .8em}
    .
    	
    widget.PopularPosts .item-title a {
      display:block;
      font-weight:bold;
      margin:0 0 .2em;
    }
    .
    	
    widget.PopularPosts img {
      padding:0;
      margin:5px 10px 0 0;
      border:none;
      background-color:#111;
      float:left;
    }
    .
    	
    widget.PopularPosts a.more-link,.
    	
    widget.PopularPosts a.more-link:hover,.
    	
    widget.PopularPosts a.more-link:focus {
      display:block;
      float:right;
      color:#333;
      background-color:#999;
      line-height:100%;
      margin:1em 0 0;
      padding:2px 6px 4px 5px;
      font-size:10px;
      font-style:italic;
      text-decoration:none;
      text-shadow:none;
      -webkit-border-radius:2px;
      -moz-border-radius:2px;
      border-radius:2px;
    }
    .
    	
    widget.PopularPosts a.more-link:hover,.
    	
    widget.PopularPosts a.more-link:focus {background-color:white}
    Bước 2:
    Hãy chắc chắn rằng bạn đã thêm tiện ích Popular Post vào blog sau đó tìm đến đoạn mã tương tự sau trong template
    Code:
    <b:
    	
    widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
    ABC
    </b:
    	
    widget>
    Mẹo: Bạn có thể tìm đoạn code bên trên qua từ khóa PopularPosts1

    Sau đó thay toàn bộ đoạn mã ABC bên trong thẻ trên bằng
    Code:
        <b:includable id='main'>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='data:showThumbnails == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (3) Show only thumbnails -->
                <div class='item-thumbnail-only'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                </div>
                <div style='clear: both;'/>
              <b:else/>
                <!-- (4) Show snippets and thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  <div class='item-snippet'><data:post.snippet/></div><a class='more-link' expr:href='data:post.href'>Read More</a>
                </div>
                <div style='clear: both;'/>
              </b:if>
            </b:if>
          </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    Thay thế Read More cho phù hợp sau đó lưu lại template

    Cảm ơn bạn đã đọc bài viết của mình. Bạn có thể vào blog cá nhân của mình tại địa chỉ http://www.trollvl.com để tìm hiểu một số thủ thuật blogspot khác



    ...

Ủng hộ diễn đàn