Cara Membuat Navigasi Blog Pager Next - Previous Berupa Judul

CARA Mengubah Menu Navigasi atau Blog Pager "Next" dan "Previous" Berupa Judul Postingan sama dengan mengganti link older post (posting lama) & newer posts (posting baru) seperti yang sudah di-share sebelumnya.

Hanya saja, kali ini posisi dan tampilannya berbeda. Posisinya di bawah posting atau artikel. Tampilannya juga ada tambahan teks menuNext & Previous. Contohnya ada di bawah posting ini. Screenshotnya:

Dengan mengubah tampilan blog pager older-link, home, newe-link menjadi Next Previous plus Judul Posting seperti ini, tentu menjadikan blog lebih SEO Friendly dan User Friendly.

CB share tiga cara, silakan pilih salah satu. Yang pertama bisa dilihat di mkr-site. Dua lainnya hasil modif yang sudah berhasil diterapkan di sejumlah blog klien di Layanan Premium.

CARA 1 : Membuat Previous Next Posts Blogger

1. Template > Edit HTML
2. Cari kodedan ganti dengan kode ini:

2. Copas kode berikut ini di atas kode

atau di bawah kode

3. Copas kode CSS berikut ini di atas kode ]]

.pager-isi{background:white;overflow:hidden;border:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} .pager-isi a,.pager-isi .linkgrey{width:50%;display:block;float:left;padding:10px 0;font-size:120%} .pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none} .pager-isi h6{color:#575757;font-size:105%;font-weight:bold} a.blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2u-fc1LCU3JwCTVuY1fqSLL-pFJExcAzKXgJzYZhEGAfCiXno0JAwMvlSyFHmBMXQYM8fyLlTFMzxCobZAsmUZhEkFrUoxXCYIkDHRB1YRy8enfRospSfZEYOVXjwElrmHkaGsJ-4wvs/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left} a.blog-pager-older-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRxZVH8BYGVuRtwFYB7M8WJNL16GRwUsqcJHip3ctaOLZpCJsOKBETLnt7K6Gmw735ir-c2mqcC-67kf8hU6DTbgdQBb4KzDW1V_WV3BafS8FNpEfoH61EnjVkbQJSq6zIWrzK4iqeYzU/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right} .pager-isi .linkgrey.left{padding-left:3.5%;text-align:left} .pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}

Bisa juga dengan kode berikut ini, simpan di atas kode

4. Save template!

Itu diaCara Membuat Navigasi Blog Pager Next - Previous Berupa Judul. Jika cara di atas tidak berhasil, coba dua cara lainnya berikut ini.

CARA 2 : Membuat Previous Next Posts Blogger

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode

3. Copas kode HTML berikut ini di atas kode