Thêm tiêu đề cho bài viết mới hơn và cũ hơn cho blogspot

Không giống như Wordpress, ở liên kết của bài đăng mới hơn, cũ hơn dưới bài viết của blogspot không kèm theo tiêu đề và blogspot cũng không hỗ trợ bạn việc này. Nhưng tác giả của blog http://yabtb.blogspot.com đã giới thiệu đến cho chúng ta một thủ thuật có thể hiện tiêu đề của bài viết mới hơn, cũ hơn và cách thực hiện cũng vô cùng đơn giản. Mời bạn xem demo bên dưới trước khi quyết định có thêm vào blog của mình hay không

Live Demo

Cài đặt jQuery

Nếu template của bạn chưa cài đặt jQuery bạn hãy chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

Cài đặt Javascript

Trước thẻ đóng </body> bạn dán đoạn code bên dưới vào

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// Post titles to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
//<![CDATA[
var urlToNavTitle = {};
function getTitlesForNav(json) {
  for(var i=0 ; i < json.feed.entry.length ; i++) {
    var entry = json.feed.entry[i];
    var href = "";
    for (var k=0; k<entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        href = entry.link[k].href;
        break;
      }
    }
    if(href!="") urlToNavTitle[href]=entry.title.$t;
  }
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(href) {
  var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
  if(title) {
    title=title[1].replace(/-/g," ");
    title=title[0].toUpperCase() + title.slice(1);
    if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
  }
  return title;
}
$(window).load(function() {
 window.setTimeout(function() {
  var href = $("a.blog-pager-newer-link").attr("href");
  if(href) {
    href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");
    var title=urlToNavTitle[href];
    if(!title) title=urlToPseudoTitle(href);
    if(title) $("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />" + title);
  }
  href = $("a.blog-pager-older-link").attr("href");
  if(href) {
    href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");
    var title=urlToNavTitle[href];
    if(!title) title=urlToPseudoTitle(href);
    if(title) $("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />" + title);
  }
 }, 500);
});
//]]>
</script>
</b:if>

CSS

Để các tiêu đề bài viết cũ hơn, mới hơn hiển thị tốt hơn, bạn hãy dán đoạn code này trước thẻ ]]></b:skin>

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}
#blog-pager {min-height:2em;}

Ở đoạn được đánh dấu ở đoạn CSS trên cho ta biết chiều rộng của thanh điều hướng này cố định là 560(250x2 +60 = 560). Bạn hãy thay đổi cho phù hợp với blog của mình nếu cần thiết. bạn cũng có thể tạo cho nó một style riêng nếu nắm chắc về CSS thay vì kiểu cách đơn giản như demo. Hi vọng bài viết sẽ giúp ích cho bạn trong việc xây dựng blog, chúc bạn thành công!

Nguồn yabtb