Search

10 Ogos 2013

Letak Button Back To Top

Meletakkan button 'back to top' biasanya digunakan untuk blogger yang kebiasaannya mempunyai entri yang panjang, ataupun entri blog tersebut sentiasa mempunyai komen yang banyak atau mungkin juga sebagai penyeri agaknya.:)
anda boleh melihat contoh back to top button di blog demo ini.





Walaupun terdapat pelbagai cara yang agak advance dengan kesan yang lagi hebat-hebat, tetapi entri ini akan menunjukkan cara yang paling ringkas untuk meletakkan button back to top ini. Tidak perlu pening kepala kerana ia hanya menggunakan beberapa step sahaja.:)

Berikut adalah tutorial untuk meletakkan button back to top dalam blog.


1. Login akaun blog anda, kemudian dari dashboard > design > add a gadget > html/javascript

2. Paste kod di bawah ke dalam ruangan html/javascript

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar"></a>



Masukkan url gambar dengan url gambar 'arrow back to top' anda.

Disini ada beberapa jenis arrow diletakkan, hanya untuk memudahkan. Tetapi jika anda ingin mencari pelbagai lagi jenis back to top arrow, anda Google sahaja.


http://img338.imageshack.us/img338/9871/2evyotw.gif


http://img132.imageshack.us/img132/5848/totopbutton.png


http://img175.imageshack.us/img175/7297/up3.png


http://img28.imageshack.us/img28/2494/30720265.png


http://img529.imageshack.us/img529/1986/96133335.png


http://img294.imageshack.us/img294/9831/14193731.gif


3. Apabila selesai save dan lihatlah hasilnya.:)

Tiada ulasan:

Catat Ulasan

Buat BLOG Sendiri

  1. Permulaan : Daftar Akaun Blogspot
  2. Post Entri Dalam Blog
  3. Upload gambar dalam blog
  4. Upload video dalam blog
  5. Letak video dari Youtube dalam blog
  6. Letak kod HTML/javascript dalam blog
  7. Setting asas untuk blog
  8. Cara backup template blog
  9. Website untuk download template blog
  10. tukar template blog
  11. Buka link apabila klik gambar
  12. Background bagi setiap entry
  13. Letak iklan nuffnang statik
  14. Disable right click
  15. scroll-box-untuk-widget
  16. button-back-to-top
  17. Letak background dalam entri
  18. Letak-widget-popular-post-dalam-blog
  19. cara buat textbox dalam blog
  20. Dropdown menu dalam blog
  21. Image magnify
  22. Tutorial Link warna-warni (rainbow link)
  23. Buat gambar bergerak (scrolling image)
  24. Ketahui komen pada entri melalui email
  25. Letak icon pada URL blog
  26. Daftar dan letak shoutmix pada blog
  27. Read more dalam blog : Cara 1
  28. Read more dalam blog : Cara 2
  29. Letak Signature Dalam Blog
  30. Letak website lain dalam blog
  31. Daftar dan letak linkwithin
  32. Tukar ayat asal linkwithin
  33. Ketahui bilangan pengunjung online
  34. Ubah lebar ruangan komen
  35. Letak website lain dalam entri
  36. Tukar warna background blockquote
  37. Background bergambar pada blockquote
  38. Letak gambar sebelah tajuk entri
  39. Letak tajuk entri pada readmore
  40. Perkataan bergerak (scrolling/marquee text)
  41. Letak salji dalam blog
  42. Ruangan komen bawah entri
  43. Video player kepada mp3 player
  44. Cara dapatkan url gambar
  45. Sistem rating pada blog
  46. Recent Comment dalam blog
  47. Widget Popular Post
  48. Tutorial Widget Popular Post
  49. Tukar Cursor Dalam Blog
  50. Jadikan Cursor Berkilau
  51. Animated Recent Post Widget
  52. Recent Post with Thumbnail
  53. Misterlinky - Cara Mudah Pengunjung Blog Tinggalkan Link
  54. Saiz Gambar Maksimum Dalam Blog
  55. Ubah Lebar Gambar Dalam Entri
  56. Jumlah Post dan Komen dalam Blog
  57. Facebook Share Button
  58. Facebook Like Button
  59. Button Like Untuk Blog
  60. Scrollbox Untuk Widget
  61. Disable highlight dalam blog
  62. Ketahui kelajuan load element blog
  63. Cara letak sitemap dalam blog
  64. Bubble cursor untuk blog
  65. Tutorial gerakkan title blog
  66. Tutorial hasilkan title blog bergerak
  67. Tips menaip entri dalam blog part 1
  68. Tips menaip entri dalam blog part 2
  69. Tukar warna text highlight
  70. Following star pada cursor
  71. Tutorial perkataan ikut cursor
  72. Letak emotion icon dalam komen
  73. Cara unfollow blog
  74. Tukar gambar apabila dilalukan cursor
  75. Kesan khas pada gambar apabila dilalukan cursor
  76. Cara buat scroll box untuk blog archive
  77. Tutorial tab menu / navbar menu
  78. Energy saver untuk blog anda
  79. Animated recent post ver2