Cara Menambahkan Back To Top di Blog Untuk Percepat Scrolling

Tambahkan Tombol Back To Top di Blog agar Mempercepat Scrolling



Trisatya Blog.Tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini
Cara Buat Tombol Back To Top di BlogspotFitur back to top yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek ini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti tips & tricks blogger berikut.

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

  • Silahkan login di Blogger
  • Pilih Design > Edit HTML > klik Expand Widget Template
  • Cari kode </body>  (gunakan CTRL+F)
  • Copy kode dibawah ini dan Paste tepat diatas kode  </body> (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi) 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

  • Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas :


<script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhe7hvwlAYz2t7KC0FE9GhvibRcL9T1HoYd1EiPK29C4IytwPD0MtHf2OBGMoxyPJyh8RLHS0bXlUfnpcuGZv8Jp6ZTd1_rqZkbBfh3Ev6yaggFDc8SlQniDfJj_njjiBflqzlb6VmJ4/s1600/back-to-top.gif'/></a>


  • Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai 

atau anda dapat menggunakan back to top tanpa edit html seperti di bawah ini :

BACK TO TOP  ADD WIDGET YANG SIMPLE
pasang Back To Top di Blog untuk Percepat Scrolling


Langkah-langkah pembuatnya :
1. Masuk pada Blogger.
2. Pilih Rancangan > Elemen Laman
3. Add Gadget dimanapun posisinya > Pilih HTML/JavaScript
4. Pastekan kode berikut :

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ExglVoxCBVJBet_wFuwLPiUel7fPktF9WVjMsGo5oQ84MRcH0XidCzxnLs4wzSQ7dEvxQF0T2Exa_H0cGSNPykVYef66QiQkljhIpPT40mp_d7jY4ndXgFRwPLjv570u5zwgj9uXt2U/s1600/back2top-1.png" /></a>

Ganti URL Gambar dengan URL gambar yang anda inginkan (bisa diambil dari beberapa gambar back to top diatas atau dari suber lain).

5. Simpan

UP N DOWN BUTTON


  tombol back to down.Jadi pengunjung langsung bisa ke bagian paling bawah dan juga ke atas dengan hanya mengklik icon back to top dan back to down seperti yang ada pada blog saya.Langsung saja pada intinya,setelah sobat Login ke blog.Pilih"Opsi lainya">>Template>>Edit HTML>>Lanjutkan.
Seletah itu cari kode </body>

Setelah kode diatas ditemukan.Copas kode dibawah ini tepat diatas kode </body>



    <!-- Back To Top-Back To Down -->
    <a href='#' style='display:scroll;position:fixed;bottom:5px;right:15px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='http://i1086.photobucket.com/albums/j454/sudirman10/navigate-up-icthoncopy.png'/></a>
    <a href='#gotodown' style='display:scroll;position:fixed;top:5px;right:15px;' title='Back to Down'><img onclick='MGJS.goDown();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilT2l6XixOAXVaNZQsyb7Jq_yney22wmkeZ6dDfjnWfU67olDjaOZQX9_8SeLCrpdpiNrWzcUHaqWgVMDnWUIj9ndryQsMt67RjfpMytPV85AWuWFa4e3Jy__azcd-4rUSNYabBRqIWhM/s1600/navigate-down-icthoncopy.png'/></a>
    <a name='gotodown'/>
Setelah itu Save dan lihat hasilnya.Sekian artikel Cara Membuat Tombol Back To Top dan Back To Down.Selamat mencoba sobat :)



  • Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai
  • Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai
-->-->

SEO
TUTORIAL BLOG
WIDGET
TOOL BLOG

ARTIKEL LAINNYA :

    INTERNET==================================
    SECURITY======================================
    TRIK WINDOWS============================
    DESIGN========================================
    EARN $==================================





    Penulis : ADMIN ~ Sebuah blog yang menyediakan berbagai macam informasi

    Artikel Cara Menambahkan Back To Top di Blog Untuk Percepat Scrolling ini dipublish oleh ADMIN pada hari Wednesday, June 27, 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 1comments: di postingan Cara Menambahkan Back To Top di Blog Untuk Percepat Scrolling
     

    1 comments:

    1. NakusanSeptember 14, 2012 at 9:12 AM

      makasih sob infonya. saya ma u pasang tp ga tauh caranya...:D

      ReplyDelete

    Subscribe to: Post Comments (Atom)
    Zona Download Software Gratis
    DESIGN
    SECURITY
    TOOLS WINDOWS
    • CamStudio 8  (Tool untuk merekam layar komputer ke format video)
    INTERNET
    AUDIO/VIDEO
    OTHERS