Slider[Style1]

Style2

Style3[OneLeft]

Style3[OneRight]

Style4

Style5

Membuat auto scroll ada banyak cara, di antaranya adalah dengan cara membuat link ke bagian div yang di inginkan atau juga dengan cara memasukkan script autoscroll dengan javascript, kali ini saya coba membahas bagamaimana cara membuat autoscroll dengan script jquery yang menurut saya auto scroll ini tampak lebih dinamis ketika kita melihat bagian header dari blog kita maka autoscroll tersebut tidak muncul dan ketik kita scroll menuju ke bawah blog baru autoscrollnya muncul (bingung ga sih-red), dan efeknyanya seperti accordion, sangat mulus ketika meluncur ke atas.
Cara membuatnya mudah sekali
1. Pertama masuk ke halamat edit HTML
2. Kemudian masukkan kode ini <a href='#' id='toTop'>^ Scroll to Top</a> sebelum kode </body>
3. Kemudian masukkan kode di bawah ini :
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
di atas kode  ]]></b:skin>
4. Setelah itu masukkan kode jquery ini :
<script src='http://subagya.googlepages.com/jquery-1.3.2.min.js' type='text/javascript'/>
  <script src='http://subagya.googlepages.com/jquery.scroll.pack.js' type='text/javascript'/>
  <script type='text/javascript'>
            $(function() {
                $(&quot;#toTop&quot;).scrollToTop();
            });
        </script>
sebelum kode </head>
5. Simpan dan lihat hasilnya.

Kalau mau lihat lebih detail lagi silahkan meluncur ke sini sekalian lihat demonya biar yakin xixixixi.

About Subagya

Hello readers, im Guruh Subagya, i'm start blogging at 2008, i'm person who interest with technology, blogger, and others stuff related to internet marketing. Hope you enjoy with my post information. Happy Blogging
«
Next
Newer Post
»
Previous
Older Post

98 comments:

  1. wakakkaka, bener bro. mulus banget jalan scrollnya :D

    ReplyDelete
  2. kode .js nya dong mas... kekeke

    ReplyDelete
  3. wow mantap, saya sudah melihat demonya. Sepertinya pas buat para blogger yang suka menulis artikel tanpa menggunakan readmore.
    AKu bookmark dulu, ntar aku pasang di model template yang sedang aku modif..
    makasih atas sharing artikel ini.

    ReplyDelete
  4. lo pakai GooglePages? katanya mau tutup ya?
    kalao tutup beneran blog bisa ncur lhak'an

    ReplyDelete
  5. wah, bagus ni tutorialnya. langsung nyoba..

    ReplyDelete
  6. tips yang menarik mas.. saya pelajari dulu caranya

    ReplyDelete
  7. Langsung praktek dan meluncur dengan pasti kang :)

    TTg mano, ga tau tuh disuntik apaan bisa segede gitu he.h.e..

    ReplyDelete
  8. Wah, mantap nih. Bisa dipake di wordpress ngga mas, sori ngga pake blogspot.

    ReplyDelete
  9. kalau ke purwokerto. silahkan mampir mas

    ReplyDelete
  10. @ all > membuat jump to top ini sangat mudah

    ReplyDelete
  11. Mulus banget, naik ke bagian atas websitenya bagus. top markotop lah.
    btw, lama tak jumpa

    ReplyDelete
  12. Mo tak coba di blog yg baru ni, thx sharingnya mas. matur nuhun

    ReplyDelete
  13. kekkekekekkee jquery nya puwanjaaang, pake manual aja wes #

    ReplyDelete
  14. keren mas. sambil dipraktikin dulu yah.:D

    ReplyDelete
  15. Sore Suhu,...
    no comment dulu. sumpeh gw masih geleng-geleng ama suhu yang makin melekat dengan kode-kode.
    welleh-welleh,....

    ReplyDelete
  16. ini kode buat jump to top ya sob..? saya buka link demonya tapi ga kebuka2.. -_-

    ReplyDelete
  17. to belajar seo > bisa ko demonya sudah saya check

    ReplyDelete
  18. dah ke tekape.. mulus euy :D

    ReplyDelete
  19. Sip tipsnya, bisa langsung dicoba tuh

    ReplyDelete
  20. kerennnnnnnnnnn....langsung coba!!

    ReplyDelete
  21. makasih tips nya mas saya coba buat nambah ilmu

    ReplyDelete
  22. wah ini tips buat belajar newbie blog kaya gue sangat berarti banget...makasih mas

    ReplyDelete
  23. blog saya masih baru.. nanti coba pasang ah, btw koleksi templatenya keren2 bro..!

    ReplyDelete
  24. terima kasih atas support yang diberikan terhadap template baru kami

    ReplyDelete
  25. thank's cuma kira-kira diberi nama apa ya, bingung nich

    ReplyDelete
  26. Artikelnya bagus sekali, terimakasih.

    From:
    Agung Nugroho (celunk)
    Owner http://icakicik.com

    ReplyDelete
  27. Bos mochal.., scroll yang bisa goyang kiri-kanan ada gak :D

    ReplyDelete
  28. hmmm.. I do use this smooth scroll back to top with jquery. this nice n easy to used.

    if u want to tweaking more, its can modify to scrolling content. :D

    ReplyDelete
  29. Wah, ini sangat berguna sekali. Langsung praktek neh. Tararengkyu bos!!!

    ReplyDelete
  30. wah keren banget nih... langsung praktekkkk

    ReplyDelete
  31. klo liat dan baca disini jadi gampang, thank buat pencerahannya

    ReplyDelete
  32. langsung praktek...makasih ya atas tips nya dan ditunggu posting selanjutnya.

    salam

    ReplyDelete
  33. tips dah dilaksanakan...mudah mbanget ya. thank for sharing.

    salam
    Mengembalikan jati diri bangsa

    ReplyDelete
  34. wah ini materi yang saya cari. Sangat berguna sekali bagi saya. Thank's yah bro.

    ReplyDelete
  35. Emang manteb mas Jquery, naik ke topnya lembut.
    sluur,,

    ReplyDelete
  36. wahduwh susah mas...say ga isa-isa..gaptek saya ini...

    ReplyDelete
  37. Keren mas.. Walaupun agak susah dimengerti.. Maklum masih nyubi.

    ReplyDelete
  38. keren broer...teruskan.

    salut buat bagi bagi ilmunya

    ReplyDelete
  39. wah sayang wordpress.com tidak bisa dipasangi seperti blogspot yah!?
    Tapi postingan ini sangat bermanfaat sekali.

    ReplyDelete
  40. mas subagya,
    makasih yach atas infonya ini. sangat bermanfaat bagiku

    ReplyDelete
  41. mantap juragan...sangat bermanfaat bagi newbie sepertiku. dan juga banyak rekan lain yang berkomentar, menandakan artikel juragan subagya emang oye

    ReplyDelete
  42. Pak Subagya,
    bagi bagi ilmunya sangat bermanfaat bagi saya sebagai newbie. ditunggu artikel artikel nya yang lain

    ReplyDelete
  43. Muantep gan...lanjut terus dengan artikel artikel lain yang bermutu, kan kukunjungi blog ini secara teratur

    ReplyDelete
  44. Hi,
    makasih atas sharing pengetahuan yang berguna ini.

    salam
    Acai Berry

    ReplyDelete
  45. bermanfaat mas tutorilanya tapi java scripnya ga di share ya mas ... biar bisa link dari web sendiri gitu...

    ReplyDelete
  46. wah makin mantap aja nih terima kasih gan buat infonya

    ReplyDelete
  47. keren browww.... perlu di coba nich....

    ReplyDelete
  48. tak coba dulu yah mastah, mampirlah ke blog saya yah tentang Ikan,ikan, dan ikan

    ReplyDelete
  49. gak mudeng kalo dah pake bahasa pemrograman ^-^

    ReplyDelete
  50. kadang dah pake plugin juga masih bingung aku...apalagi harus pake kode html gini..

    ReplyDelete
  51. bingung bahasa gituan:D, tp makasih dah mau share:)

    ReplyDelete
  52. wah, mantep bener bro.. berarti yang kayak tulisan back to top itu ya? atau ada perbedaan? thanks..

    ReplyDelete
  53. Astaga keren niey Infonya!!!
    Semoga bermanfaat..
    Thx mas

    ReplyDelete
  54. Sedang belajar php, belum nyampai ilmu jquery.

    ReplyDelete
  55. asli msh kurang ngerti saya dengan javascript :(

    ReplyDelete
  56. Perlu kitab jquery nie kyknya.
    seru sih, tp ribet. Memang itu tantangan programmer. :)

    ReplyDelete
  57. Thx info nya boss dan thanks juga untuk backlinknya

    ReplyDelete
  58. Thanks tutornya...Coba ahhh

    ReplyDelete
  59. ni kode buat jump to top ya sob..?

    ReplyDelete
  60. Asyik dapet ilmu lagi disini, terima kasih ya.

    ReplyDelete
  61. kayaknya tingkat tinngi banget nih tipsnya gan.. ane coba ah di blog ane. makasih infonya

    ReplyDelete
  62. Siiip....Ane coba nih gan tips nya...
    Makasih dlu gan...

    ReplyDelete
  63. information helpully, please keep sharing...

    ReplyDelete
  64. wah...
    moga jd ilmu yang bermanfaat kangmas.. :)

    ReplyDelete
  65. makasih atas bantuannya. sukses selalu

    ReplyDelete
  66. Bakal saya coba di blog saya yang pake blogspot. Semoga ga terlalu bingung mengingat ini ilmu baru buat saya..
    Btw, makasih share-nya..

    ReplyDelete
  67. mantap gan...boleh dicoba tuh

    ReplyDelete
  68. mantap gan !! :D
    ini yang ane cari² dari kemaren, makasih ya ! :D

    ReplyDelete
  69. Mantap banget gan .. Thxs atas Informasiny

    ReplyDelete


Top