Thêm button Read More cho tiện ích Popular post (Xem nhiều) Blogger

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

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