Cara Membuat Navigasi Top Of Page dan Top Of Post Pada Blog

Pada suatu halaman blog atau website mungkin kalian pernah melihat fungsi dari back to the top (kembali ke atas) dan ketika tulisan tersebut diklik maka layar monitor kalian akan di kembalikan ke atas halaman. Ada dua fungsi dari navigasi tersebut diantaranya kembali ke atas halaman penuh suatu template (top of page) dan kembali ke atas hanya pada halaman postingan saja (top of post). Nah kalau kalian masih bingung juga tentang apa yang saya katakan, lebih baik kalian coba saja tutorial yang akan saya kasih kepada kalian. Nggak usah takut deh karena kode yang saya berikan nggak terlalu merusak kode template yang kalian punya sekarang.

Biklah langsung saja, Tentunya sekarang kalian sudah "login" pada blog yang kalian miliki, Kemudian masuklah ke bagian "Tata Letak" dan pilih "Edit Html". Sampai di sini kalian harus melakukan "Expand Template Widget" karena kode yang akan kalian cari tidak akan nampak kalau tidak melakukan hal tersebut. Kalau sudah, baru kalian cari code di bawah ini.

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

Kalau sudah ketemu kalian perhatikan kode tersebut apakah sudah persis tampilannya seperti di bawah ini.

<b:includable id='post' var='post'>
  <div class='post hentry uncustomized-post-template'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>

Kalau sudah benar, kalian tambahkan kode expr:id='"post-" + data:post.id' pada kode yang berwarna biru di atas sehingga tampilannya akan tampak seperti di bawah ini.

<b:includable id='post' var='post'>
  <div class='post hentry uncustomized-post-template'  expr:id='"post-" + data:post.id' >
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>

Nah kalau sudah selesai kalian cari lagi code di bawah ini.

<div class='post-footer-line post-footer-line-2'>

Kemudian letakkan kode di bawah ini tepat di bawah kode tersebut.

<a href='javascript:scroll(0,0)' title='Kembali ke atas halaman'>Kembali ke atas halaman</a> |
<a expr:onclick='"javascript:document.getElementById(\"post-" + data:post.id + "\").scrollIntoView(true);"' href='javascript:void(0);' title='Kembali ke atas postingan'>Kembali ke atas postingan</a><div style='clear:both'/>

Kalau sudah, simpan template dan lihat blog kalian. Coba kalian klik tulisannya! Gimana...?