Cara Mengganti Tombol Next Prev Dengan Judul Postingan
Cara Mengganti Tombol Next Prev Dengan Judul Postingan Untuk Blogger. Tombol navigasi next dan previous pada blog merupakan sebuah menu navigasi blog yang secara default berada di bawah postingan untuk memberitahu pengunjung supaya bisa memilih antara postingan sebelumnya dan postingan selanjutnya.
Dan kali ini kita akan mencoba untuk memodifikasi tombol navigasi blog tersebut supaya menjadi lebih keren dan juga responsive, supaya menambah nilai user friendly maka kita akan memodifikasinya dengan cara memberikan keterangan judul pada menu Next Post dan Previous Post.
Cara Untuk Menambahkan Tombol Older And Newer Post Menjadi Next And Previous Yang Keren Di Tambah Judul Postingan Untuk Blogger
1. Masuk ke dalam blog kalian terlebih dahulu2. Kedua, pilih menu "Tema" dan klik "Edit HTML"
3. Selanjutnya kalian cari kode </head>
4. Lalu kalian letakkan kode berikut ini di atas kode tadi
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.halaman{padding:5px 0;background:#fff;border-top:1px solid #ccc;margin:10px 0 0}
.halaman-kiri{width:49%;float:left;margin:0;text-align:left;color:#666;transition:all .3s ease-out;}
.halaman-kanan{width:49%;float:right;margin:0;text-align:right;color:#666;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#555!important;}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#48d!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family:Arial,sans-serif;font-weight:300;background:none;text-decoration:none}
.halaman-kiri a,.halaman-kanan a{color:#48d;}
.pager-title-left,.pager-title-right{font-family:'Oswald',sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;transition:all .3s ease-out;color:#999}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:1px 10px 10px}
#blog-pager {padding:5px 0;margin:5px 0}
#blog-pager-newer-link a{float:left;line-height:17px;padding:0 0 10px;color:#666;font-size:15px;font-weight:300}
#blog-pager-older-link a{float:right;line-height:17px;color:#666;padding:0 0 10px;font-size:15px;font-weight:300}
</style>
</b:if>5. Setelah itu cari kode <data:post.body/> dan letakkan script berikut ini di bawah kode tersebut
Perhatian :
Setiap bawaan template memiliki jumlah kode <data:post.body/> yang berbeda, jadi intinya kalian hanya perlu mencobanya untuk meletakkan kode Next & Prev ini di bawah postingan blog kalian
<b:if cond='data:blog.pageType == "item"'>
<div class='halaman'>
<div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<span class='pager-title-left'>Previous</span><br/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>« Prev Post</a>
</span>
<b:else/>
<span class='current-pageleft'><span class='pager-title-left'>Newest</span></span><br/>
You are reading the newest post
</b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<span class='pager-title-left'>Next</span><br/>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Next Post »</a>
</span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Oldest</span></span><br/>
You are reading the latest post
</b:if>
</div>
</div>
</div>
<div style='clear: both;'/>
</div>
<script type='text/javascript'>
//Pager
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);//rgt
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
});
</script>
</b:if>6. Kemudian kalian klik "Simpan Tema" untuk menyimpan perubahan tersebut
Untuk melihat hasilnya, silahkan kalian lihat salah satu artikel yang ada di blog kalian
Baca juga :
Cara Membuat Widget Recent Comments Di Blog
Cara Menambahkan Widget Random Post Di Blog
Cara Membuat Featured Post Di Homepage Blog
Kenapa Gan, Ada yang error ya? Navigasi judul yang ada di Next And Previous Menjadi ganda (banyak)?
Untuk menangani masalah di tersebut memang sangat wajar untuk template bawaan blogger, namun saya akan menunjukkan cara memperbaiki error tersebut seperti cara di bawah ini
+ Cari kode <b:includable id='nextprev'> jika sudah ketemu kira kira hasilnya akan seperti ini
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
Ada banyak kode disini
</div>
</b:includable>+ Sekarang ganti kode <b:includable id='nextprev'> menjadi seperti kode berikut ini
<b:includable id='nextprev'> <b:if cond='data:blog.pageType != "item" and data:blog.pageType != "static_page"'>+ Dan ganti kode penutup </b:includable> pada <b:includable id='nextprev'> menjadi seperti ini
</b:if>
<div class='clear'/>
</b:includable>Jika perintah di atas sudah dilakukan maka menu navigasi Next dan Previous tidak akan mengalami error lagi, jika masih mengalami error pada menu navigasi tersebut silahkan untuk memberitahukan saya melalui komentar di bawah artikel ini, semoga dengan demikian saya bisa membantu kalian untuk menangani masalah tersebut
Baca juga :Itu tadi Cara Mengganti Tombol Next Prev Dengan Judul Postingan Untuk Blogger yang dapat saya bagikan, sekian tutorial dari saya dan semoga berhasil.
Tutorial Menambahkan Widget Blog Recent Post By Label
Cara Menambahkan Widget Latest Post Di Blog
Promo Menarik
maksudnya judul navigasinya tidak tampil?
ReplyDeletebisa aja agan kurang teliti dalam nerapin tutorial ini, coba diteliti lagi.
bisa juga jaringan internet agan mempengaruhi loading blog agan, karena ini menggunakan javascript jadinya akan menambah beban loading blog.
jika masih belum berhasil bisa tanya langsung melalui email saya