Navigasi Posting Blog Bergambar

Kalo posting udah banyak biasanya akan muncul info Posting Lebih Baru dan Posting Lama.

Supaya bisa tampil lebih menarik, kalimat tersebut bisa diganti atau ditambah dengan gambar sekaligus judul posting.

Tampilan navigasi posting blog di BlEnDiDS sebelumnya seperti gambar di bawah ini.

Trik Mengganti Navigasi Posting Blog Dengan Bergambar

Langkah Pertamax > Ngilangin gambar titik dengan CSS:

.blog-pager {
    background: none!important;
}

Langkah Keduax > Pasang skrip:

<script> /*<![CDATA[*/
// Code Shared by TwistBlogg.com
// except root, labels and search pages
   if (/.+\.html(\?m=1)?$/.test(location.href)) {
      var olderLink = document.getElementById('Blog1_blog-pager-older-link');
      if (olderLink) {
         getPageTitle(olderLink, setOlderPageTitle);

         function setOlderPageTitle(data) {
            setPageTitle(data, olderLink, '')
         };
      }
      var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
      if (newerLink) {
         getPageTitle(newerLink, setNewerPageTitle);

         function setNewerPageTitle(data) {
            setPageTitle2(data, newerLink, '')
         };
      }

      function setPageTitle(data, pageLink, prefix, suffix) {
         if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
               var title = data.feed.entry[0].title.$t;
            }
         }
         if (title) {
            pageLink.innerHTML = "<div class='navigation-image'><small>Entri Sebelumnya</small><br/><img alt='" + olderLink + "' src='" + data.feed.entry[0].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+(\-c)?/, "/s300").replace(/\=s[0-9]+(\-c)?/, "=s300") + "'/></div><div class='navigation-content'>" + data.feed.entry[0].title.$t + "</div>";
         }
      }

      function setPageTitle2(data, pageLink, prefix, suffix) {
         if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
               var title = data.feed.entry[0].title.$t;
            }
         }
         if (title) {
            pageLink.innerHTML = "<div class='navigation-image'><small>Entri Selanjutnya</small><br/><img alt='" + newerLink + "' src='" + data.feed.entry[0].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+(\-c)?/, "/s300").replace(/\=s[0-9]+(\-c)?/, "=s300") + "'/></div><div class='navigation-content'>" + data.feed.entry[0].title.$t + "</div>";
         }
      }

      function getPageTitle(pageLink, callback) {
         var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
         var script = document.createElement('script');
         script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path=' + pathname + '&callback=' + callback.name + '';
         document.body.appendChild(script);
      }
   } /*]]>*/ </script>

Langkah Ketigax > Pasang CSS lagi untuk gambar:

.navigation-image img {
    border-radius: 4px;
    height: 64px;
    width: 72px;
}

@media screen and (max-width: 603px){
    #blog-pager-newer-link, #blog-pager-older-link {
        float: none!important;
    }
}

Mengganti <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> menjadi <a class='home-link' expr:href='data:blog.homepageUrl'><img alt="Faviconnya BlEnDiDS" border="0" height="32" width="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaawnMOifC0P8D03G4QPFs-zL-Z1yX59bkn0WFeyFRwJRIpXubxe-pLfBbTBsVOYUskUhpmmi_3Z93huoKWZqNjwTGayz9GG-FWyu3IH08AnJo8DpiyKZSI-2W1mhUAQESsI3dEa7b2u1T2DLZZKxI6oD-SO26qYa7AwIhhIlmdGIW3VDHcPlvWRxb/s1600/favicon-32x32.png"/></a>

Ngilangin expr:title='data:newerPageTitle' dan expr:title='data:olderPageTitle'.

Catatan: kode skrip di atas aslinya bisa dilihat pada posting yang judulnya: Add Next/Previous Pager Navigation with Image - Blogger.