Merubah Next Prev Blog Dengan Judul Artikel

Merubah Next Prev Blog Dengan Judul Artikel

Untuk membuat tampilan blog lebih lengkap dan dinamis,  terkadang seorang blogging harus
Berupaya bagaimana tampilan halaman blognya terlihat rapi juga lengkap di lihat pengunjung
Seperti pada kesempatan kali ini  saya akan berbagi tutorial  seperti pada judul,  artikel di atas
Sebelumnya sudah saya share tentang, Membuat Random Posts Style Polos, pada postingan
Yang saya bagikan kali juga  sedikit akan merubah, pada next dan prev   pada blogger dimana
Dengan tampilan default nya  hanya biasa saja  maka dengan widget ini  akan sedikit di rubah

Merubah Next Prev Blog Dengan Judul Artikel

Buka halaman berikut untuk melihat demonya :   DEMO

Pungsi next  prev ini  kebanyakan  terdapat  pada  bagian  paling  bawah  postingan  blog kita
Dimana pungsi tersebut untuk memudahkan  pengunjung untuk melihat  artikel sesudahnya
Dan juga artikel sebelumnya dan untuk lebih memudahkan visitor next prev tersebut, akan di
Rubah menjadi teks link  dengan judul artikel  buat sobat yang  berminat  simak di bawah ini

Cara memasangnya :

Pertama anda masuk account blog anda lalu sign in, terus pilih dasboard lalu pilih template
Kemudian pilih edite template,  selanjutnya cari kode  </head>  atau jika template blog anda
Memakai kode  </style>,  copy kode, di bawah ini   dan pastekan tepat  diatas kode,  </head>
Atau paste  kode di bawah,  tepat di atas kode,  </style>, pada element,  template  blog anda

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'type='text/javascript'/>

Jika di blog anda sudah terdapat code jquery jangan di pasang code diatas
Atau hapus code jquery  yang di template  dengan yang ini, versi terbarunya

Tambahan code :

Masih di edit Html jika anda ingin mengganti icon Home di bawah postingan
Cari code  <data:homeMsg/>  code tersebut ada 2,  pilih yang  terdapat pada
Bagian pungsi   next - prev  atau pada  bagian code   <data:newerPageTitle/>
Atau code  <data:olderPageTitle/>,  code  <data:homeMsg/>  ini yang di ganti
Dengan script Url icon Home  pada bagian  template blog kesayangan anda

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwakHw6WZlCg2A4HwxglSRvPRL_nv9Kq6O6iJy533wnk86ByIXFNFim-qQw7kWGjcew-S3P7i6qhADJqhoaSg8yUB-vmHZDNjsFVtpA0mjnjSIet33iX90Awf36yiEEjLMM1K90h7IIROB/s1600/Home+Karrysta.jpg' title='Halaman Beranda'/>

Setelah memasang kode diatas, dengan benar kemudian save template, dan selanjutnya

Berlanjut ke tahap,  selanjutnya memasang  kode Html javascript,  pilih dasboard blogger  
Pilih layout  atau  tata letak,  lalu pilih add widget,  selanjutnya copy  kode di  bawah ini dan  
Pastekan pada  kolom Html,  pada add widget   yang anda  buat tadi,  jangan,  di compose

<script type="text/javascript">
$(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>

Save - simpan widget dan lihat hasilnya

Kode javascript diatas bisa di pasang pada widet lain yang sudah ada atau dengan cara
Buat add widget baru,  bisa di mana saja penempata nya,  tapi lebih tepat di bawah foter

Jika membuat add widget baru jangan lupa hapus kode, dibawah ini untuk menghilangkan
Error Html 5,  pada template  anda, cari kode nya  di bawah ini,  kemudian hapus,  kode nya
Kode tersebut,  terdapat pada  template anda,  cari kodenya  di bagian,  edite  template blog

<b:include name='quickedit'/>

Kesimpulan :

Scripts diatas jika diterapkan sesuai dengan petunjuk  tutorial ini maka  next prev yang terdapat
Pada bagian paling bawah postingan blog anda.  Maka akan berubah  menjadi link judul artikel
Sekian artikel saya pada kali  ini, semoga bisa bermanfaat buat sobat semua "Happy blogging"