Cách thêm liên kết bài đăng mới hơn, bài đăng cũ hơn bên dưới nội dung bài viết

Tác dụng khi thêm các liên kết bài đăng mới hơn và bài đăng cũ hơn trong bài viết giúp độc giả truy cập nhanh đến bài viết trước hoặc sau của bài viết hiện tại. Vị trí các liên kết bài đăng thường được chèn dưới cùng bên dưới nhận xét như vậy khả năng để người đọc click chuột không cao, thay vào đó có thể chèn liên kết ngay dưới nội dung bài viết hay dưới tiêu đề, dấu ngắt nhảy thì tính tương tác sẽ cao hơn.

Đa số mẫu template hiện nay đều lược bỏ đi phần liên kết bài đăng mới hơn, bài đăng cũ hơn, tuy nhiên bạn có thể thêm lại theo các bước hướng dẫn dưới đây của mình để thêm liên kết ngay dưới nội dung của bài viết.

Đọc thêm:

• Danh sách tổng hợp các loại thẻ dữ liệu mặc định của Blog

Bước 1: Đăng nhập vào Blogger chuyển đến Chủ đề > Chỉnh sửa HTML > Trên tab chỉnh sửa chọn Chuyển đến tiện ích > Chọn Blog1.

Bước 2: Trong thẻ tag widger Blog1 kiểm tra xem version bằng bao nhiêu, hiện tại chỉ có version='1' hoặc version='2'.

Bước 3: Bên dưới widget bao gồm các thẻ tag b:includable, bạn thêm thẻ tag sau vào cùng với các thẻ tag b:includable đó

+ wiget Blog1 version='1'

Copy

<b:includable id='pageLink'>

  <div class='post-button-container'>

    <b:if cond='data:newerPageUrl'>

      <a class='post-button left' expr:href='data:newerPageUrl.canonical' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

    </b:if>

    <b:if cond='data:olderPageUrl'>

      <a class='post-button right' expr:href='data:olderPageUrl.canonical' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

  </b:if>

  </div>

</b:includable>

+ wiget Blog1 version='2'

Copy

<b:includable id='pageLink'>

  <div class='post-button-container'>

    <b:if cond='data:newerPageUrl'>

      <a class='post-button left' expr:href='data:newerPageUrl.canonical' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:messages.newerPosts'><data:messages.newerPosts/></a>

    </b:if>

    <b:if cond='data:olderPageUrl'>

      <a class='post-button right' expr:href='data:olderPageUrl.canonical' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:messages.olderPosts'><data:messages.olderPosts/></a>

  </b:if>

  </div>

</b:includable>

Bước 4: Tìm thẻ dữ liệu <data:post.body/>, thẻ này nếu là widget Blog1 version='1' nó sẽ nằm trong thẻ tag b:includable: <b:includable id='post' var='post'>, lưu ý có vài thẻ <data:post.body/> nằm trong này cần xác định đúng thẻ của bài viết. Trường hợp nếu widget Blog1 version='2', thẻ <data:post.body/> nằm trong thẻ tag b:includable: <b:includable id='postBody' var='post'> và chỉ một thẻ duy nhất.

Khi xác định đúng thẻ <data:post.body/>, chèn thẻ tag b:include: <b:include cond='data:view.isPost' name='pageLink'/> ngay dưới nó, ví dụ:

Copy

<div class='post-body'>

  <data:post.body/>

  <b:include cond='data:view.isPost' name='pageLink'/>

</div>

Lưu lại và kiểm tra trong bài viết xem đã xuất hiện các liên kết hay chưa?

Bước 5: Thêm style cho các liên kết, mở rộng cặp thẻ tag <b:skin>...</b:skin> chèn đoạn css sau:

Copy

.post-button-container {

    margin: 20px 0;

    text-align: center;

}

.post-button-container a.post-button {

    position: relative;

    font-size: 15px;

    background-color: #f0f1f5;

    border: 1px solid rgba(0,0,0,0.12);

    border-radius: 3px;

    color: #3c4043;

    display: inline-block;

    line-height: 30px;

    white-space: nowrap;

}

.post-button-container a.post-button.left {

    margin-right: 5px;

    padding: 0 10px 0 25px;

}

.post-button-container a.post-button.left:before {

    font-family: FontAwesome;

    content: '\f104';

    font-size: 18px;

    font-style: normal;

    font-weight: normal;

    position: absolute;

    left: 10px;

}

.post-button-container a.post-button.right {

    padding: 0 25px 0 10px;

}

.post-button-container a.post-button.right:after {

    font-family: FontAwesome;

    content: '\f105';

    font-size: 18px;

    font-style: normal;

    font-weight: normal;

    position: absolute;

    right: 10px;

}

Bước 6: Kiểm tra xem template đã có thư viện FontAwesome, nếu chưa có thêm liên kết sau ngay trên thẻ tag b:skin

Copy

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Trường hợp nếu bạn muốn hiển thị các liên kết ngay dưới dấu ngắt nhảy thì thêm đoạn script sau trước thẻ đóng </body>

Copy

<script>//<![CDATA[

$(function() {

  var more = document.getElementsByName('more')[0]

  if (more) {

    $('.post-button-container').appendTo(more)

  }

})

//]]></script>

Trường hợp này nếu bài viết bạn có thêm dấu ngắt nhảy, thì liên kết sẽ hiển thị ngay dưới còn nếu không thì mặc định vẫn nằm dưới nội dung bài viết.

Nội dung chính