Cara Membuat "Back To Top" pada Blog

Saya sering melihat blog yang kalao blog tersebut di geser ke bawah akan muncul icon yang bertulisan "Back To Top". Itu artinya apabila kita ingin kembali ke bagian paling atas blog, kita tinggal klik icon itu, dari pada kita menggeser dengan scroll pada komputer kita.
Nah itulah yang membuat saya ingin berbagi dengan Teman-teman di sini. Jika sobat t"net berminat, silahkan ikuti Langkah-langkahnya.!

Seperti biasa Login ke Blogger---->>Rancangan---->>Edit HTML
Cari kode ini </body>
Setelah ketemu, letakkan kode di bawah ini tepat di Atas kode </body>

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>

Keterangan:

Kode yang berwarna MERAH, adalah alamat URL dari icon/gambar yang akan anda pasang.
Tulisan berwarna HIJAU, adalah posisi dari icon/gambar yang akan anda gunakan.

Nah trik ini hanya memberikan Langkah untuk "Back To Top" biasa, ika kalian mau yang lebih komplit kalian bisa pake cara kedua dibawah ini :

Kamu cari lagi kode seperti ini ]]></b:skin>

Letakkan kode di bawah ini tepat di atas (sebelum) kode ]]></b:skin>

#Kaluhur{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
#Kaluhur a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
#Kaluhur img{border:0}
#Kaluhur a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}

Kemudian cari kode seperti ini <body> dan letakkan kode di bawah ini tepat di bawah (setelah) kode <body>

<div id='Kaluhur'>
<a href='#' onClick='window.location.reload()' title='Reload page'>
<img src='http://i580.photobucket.com/albums/ss248/z33s/refresh.png'/></a>
<a expr:href='data:blog.homepageUrl'><img src='http://i580.photobucket.com/albums/ss248/z33s/house.png'/></a>
<a href='#' title='Ke Atas Halaman'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
<a href='#footbar' title='Ke bawah halaman'>
<img src='http://i580.photobucket.com/albums/ss248/z33s/down.png'/></a>
</div>

Keterangan:
^_^ Tulisan warna MERAH, adalah alamat url icon/ gambar yang kita gunakan
^_^ Tulisan warna HIJAU, adalah posisi dari icon/gambar yang akan kita gunakan.

Kemudian SAVE

0 komentar:

Sekedar catatan:

Kotak pada kolom blok komentar ini masih kosong. Maka merupakan suatu kehormatan jika sobat menjadi orang yang paling pertama menuliskan komentar, baik berupa pujian, masukan, kritikan, maupun pertanyaan di kolom komentar yang terletak di bawah kotak ini.

Tak ada yang bisa saya berikan selain ucapan terima kasih karena telah memberikan apresiasi terhadap artikel-artikel KARTA JAYA WEB

Posting Komentar

KARTA JAYA WEB

13 Januari 2011

Cara Membuat "Back To Top" pada Blog

0 komentar: