Breaking News

Seo

Mengganti Navigasi Next dan Previous dengan Judul Postingan

Membuat Navigasi Next Prev Menjadi Judul Postingan

			Https://ajax.Googleapis.Com/ajax/libs/jquery/tiga.Tiga.1/jquery.Min.Js

Kalau belum ada tambahkan dulu kode ini "SETELAH / DI BAWAH" <head>.

			<script src="Https://ajax.Googleapis.Com/ajax/libs/jquery/tiga.Tiga.1/jquery.Min.Js" async="async"/>

KEDUA. Cari <b:includable id='nav-post'> dan ganti semua isinya menggunakan kode ini.

			
<b:includable id='nav-post'>

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

Jika Tidak Ada <b:includable id='nav-post'>

Artinya kemungkinan kamu menggunakan template v3 generasi Contempo, Emporio, Soho, dan Notable. Ingat ya, cara dibawah ini hanya dilakukan jika tidak ada <b:includable id='nav-post'>. Kalau sudah ada skip saja dan lanjut ke langkah ketiga.
			
<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>

Lalu cari ini.

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

Kodenya pasti ada lebih dari satu. Pilihlan yang ada di dalam widget Blog1. Kemudian tambahkan kode ini di dalamnya.

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

Sehingga hasil akhirnya misalnya ini.

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

<div class='post-bottom'>

<div class='post-footer float-container'>

<b:include name='footerBylines'/>

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

<b:include cond='data:widget.type == "Blog"' data='post' name='postFooterAuthorProfile'/>

</div>

<b:if cond='data:view.isSingleItem'>

<b:include data='{ shareButtonClass: "post-share-buttons-bottom invisible", overridden: true ' name='maybeAddShareButtons'/>

<b:else/>

<b:include data='post' name='postFooterJumpLink'/>

</b:if>

</div>

</b:includable>

KETIGA. Agar tampilan dari blog pager next previous dengan judul postingan ini makin cantik tambahkan kode CSS berikut. Simpan "SEBELUM / DI ATAS" </head>.

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

<style>

/* Navigasi Blogger dengan Judul by igniel.Com */

#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:0; font-size:16px; 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:20px; color:#000; text-transform:uppercase;

.Blog-pager-newer-link span:last-child, .Blog-pager-older-link span:last-childdisplay:block; line-height:24px; font-weight:400; text-transform:none;

#blog-pager a.Blog-pager-newer-link:hover, #blog-pager a.Blog-pager-older-link:hovercolor:#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:-10px; width:35px; height:35px; vertical-align:-10px; 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:-10px; width:35px; height:35px; vertical-align:-10px; 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;

</style>

</b:if>

KEEMPAT. Tambahkan script ini dan tempatkan "SEBELUM / DI ATAS" </body>.

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

<script> //<![CDATA[

// Navigasi Blogger dengan Judul by igniel.Com

!Function(t)

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('E b=["\d\p\B\k\o\l\i\g\d\l\e\j\i\f\e\I\e\j\i\k\m\f\D","\d\p\B\k\o\l\i\g\d\l\e\j\i\o\k\z\e\j\i\k\m\f\D","\A\j\e\u","\d\c\c\j","\q\h\g\d\f\s","\q\w\h\g\d\f\s\y\q\h\g\d\f\s","\c\e\G\c","\u\m\j\h\c","\p\g\o\h\c\y\p\g\o\h\c\i\c\m\c\k\e","\u\m\f\z","\q\w\h\g\d\f\s","\A\c\H\k","\l\e\c"];E a=t(b[0]),n=t(b[1]);t[b[C]](a[b[3]](b[2]),x(n){a[b[r]](b[4]+F+b[5]+t(n)[b[9]](b[8])[b[7]]()[b[6]]()+b[v]),b[r]);t[b[C]](n[b[3]](b[2]),x(a){n[b[r]](b[4]+J+b[5]+t(a)[b[9]](b[8])[b[7]]()[b[6]]()+b[v]),b[r])',46,46,'|||||||||||_0x3670|x74|x61|x65|x6E|x70|x73|x2D|x72|x6C|x67|x69||x6F|x2E|x3C|11|x3E||x66|10|x2F|function|x20|x64|x68|x62|12|x6B|var|next|x78|x6D|x77|prev'.split('|'),0,{));(jQuery);

//]]> </script>

</b:if>

PENGATURAN

VariableKeterangan
var nextDefault: Next.

Tulisan untuk navigasi ke artikel selanjutnya.var prevDefault: Previous.

Tulisan untuk navigasi ke artikel sebelumnya.

Perbandingan sebelum & selesainya memakai script untuk mengganti navigasi next previous Blogger menggunakan judul artikel.

Mengubah Navigasi Blog Pager Next Prev Menggunakan Judul

Praktis-mudahan jelas ya. Tutorial yg berhubungan dengan template memang agak ribet karena nama class & id setiap template umumnya tidak sinkron tergantung kesukaan si produsen.

Carilah kode <b:includable id='postPagination'> dan ganti semua isinya seperti ini.

PERTAMA. Pastikan blog kamu sudah dilengkapi dengan library jQuery agar scriptnya mampu berkerja menggunakan baik. Untuk mengetahuinya carilah kode berikut apakah sudah tertulis atau belum:

Cara berikut hanya akan berpengaruh pada menu navigasi di halaman postingan tunggal saja ya. Kalau mau mengubah navigasi di halaman utama bisa coba cara membuat navigasi halaman bernomor di homepage Blogger.

Secara default, hidangan blog pager atau navigasi Blogger dalam laman post hanyalah berupa tulisan "Nextdanquot; & "Previousdanquot; atau "Newer" & "Olderdanquot; saja. Mengganti tulisan tersebut menjadi judul postingan akan menciptakan struktur navigasi menjadi lebih baik. Juga akan membantu pengunjung buat mengetahui apa pembahasan berdasarkan artikel sebelum atau selanjutnya. Tentunya ini akan mengakibatkan blog lebih SEO friendly & user friendly.

Mengganti Navigasi Next dan Previous dengan Judul Postingan Reviewed by Andi Leangle on Juli 31, 2020 Rating: 5

Tidak ada komentar:

All Rights Reserved by Belajar Seo Dan Link © 2017
Powered By Blogger, Share by Andi Leangle

Hubungi Kami

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.