Cara Mengganti Next-Previous Newer Older Post dengan Judul Tulisan

DI bawah postingan blog Blogger, biasanya ada blog pager berupa link bertuliskan Newer Post, Home, dan Older Post atau Next Post dan Previous Post.

Tautan NextPrev tersebut adalah navigasi blog sekaligus link internal ke tulisan sebelumnya dan berikutnya. Kita bisa mengganti link tersebut dengan yang lebih SEO dan ramah pengguna (user friendly), yaitu dengan menggantinya menjadi judul tulisan atau postingan.

Dengan begitu, pembaca akan langsung tahu artikel sebelum dan sesudah postingan yang baru saja dibacanya. Ini contohnya:

Next Post Home Older Post dengan Judul

Cara Mengganti Next-Previous Newer Post Older Post dengan Judul Tulisan

Berikut ini Cara Mengganti Next-Previous (Newer Post – Older Post) dengan judul tulisan

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .halaman{padding:5px 0;background:#fff;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>

2. Simpan kode berikut ini di atas kode <b:if cond=’data:post.hasJumpLink’> atau di atas kode <div class=’post-footer’>

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

3. Simpan kode berikut ini di atas kode </body>

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> $(document).ready(function(){ 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").text(); $("a.blog-pager-newer-link").text(newerLinkTitle); }); 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); }); }); </script> </b:if>

4. Cari dan ganti kode berikut ini:

 <b:include name='nextprev'/>

dengan kode ini:

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

5. Simpan Template!

Beres. Kini tulisan Newer Post dan Older Post sudah berganti menjadi judul postingan.

Cara Mudah Mengganti Nextprev dengan Judul

Jika cara di atas dirasa rumit, lakukan cara berikut ini. Namun, Anda tetap harus melakukan langkah no. 4 di atas agar blog pager tidak ganda.

1. Tema > Edit HTML
2. Lakukan langkah no. 4 di atas.
3. Simpan kode berikut ini di atas kode <b:if cond=’data:post.hasJumpLink’> atau <div class=’post-footer’>

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .halaman{padding:5px 0;background:#fff;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> <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'> $(document).ready(function(){ 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").text(); $("a.blog-pager-newer-link").text(newerLinkTitle); }); 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); }); }); </script> </b:if>

Save!

Cara Membuat Previous Next Post Judul Postingan di Blogger Terbaru

Ini cara mengganti next-prev menjadi judul artikel di Blogger terbaru (versi 3). Blogger terbaru maksudnya template dan layout Blogger versi tema Contempo, Soho, dkk.

1. Pastikan ada seperti di bawah ini (kode jQuery). Jika tidak ada, pasang di atas kode </head>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” async=”async”/>

2. Cari kode <b:includable id=’postPagination’>

3. Ada dua kode. Ganti semuanya dengan kode ini:

<b:includable id=’postPagination’>

<b:if cond=’data:view.isPost’>

<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’>Newer</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’>Older</a>

</span>

</b:if>

<a class=’home-link’ expr:href=’data:blog.homepageUrl’> Home</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’/>

</b:if>

</b:includable>

4. Pasang Kode CSS untuk mengatur desain tampilannya. Copas di atas kode </b:skin>

#blog-pager {margin: 20px 0 0;display: inline-block;width: 100%;border-bottom: 1px solid #eee;padding-bottom: 15px;}

#blog-pager a.home-link {display:none}

#blog-pager {margin:20px 0px; display:inline-block; width:100%;}

#blog-pager a.blog-pager-newer-link, #blog-pager a.blog-pager-older-link {font-weight:700; font-size:14px; padding:0px; overflow:hidden; line-height:initial; display:block; width:100%; border:0px; background:transparent;}

#blog-pager a.blog-pager-newer-link {padding-right:5px;}

#blog-pager a.blog-pager-older-link {padding-left:5px;}

.blog-pager-newer-link span:first-child, .blog-pager-older-link span:first-child {font-size:15px; color:#c00; text-transform:uppercase;}

.blog-pager-newer-link span:last-child, .blog-pager-older-link span:last-child{display:block; line-height:normal; font-weight:700; text-transform:none;color: #48d;}

#blog-pager a.blog-pager-newer-link:hover, #blog-pager a.blog-pager-older-link:hover{color:#ff5722; background:transparent;}

#blog-pager-newer-link {float:left; text-align:left; width:50%;}

#blog-pager-older-link {float:right; text-align:right; width:50%;}

#blog-pager-older-link span:first-child::after {margin-right:-7px; width:25px; height:25px; vertical-align:-7px; display:inline-block; transition:all .3s ease; background:url(“data:image/svg+xml,<svg viewBox=’0 0 24 24′ xmlns=’http://www.w3.org/2000/svg’><path d=’M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z’ fill=’%231d2129’/></svg>”) no-repeat; content:”}

#blog-pager-newer-link span:first-child:before {margin-left:-7px; width:25px; height:25px; vertical-align:-7px; display:inline-block; transition:all .3s ease; background: url(“data:image/svg+xml,<svg viewBox=’0 0 24 24′ xmlns=’http://www.w3.org/2000/svg’><path d=’M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z’ fill=’%231d2129’/></svg>”) no-repeat; content:”}

@media only screen and (max-width:640px){

#blog-pager {display:block;}

#blog-pager-newer-link, #blog-pager-older-link {float: none; width: 100%; display: block; text-align: center;}

#blog-pager-older-link {margin-top:20px;}

}

5. Pasang Kode JS Navigasi Blog Pager Next – Previous Post Berupa Judul Postingan berikut ini di atas kode </body>

<b:if cond=’data:view.isPost’>

<script> //<![CDATA[

// Navigasi Next Prev

!function() {

var next = ‘Next’;

var prev = ‘Previous’;

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?”:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!”.replace(/^/,String)){while(c–){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return’\\w+’};c=1};while(c–){if(k[c]){p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,’g’),k[c])}}return p}(‘C c=[“\\g\\s\\B\\i\\u\\n\\j\\k\\g\\n\\e\\h\\j\\f\\e\\H\\e\\h\\j\\i\\m\\f\\z”,”\\g\\s\\B\\i\\u\\n\\j\\k\\g\\n\\e\\h\\j\\u\\i\\A\\e\\h\\j\\i\\m\\f\\z”,”\\x\\h\\e\\t”,”\\g\\d\\d\\h”,”\\p\\l\\k\\g\\f\\o”,”\\p\\v\\l\\k\\g\\f\\o\\J\\p\\l\\k\\g\\f\\o”,”\\d\\e\\I\\d”,”\\t\\m\\h\\l\\d”,”\\s\\e\\f\\d\\h\\E\\j\\d\\m\\d\\i\\e”,”\\t\\m\\f\\A”,”\\p\\v\\l\\k\\g\\f\\o”,”\\x\\d\\G\\i”,”\\n\\e\\d”];C a=$(c[0]),b=$(c[1]);$[c[y]](a[c[3]](c[2]),w(r){a[c[q]](c[4]+F+c[5]+$(r)[c[9]](c[8])[c[7]]()[c[6]]()+c[D])},c[q]);$[c[y]](b[c[3]](c[2]),w(r){b[c[q]](c[4]+K+c[5]+$(r)[c[9]](c[8])[c[7]]()[c[6]]()+c[D])},c[q])’,47,47,’||||||||||||_0x9c5e|x74|x65|x6E|x61|x72|x6C|x2D|x70|x73|x69|x67|x3E|x3C|11|_0x42fcx3|x2E|x66|x6F|x2F|function|x68|12|x6B|x64|x62|var|10|x79|next|x6D|x77|x78|x20|prev’.split(‘|’),0,{}));

}();

//]]> </script>

</b:if>

Catatan:

1. Di Blogger V3 biasanya sudah ada kode

<b:include cond=’data:view.isPost’ name=’postPagination’/>

untuk menampilkan navigasi link next-prev. Jika tidak ada, maka tambahkan kode itu di bawha kode

<b:includable id=’postFooter’ var=’post’>

Demikian Cara Membuat Navigasi Blog Pager Next – Previous Post Berupa Judul Postingan, khususnya di template bawaan Blogger. (Sumber)

Cara Mengganti Next-Previous Newer Post Older Post dengan Judul Tulisan

Cara Mudah Mengganti Nextprev dengan Judul

Cara Membuat Previous Next Post Judul Postingan di Blogger Terbaru

Related posts

Social Network