Cara menampilkan Next Post dan Older Post dengan menampilkan Judul Postingan dibawahnya, hal ini untuk memudahkan pengunjung untuk melihat postingan sebelum dan sesudahnya.
Langkah-langkah menampilkan Next Post dan Older Post dengan menampilkan Judul Postingan :
- Pada dasbord blog, klik "Tema" atau "Template"
- Kemudian klik "Edit Tema"
- Cari kode : </head>
- Simpan kode berikut di atas kode </head>
<!--djCode menampilkan next post--> <b:if cond='data:blog.pageType == "item"'> <style> .halaman{padding:5px 0;background:#fff;border-top:2px solid #9ACD32;border-bottom:3px solid #9ACD32;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> - Cari kode : <div class='post-footer-line post-footer-line-3'>
- Simpan kode berikut di bawah kode
<div class='post-footer-line post-footer-line-3'><!--djCode menampilkan next post2--> <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> </b:if> - Penempatan kode tersebut disesuaikan dengan template blog yang anda gunakan
- Penempatan kode tersebut bisa disimpan di atas kode
<div id='related post'> (kode posting terkait)
atau di atas kode <div id='comments'> (kode kotak komentar), tergantung keinginan. - Anda bisa mengganti kalimat yang diberi warna merah dengan kalimat keinginan anda
- Previous bisa diganti dengan Artikel Selanjutnya
- Newest bisa diganti dengan Artikel Terbaru
- You are reading the newest post bisa diganti Anda sedang membaca postingan terbaru
- Next bisa di ganti dengan Artikel Sebelumnya
- Next Post bisa di ganti dengan Artikel Sebelum artikel ini
- You are reading the latest post bisa diganti Anda sedang membaca postingan pertama
- Cari kode : </body>
- Simpan kode berikut di atas kode </body>
<!--djCode menampilkan next post3--> <b:if cond='data:blog.pageType == "item"'> <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> - Cari kode : <b:include name='nextprev'/>
- Hapus kode tersebut dan ganti dengan kode berikut
<!--djCode menampilkan next post4--> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:include name='nextprev'/> </b:if> </b:if>
Kode tersebut di atas sebenarnya hanya menambahkan kode yang diberi warna biru
- Apabila kode <b:include name='nextprev'/> tidak ada
- Cari kode <b:includable id='nextprev'>
- Tambahkan kode yang diberi warna Catatan Biru seperti kode lengkapnya di bawah
- Setelah selesai, klik "Simpan Tema/Template"
Catatan :
Catatan :
Apabila di template blog anda belum di pasang kode JavaScript, silahkan anda simpan kode JQuery di atas </head>
<b:includable id='nextprev'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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> <b:if cond='data:blog.pageType == "item"'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> <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'/> </b:if> </b:if> </b:includable>
Apabila di template blog anda belum di pasang kode JavaScript, silahkan anda simpan kode JQuery di atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'/>
atau (kode jquery yang otomatis update):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
Tidak ada komentar:
Posting Komentar
silahkan anda berkomentar dengan kata-kata yang sopan dan membangun