Info Lainnya

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

18 Februari 2009

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

5 komentar:

»» LIHAT / TUTUP KOMENTAR

Kempoel Qucluk

makasih ya ilmu nya . . . . join my blog . . .


salam blogger . . . .

franky

Good posting....mantap mo coba dulu

Sinta

Berkunjng..postingan nya sangat bermnfaat n membntu sekli buat saya., thx 4info ;;) Main2 ke blog saya boz..ditunggu..hee

Tefan Day

koq di templateq ga ada code yang diatas??ada cara yang lain ga??terima kasih.. :D

Tefan Day

ooo uda ketemu bang tq

         

:))

;))

;;)

:D

;)

:p

:)

:((

:(

\m/

:-bd

b-(

:-L

@};-

(*)

[-X

~O)

B-)

:!!

:O)

:-??

:-c

:X

=((

:-o

:-/

:-*

:|

8-}

:)]

:ar!

=))

X_X

:-h

:-"

:-t

#:-S

:-?

:-$

#-o

:-B

:bz

o-+

:o3
"Ekspresikan komentar kamu dengan tampilan emoticons di atas"
"Silahkan copy-paste kode shortcut yang ada di bawah gambar untuk menampilkan emoticons pada komentar kamu"
Terima kasih, komentar anda sangat berarti bagi blog ini

Posting Komentar