MEMBUAT NAVIGASI NEXT & PREVIOUS PADA BLOGGER DENGAN JQUERY

Menu navigasi merupakan sebuah tombol yang digunakan untuk menavigasi antara database terbuka atau halaman Web. Termasuk fungsi tombol kembali, maju, berhenti, refresh, cari, dan pergi.

Nah hari ini kita akan belajar cara membuat Page Navigation yang profesional di blogspot seperti tampilan di atas.

Pertama kita akan menambahkan kode yang diperlukan dan kemudian kita akan menghapus tombol standar yang ada yang muncul di bawah bagian komentar.

1. Masuk ke Blogger > Template

2. Backup template anda

3. Klik "Edit HTML"

4. Cari kata ]]> </ b: skin> (Tekan Ctrl + F untuk memudahkan pencarian)

.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;}
.mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;}
.mbt-pager li.next a { padding-left: 24px; }
.mbt-pager li.previous { margin:0px -2px 0px 0px; float: left; border-right:1px solid #ddd; padding:0px; background:none;
}
.mbt-pager li.previous a { padding-right: 24px; }
.mbt-pager li.next:hover, .mbt-pager li.previous:hover {background:#333333; }.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
.mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.mbt-pager li i { color: #ccc; font-size: 18px; }
.mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.mbt-pager li a span { font-size: 15px; color: #666; font-family:oswald,Helvetica, arial; margin:0px;}
.mbt-pager li a:hover span,
.mbt-pager li a:hover i { color: #ffffff; }.mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.mbt-pager li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }
.mbt-pager li.next i, .mbt-pager li.previous i ,
.mbt-pager li.next, .mbt-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}

Untuk mengubah latar belakang menjadi warna hitam dan warna font menjadi putih, ganti background: # 333333; dan color: # ffffff.

Buat seperti yang di tandai warna kuning.

5. Sekarang tambahkan font Oswald. Cari <head> dan paste kode berikut tepat di bawahnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

*Catatan : Hapus kode bercetak tebal jika anda telah menambahkan library jquery dalam template.

6. Selanjutnya kita akan menambahkan kode HTML yang akan menempatkan posisi halaman di bagian bawah posting blog. Cari <data:post.body/>

7. Paste kode HTML berikut tepat di bawahnya :

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<ul class='mbt-pager'>
        <li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'><strong>Next</strong> <span>You are viewing Most Recent Post</span></a>
</b:if>
</li>
    <li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><strong>Previous</strong> <span>You are viewing Last Post</span></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('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');
    },"html");
    $.get(olderLink.attr('href'), function (data2) {
     olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');
    },"html");
})(jQuery);
//]]>
</script>
      </b:if></b:if>

Di sini saya menggunakan sedikit jquery untuk mengambil data dalam tag judul. Karena blogger hanya menyediakan pilihan untuk beralih antara posting berikutnya dan sebelumnya menggunakan URL, oleh karena itu kita membutuhkan jQuery untuk menemukan kelas judul menggunakan tag heading. Kelas judul dan tag post mungkin berbeda untuk setiap template blog.

Dalam template blog standar, kelas yang benar adalah .post h3.post-title dan karena itu saya akan menggunakan yang sama dalam kode jquery di atas.

(Opsi) Teks yang berwarna kuning dan oranye dapat diganti dengan teks sesuai dengan keinginan anda.

8. Simpan template anda dan lihat blog anda.

MENGHAPUS TOMBOL NEXT & PREV YANG LAMA

1. Cari <b:includable id='NextPrev'>

2. Dan terlihat sedikit mirip seperti kode di bawah ini :

<div class='blog-pager' id='blog-pager'>
   <b:if cond='data:newerPageUrl'>
     <span id='blog-pager-newer-link'>
     <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
     </span>
   </b:if>
   <b:if cond='data:olderPageUrl'>
     <span id='blog-pager-older-link'>
     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
     </span>
   </b:if>
   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   <b:if cond='data:mobileLinkUrl'>
     <div class='blog-mobile-link'>
       <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
     </div>
   </b:if>
</div>
<div class='clear'/>