This is BizOppers
Online Job for All. Work from home computer.

22 Sep 2010

Memasang Tombol Back to Top ( Kembali ke Atas ) di Blogger

Persiapan :
  1. Sebelum melakukan perubahan, sebaiknya back-up terlebih dahulu template Anda sebagai antisipasi kalau-kalau terjadi error.
  2. Gunakan Ctrl+F untuk memudahkan pencarian Kode HTML
  3. Siapkan 3 gambar kalau perubahan akan menggunakan gambar kemudain upload gambar tersebut ke Picasa Album atau ke tempat lain misalnya photobucket.com, imageshack.com, tinypic.com, dan sebaginya.
  4. Catat seriap URL dari gambar yang bersangkutan.


Halaman blog yang panjang mungkin salah satu hal yang tidak disukai oleh pembaca. Solusinya pada halaman home jangan terlalu banyak menyimpan jumlah artikel. sebaiknaya dalam halaman home mempunyai maksimal 5 - 10 artikel dan ditambah dengan pemanfaatan fungsi read more (baca selengkapnya).

Tapi kalau memang elemen blog atau artikel yang panjang bagaimana? pembaca akan lebih malas mengscroll kembali ke atas halaman page untuk mengakses menu lain. Kalau begitu silakan saja pasang "Icon Back To Top" (tombol Icon kembali ke atas) yang memungkinkan pembaca lebih mudah kembali ke atas halaman. Tombol Icon tersebut selalu terletak pada tempat atau posisi yang tetap walaupun adanya scrolling page.

Berikut kode "Icon Back To Top" (tombol Icon kembali ke atas) dan design yang dapat Anda pilih
:

Masuk ke dasbor > tata letak > edit html > Letakan kode di atas </body>


<!-- www.googlid.tk -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopbiru.png'/></a>

<!--
www.googlid.tk -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophitam.png'/></a>

<!--
www.googlid.tk -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophijau.png'/></a>

<!--
www.googlid.tk -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopkuning.png'/></a>

<!--
www.googlid.tk -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopmerah.png'/></a>

<!--
www.googlid.tk -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotoporange.png'/></a>

<!--
www.googlid.tk -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotoppink.png'/></a>

<!--
www.googlid.tk -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopungu.png'/></a>

selamat mencoba


Artikel Terkait :
Komentar Terbaru

Tidak ada komentar:

Posting Komentar