Hiển thị Tiêu đề bài viết Cũ hơn và Mới hơn trong blogger

Ở cuối mỗi bài viết trong blogger của chúng ta có một khung Blog Paper, nhiệm vụ của nó là điều hướng trong trang bài viết với Bài viết mới hơn (Next post), Bài viết cũ hơn (Previous post) và Trang chủ (Home Page).

Hiển thị tiêu đề bài viết mới và cũ hơn trong blogger

Trong bài này tôi sẽ hướng dẫn các thay thế bài viết mới hơn, bài viết cũ hơn bằng chính tiêu đề của bài viết trong đường dẫn của nó bằng jQuery, các bạn cũng có thể áp dụng tương tự trên wordpress. Sau khi áp dụng các bạn sẽ thấy blog của mình trở nên chuyên nghiệp hơn với Next & Previous mới này, bên cạch đó nó cũng giúp cho việc điều hướng đến độc giả dễ dàng hơn.

Hướng dẫn thêm Next & Previous với tiêu đề

Lưu ý: Nếu bạn là người mới tìm hiểu về blogger thì hãy lưu mẫu (template) của bạn vào máy tính , tránh trường hợp bị lỗi xảy ra, rồi mới bắt đầu thực hiện các hướng dẫn bên dưới.

1. Vào Blogger > Mẫu > Chỉnh sửa HTML

2. Thêm thư viện jQuery vào phần đầu trang web trong thẻ ~~<head>~~ (nếu đã có thư viện jQuery các bạn không cần thêm code này)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>

3. Sao chép mã HTML và jQuery sau:

<b:if cond='data:blog.pageType == "item"'>
<ul class='shine-pager clearfix'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next' />
<b:else/>
<a rel='next'>Next Bạn đã xem bài mới nhất</a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous' />
<b:else/>
<a rel='previous'>Previous Bạn đang xem bài cuối</a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
(function($) {
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function(data) {
newerLink.html('Next ' + $(data).find('h3.post-title.entry-title').text() + '')
}, "html");
$.get(olderLink.attr('href'), function(data2) {
olderLink.html('Previous ' + $(data2).find('h3.post-title.entry-title').text() + '')
}, "html")
})(jQuery);
//]]>
</script>
</b:if>

4. Tìm kiếm (Ctrl + F) một trong những từ khóa sau ~~post-footer-line post-footer-line-1~~ và dán code bên trên vào đó.

Tùy theo bạn muốn đặt nó ở đâu. Theo tôi thì nên đặt ngay dưới cuối bài viết vì nó sẽ tạo ra nhiều lượt truy cập hơn là ở cuối trang bài viết.

Phần mã hiển thị bài viết trên máy tính (Post Blogger)

Lưu ý: Có 2 đoạn ~~post-footer-line post-footer-line-1~~ một đoạn là của Mobile Post (bài viết trên điện thoại) và đoạn thứ 2 là Post (bài viết trên máy tính) chúng ta sẽ tìm đến đoạn thứ 2 và dán code bên trên vào đó.

5. Làm đẹp cho Blogger Title Paper in post bằng CSS

Thanh nextprev trong bài viết blogger với style CSS

Vì trong kiểu css này tôi có sử dụng plugin Font Awesome nên các bạn hãy thêm code sau vào phần đầu trang html (trong thẻ ~~<head>~~)

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

Tìm kiếm (Ctrl + F) ~~</b:skin>~~ và dán code CSS sau vào trước nó

.shine-pager {
  border-top:2px solid #eee;
  border-bottom:2px solid #eee;
  margin:20px 0 30px;
}
.shine-pager li {
  width:50%;
  text-align:center;
  cursor:pointer;
  list-style:none;
}
.shine-pager li.next {
  float:right;
  -webkit-box-shadow:-1px 0 0 #eee,inset 1px 0 0 #eee;
  box-shadow:-1px 0 0 #eee,inset 1px 0 0 #eee;
}
.shine-pager li.previous {
  float:left;
  -webkit-box-shadow:1px 0 0 #eee,inset -1px 0 0 #eee;
  box-shadow:1px 0 0 #eee,inset -1px 0 0 #eee;
}
.shine-pager strong,
.shine-pager span {
  display:block;
  font-weight:300;
}
.shine-pager strong {
  display:block;
  font-size:12px;
  color:#aaa;
  letter-spacing:.5px;
  font-weight:400;
  text-transform:uppercase;
}
.shine-pager span {
  font-size:15px;
  color:#666;
}
.shine-pager li a {
  position:relative;
  display:block;
  padding:10px 40px 10px;
}
.shine-pager li:hover i {
  color:#000;
}
.shine-pager li.previous a {
  padding-right:24px;
}
.shine-pager li i {
  color:#ccc;
  font-size:18px;
  position:absolute;
  top:50%;
  margin-top:-10px;
}
.shine-pager li.previous i {
  left:10px;
}
.shine-pager li.next i {
  right:10px;
}

6. Lưu Template lại và xem kết quả

Xóa bài viết Mới hơn / Cũ hơn trong bài viết

Sau khi các bạn thêm thành công Next & Previous với tiêu đề trong blog thì tại bài viết của blog nó sẽ xuất hiện ra 2 thanh Next & Previous.

- Next & Previous với tiêu đề chúng ta vừa thêm vào
- Next & Previous mặc định (Bài viết cũ hơn, bài viết mới hơn)

Bây giờ chúng ta sẽ xóa thanh Next & Previous mặc định của blogger khi hiển thị trong bài viết đi bằng cách Tùy chỉnh hiển thị nội dung trong blogger mà tôi đã hướng dẫn.

Cách thực hiện:

Các bạn vào Blogger > Mẫu > Chỉnh sửa HTML
Tiếp theo tìm kiếm (Ctrl + F) từ khóa ~~<b:include name='nextprev'/>~~ và thay thế nó bằng code sau:

<b:if cond='data:blog.pageType == "index"'>
<b:include name='nextprev'/>
</b:if>

Cuối cùng lưu Template và xem kết quả.

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

A4Manga

Top Ad unit 728 × 90

Hiển thị Tiêu đề bài viết Cũ hơn và Mới hơn trong blogger

Hướng dẫn thêm Next & Previous với tiêu đề

Xóa bài viết Mới hơn / Cũ hơn trong bài viết

About Sweetheme

Không có nhận xét nào:

Biểu mẫu liên hệ