Thêm nút đọc thêm cho blogspot

Hiện nay blogger đã trở nên rất phổ biến vì tính tiện lợi, thân thiện của nó. Hơn nữa gmail, google cũng quá quen thuộc với chúng ta. Bên cạnh đó nó cũng có 1 số hạn chế nhất định. Hạn chế lớn nhất là không cho người dùng can thiệp quá nhiều vào cấu trúc bên trong của nó.

Có rất nhiều bạn khi làm thì bị vướng phải 1 rắc rối là bài viết không thu gọn lại được, làm cho trang chủ blog dài ra, rất khó nhìn.

Hôm nay mình sẽ hướng dẫn các bạn chỉnh lại cái đó nhé.!

Bắt đầu nào:.......

1. Bạn login vào blog của mình, sau đó bạn chọn mục Mẫu rồi chọn Chỉnh sửa HTML (nó có xuất hiện 1 cái bản thông báo thì bạn chon Tiếp tục)

2. 1 cửa sổ mới hiện ra, bạn chọn Mở rộng Mẫu Tiện ích --> tìm đoạn code sau (có thể nhấn Ctr + F đễ tìm cho dễ):

<data:post.body/>

3. Sau khi tìm ra được rồi thì thay nó bằng đoạn code:

<!--   <data:post.body/>-->

      <b:if cond='data:blog.pageType != &quot;item&quot;'>

        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

          <div>

            <b:if cond='data:post.thumbnailUrl'>

              <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>

              <b:else/>

              <img alt='no image' class='item-thumbnail' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/>

            </b:if>

            <div class='item-snippet'>

              <data:post.snippet/>

            </div>

          </div>

          <div class='jump-link'>

            <a expr:href='data:post.url' expr:title='data:post.title'>

              <data:post.jumpText/>

            </a>

          </div>

          <span class='post-comment-link'>

            <b:if cond='data:post.allowComments'>

              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

                <b:if cond='data:post.numComments == 1'>

                  1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/>

                </b:if>

              </a>

            </b:if>

          </span>

          <b:else/>

          <data:post.body/>

        </b:if>

        <b:else/>

        <data:post.body/>

      </b:if>

4. Tiếp theo, hãy tìm thẻ ]]></b:skin> và chèn vào trước nó đoạn code sau:

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}

.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}

.jump-link {float:right}

.jump-link a,.jump-link a:visited{background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

.jump-link a:hover,.jump-link a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

5. Cuối cùng nhấn lưu mẫu. Vậy là xong.!

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

Read More