Mengganti Prev Next dengan Judul Artikel

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Junior Iqfar - Mengganti Prev Next dengan Judul Artikel di Blog. Telah lama saya tidak mengupdate blog saya ini dikarenakan saya masih terlalu sibuk untuk menulis sebuah artikel.

Pada kali ini saya akan menuliskan sebuah artikel tentang navigasi pada blogger dimana navigasi tersebut secara default bertuliskan prev next atau posting lama dan posting baru. Pada artikel ini turut serta juga peran dari jQuery yang membantu untuk memudahkan penggunaan script. Selain untuk memperindah tampilan, widget ini berfungsi untuk memudahkah pengunjung blog agar bisa mengetahui urutan dari artikel sesuai waktu ditulisnya artikel dalam blog tersebut.

Untuk sobat yang masih penasaran bagaimana tampilan dari Mengganti Prev Next dengan Judul Artikel di Blog, berikut ini saya tampilkan tampilan dari widget blogger ini.

demo

Memasang Kode CSS

1. Masuk ke akun blogger sobat
2. Kemudian masuk ke template
3. Lalu menuju ke Edit HTML
4. Selanjutnya carilah kode di bawah ini dengan CTRL + F

#blog-pager-newer-link

5. Bila sobat sudah menemukan, maka ganti dengan kode di bawah ini

#blog-pager-newer-link {
  float: left;
  padding: 5px 0px;
  text-align: center;
  width: 49%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: rgba( 0, 204, 255, 0.25);
}

6. Selanjutnya carilah lagi kode di bawah ini

#blog-pager-older-link

7. Bila sudah menemukan, maka ganti dengan kode di bawah ini

#blog-pager-older-link {
  float: right;
  padding: 5px 0px;
  text-align: center;
  width: 49%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: rgba( 0, 204, 255, 0.25);
}

8. Sampai disini penempatan kode CSS sudah selesai.
   Sekarang simpan template sobat

Memasang Kode Javascript

1. Masih pada Edit HTML, carilah kode di bawah ini

</head>

2. Jika sudah menemukan maka salin kode ini

<script src='http://dl.dropboxusercontent.com/u/22738692/NextPrevText/script.js' type='text/javascript'/>

3. Dan letakkan sebelum kode ini

</head>

4. Tambahkan framework jQuery.
   INGAT, jika pada template sobat terdapat framework jQuery, maka kode di bawah ini TIDAK PERLU di tambahkan.
   Jika belum terdapat framework jQuery, maka salin kode di bawah ini

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Dan letakkan sebelum kode ini

</head>

5. Sampai disini pemasangan kode Javascript telah selesai.
   Simpan template sobat

Memasang Kode HTML

1. Masih pada Edit HTML, carilah kode di bawah ini

span class='blog-pager-newer-link'

2. jika sudah ketemu, maka hapus kode ini

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'/>

3. Carilah lagi kode di bawah ini

span class='blog-pager-older-link'

4. Dan jika sudah menemukan kode tersebut, maka hapuslah bagian kode ini

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'></a>

5. Maka hasil akhirnya adalah seperti kode ini

<b:if cond='data:newerPageUrl'>
  <span id='blog-pager-newer-link'>
  </span>
</b:if>

<b:if cond='data:olderPageUrl'>
  <span id='blog-pager-older-link'>
  </span>
</b:if>

Meletakkan Widget

1. Masih pada Edit HTML, carilah kode di bawah ini
• Jika sobat menggunakan Membuat Artikel Terkait dengan Scroll maka carilah kode di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>

• Jika sobat menggunakan Membuat Artikel Terkait di Blog maka carilah kode di bawah ini

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

2. Jika sobat sudah menemukan, maka salin kode di bawah ini

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' id='blog-pager-newer-link' title='Artikel Selanjutnya'/>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' id='blog-pager-older-link' title='Artikel Sebelumnya'/>
<br/>
<br/>
<br/>

3. Dan letakkan sebelum kode ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>

atau sebelum kode ini

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

4. Simpan template sobat

Selesai sudah tutorial Mengganti Prev Next dengan Judul Artikel di Blog. Jika sobat merasa bingung atau merasa gagal dalam tutorial ini silahkan saja menuliskan komentar pada akhir posting in.

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait