Tutorial Meletakkan Tajuk Entri Pada "Older Post" Dan "Newer Post"

Screenshot Tajuk Entri Pada "Older Post Dan "Newer Post"

Tutorial:
PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:

 ]]></b:skin> 

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  ]]></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;}

Keterangan: 

- margin-left:250px; - Gantikan nilai 250 untuk adjust posisi link Home.

7. Seterusnya, cari kod dibawah:

</body>

8. Copy (CTRL+C) dan Paste(CTRL+V) kod dibawah sebelum kod </body> :

<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) - reloaded!
//<![CDATA[
// Configuration:
// In these you can use [title]:
var olderLink = 'Older Post &gt;&gt;<div class="blog-pager-older-link-title">[title]</div>';
var newerLink = '&lt;&lt; Newer Post<div class="blog-pager-newer-link-title">[title]</div>';
// In these you can use [date], [datetime], [title]:
var olderTitle = 'Older Post - posted on [date]';
var newerTitle = 'Newer Post - posted on [date]';
// configuration ends
//
function setLink(selector, link, title, entry) {
  var htm = link.replace("[title]", entry.title.$t);
  $(selector).html(htm);
  var date = entry.published.$t.match(/\d+/g);
  date = new Date(date[0],date[1]-1,date[2],date[3],date[4],date[5]); // convert iso
  title = title.replace('[date]', date.toLocaleDateString());
  title = title.replace('[datetime]', date.toLocaleString());
  title = title.replace("[title]", entry.title.$t);
  $(selector).attr("title", title);
}
function setOlderLink(entry) { setLink("a.blog-pager-older-link", olderLink, olderTitle, entry); }
function setNewerLink(entry) { setLink("a.blog-pager-newer-link", newerLink, newerTitle, entry); }
$(window).load(function() {
  window.setTimeout(function() {
    var timestamp = $(".published").attr("title");
    if(timestamp && timestamp != "")
      $.getJSON("/feeds/posts/default?alt=json-in-script&published-min="+encodeURIComponent(timestamp)+"&max-results=0&callback=?", function(resp) {
        var postindex = parseInt(resp.feed.openSearch$totalResults.$t);
        if(postindex > 1)
          $.getJSON("/feeds/posts/summary?alt=json-in-script&start-index="+(postindex-1)+"&max-results=3&callback=?", function(resp) {
            setNewerLink(resp.feed.entry[0]);
            var postcount = parseInt(resp.feed.openSearch$totalResults.$t);
            var startindex = parseInt(resp.feed.openSearch$startIndex.$t);
            if(postcount - startindex > 1) setOlderLink(resp.feed.entry[2]);
          });
        else
          $.getJSON("/feeds/posts/summary?alt=json-in-script&start-index=2&max-results=1&callback=?", function(resp) { setOlderLink(resp.feed.entry[0]); });
      });
  }, 500);
});
//]]>
</script>
</b:if>

Note: Jika template anda sudah sedia ada kod Script JQuery , sila abaikan langkah 9 dan 10 .

9. Cari kod dibawah:

</head>

10. Copy (CTRL+C) dan Paste(CTRL+V) kod script jquery dibawah sebelum kod </head> :

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

11. Klik Save Template

#Selesai :)