Cara Membuat Navigasi Next & Previous Pada Blogger Dengan jQuery

Trik ini bukanlah yang baru dan sudah banyak pakar blog yang berbagi ilmu tentang yang cara membuat navigasi Next & Previous baik itu menggunakan JavaScript atau menggunakan jQuery. Disini saya akan membahas menggunakan jQuery yang lebih rapi dan juga sangat optimal.

Blogger blog tidak dioptimalkan atau terstruktur secara user friendly. Sama berlaku pada default tema wordpress. Tombol Page Navigation tidak masuk akal bila ditempatkan di bagian bawah kolom komentar. Apa pun yang memberikan kegunaan bagi pembaca harus ditempatkan langsung di depan. Setelah memeriksa statistik analisis kami, saya menemukan bahwa tombol Navigasi Next & Previous ditempatkan tepat di bagian bawah konten lebih baik dibandingkan dengan menempatkan di bawah komentar. Hari ini kita akan belajar cara membuat Page Navigation yang profesional di blogspot.

TAMBAHKAN KE BLOGGER

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'/>

3. Paste kode di bawah ini ke dalam kode kondisional seperti yang ditunjukkan di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>

KODE DI ATAS

</b:if></b:if>

4. Simpan Template anda dan selesai.

Saya berharap widget baru ini bisa memberikan warna baru pada template blog anda. Desain yang unik dan berbeda dari yang lain. Jika ada yang kurang bisa anda tanyakan di kolom komentar.

Semoga Bermanfaat.

Cara Membuat Navigasi Next & Previous Pada Blogger Dengan jQuery

My Blog List