Tombol
"back to top" adalah sebuah feature yang sudah biasa ada pada desain web/blog saat ini. Ditempatkan di ujung bawah sebuah artikel yang panjang atau
nyempil di pojok bawah kanan atau kiri dari page. Untuk fungsinya sendiri kalo menurut saya sendiri ngga begitu penting sih, cuma membuat scroll up otomatis agar pembaca
yang malas tidak perlu repot-repot ngescroll ke atas setelah membaca artikel yang
*mungkin* panjang, udah itu aja fungsinya? iya itu aja. Tapi setelah menekuni dunia desain saya melihat fungsi lain, yaitu sebagai pemanis, pemanis layaknya tahi lalat yang nyempil di muka tapi dengan posisi yang tepat presisius hehe. Ya jadi sebagian besar saya melihat tombol back to top lebih ke nilai desainnya, bisa mempercantik tampilan blog apabila desainnya unik apalagi jika ditambah dengan efek-efek
nyleneh nan unik lainnya :D
Tapi kali ini Anda jangan berharap saya akan memberi desain yang unik untuk tombol back to top tersebut, yang akan saya share hanya dasar-dasar memasang tombol ini saja dan tentu dengan cara termudah tidak neko-neko, selebihnya untuk desain dan efek nyleneh lain Andalah yang harus berkreasi sendiri, berinovasi seliar mungkin, dan dengan sentuhan otak sekanan mungkin ;)
Sidang pembaca sekalian, ada 2 style yang akan saya share yaitu dengan efek fade in fade out dan tanpa efek fade in fade out.
Style pertama, dengan fade in dan fade out
Maksud fade in dan fade out disini adalah, tombol tidak akan langsung muncul kecuali telah di scroll ke bawah. Untuk contoh seperti yang saya pasang di blog ini :)
Untuk memasangnya cari kode
</head> dan kemudian taruh kode berikut sebelum kode
</head>!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});
$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});
</script>
Kemudian masuk ke opsi
Add a Gadget » pilih opsi
HTML/JavaScript lalu masukan kode berikut:
<style type='text/css' scoped='scoped'>
#ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4Km8_N7mF5eAey9mGZ3w5vvx5GVlp1hCaTWquJtQXYeNt_w2gX62zqfJKhcf0alrgFkMbbkhhZkGuVLlvHrzJIBSecSrzBgeZzQXiiwafadryoy-CH4RErpziwtw1cKLPB4xX08b_RSS/s1600/arrow-up_basic_blue.png'/></div>
Style kedua, tanpa fade in dan fade out
Maksud tanpa fade in dan fade out di sini adalah, tombol akan langsung muncul begitu blog dibuka dan stuck di pojok kanan bawah.
Untuk membuatnya jauh lebih mudah daripada style pertama, silahkan tambahkan widget
HTML/JavaScript, masukan kode ini:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href='javascript:void(0);' onclick='jQuery('html, body').animate({scrollTop:0}, 'slow');' title="Kembali ke atas"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2tsCBRKT3Kuc0QRkiMbKfDH23nOMmvp_800hdGEw9QBjk8qEzScnM9bbcFBqMeL0MaQaDwq9iI_RLfdPJFcvb3BWE-z6eBWKaeSSEIZ-E1xJxVFSUoincS_LxbwpwlTzs2LMxvYA7Fcs/s400/Back-to-top.png" /></a>
Catatan!
- Untuk kode yang saya tandai dengan background hitam apabila di blog Anda sudah ada jQuery plugin, silahkan hapus kode yang ditandai. Karena seharusnya tidak boleh ada 2 kode JQuery dalam 1 blog.
- Selanjutnya jika ingin mengganti gambar tombol dengan tombol berdesain kreatif sentuhan tangan Anda, silakan ganti kode yang ditandai dengan font ungu.
Berikut ini saya beri pilihan tombol back to top dengan desain biasa, silahkan Anda gunakan sampai Anda bisa menciptakan tombol Anda sendiri:
1 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVHgvEGs4PQbE09DUuWwhfSb8FMsoouWpINMdR4lZeO3QqmBfvsJrVVEJ7rmawHri9DhvwwF6em3p-TyKTp4jPxYCt1SlMjgm_naGqRM5rERHwAbAH1BzOMmYKAuUSmS3Hbp02Pe3U22s/s1600/1uparrow.png
2 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkaLsyHFbBAix0GkPYJmTXbFl3IBOKfLaQ_cDrEXI33_8Da6la_W1CRB9n4EQ65CvjPqh2ax2Z9bH0xWPy4kRghCNwPdh2RYP4EiVc1PdKCU1VdWgsuxuXGyaUkp2uuQU2VRkcwclQVo/s1600/Up%2520Arrows%2520Icon.jpg
3 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIBdu0cUHKGvma_U5ph_iR-m9lmORurgIc-XUDUIRFpv3HfTkK-w9HBMj9iByRVRVlN1K0rsphHqfrKMa01NP3_rgeEvVKheWr-hKM_LPp3YxB4XugYoOC4EVF2ONylpB26VNNCkEwH28/s1600/Up%2520Icon.jpg
4 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7KLKEjxXSVkUDnMwrK9EWlCx9oaEU2Bd9m5zm46v07ytgehb5IhWA_XZsRaXyFLlDtQ98KfhpFs3NuAnUwtm1Z0LgtbcrTUklg1sKowmWbWm25ny-iFdTEYylvkZJV8QWWrcBhhATrM/s1600/back+to+top+button.png
5 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpZ4xPFYcuaFBoRI3wCAf9J_llCS9nsvpmv09WFXl_baHwFVQCaUfL9a4SOqkq8bi4Nus5QNZtdXqDgJOWPwYx-D-Hn9ecVXU37URYZzuAqA_remHji5jQCOC03yiP8RTS9APzlok9Sr8/s1600/Back_to_top_image.png
6 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJv3sGkbveMXdMQg2R8Bp3tUa_oIHtqHk-QJOwfomrCKAS3hOZc_tURKAcAXRnwPlssmdCKgPpo92LHkCei48XSk_GUh280MeMPK8GI5E6W6MhOS-vGvzOq9dzVq3P1Jvm89MS9KEqp4/s1600/back+to+top.png
7 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndXw8bDXBzUTUFxEFsjVldUQF3r_qqq64-zbyoLkk2Hl1slu61YXsv3Hy9dLwzfiTN6yy1f0wYNY9kveI_at0RUdqQxOXhpKsNxXdgFf7bixJT_m8At2IcnKmsyQ2v09zxkJuCdjD4dI/s1600/back_to_top.png
8 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhor9qpqi-rkzhAUSoK7wLsoWYix791uIKyUh5mA67DRlGI0nGqnqTStL7Z_MQD8khL-abeQQY5UITTWlxNLjNOGeEyVV2JaCYPizYSEJDR9JwDTAFD7L7Muz5r29McorGgpU-nyvHB0w8/s1600/back_to_top_button.png
9 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvXm033bhiEVJIFK-xSZfp_d6OdkWKwFeBTfRfJN9cQl2vScoL2m-1MmcbjeZPapuzVg2_IF1xRowfHchTommJBhVRfmNsnMVITMOdl7HukgyXE1MiVgTCgcbB9cwCAH0predGhmk03I/s1600/back+to+top+icon.png
10 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJekSZMLkVYvUZtu2_35y6bb7Wf2DaDUugfbW6Eph9aBWKb7eJ2B-HM1T9FIE6PHo8pj8sbuQCpGx9lZA0qWfQNeuF_Ua6IEbrYofZk3-QJDJVdNiPfRItYb3vHTrvhDYBAz9CV5AdG5U/s1600/new+back+to+top+button.png
11 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNskFTJoRlfgvLQkSD-o7o7qKKEx3QnSO_vQ3WpB_myRmtMZOrhHiVHkLz4kMgFNeDHDPoomH8osCId5ejSr0GGhPw30_tmOE15h0idaf24Vy2PAgBTAufQFQfR1oBrVlum-ZZa9VvOeY/s1600/rb+back+to+top+11.png
12 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGlKHcjTD0qPwR79e7u8-TxidogTPSY0Ds6K4mvfaRSE84Ce0QP871vrDZ4LZR2rHC2Wg3yU8tC1cAsjKrm0J2kppJBudfcB8B7tC_ZeHg6YcZf7kd83Chnx81AQGoPUSKKaosjhoSqik/s1600/rb+back+to+top+10.png
13 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq1glZ9NvFn7f1Kpnp62y5i-IGDKJSNnWMpMpy3kgqfdDOsmCtLAXlOJyWum-wzN32YB-qBlieIOhyphenhyphenP3qGnfLAA0lHJS21EWu8ZYVjvyfmtN0HcA9xJZIgeaQhyphenhyphen3QK9c3aBuPhj7-DFy4/s1600/rb+back+to+top+1.png
14 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeUP51m1UCo0bcKOak1u4-O9g4XpbikYMW1syLDd6GekadgLto699cYkgR2LR4gudT6J4ZV1NgVSQG0W9fJK1VSG7JMfUQ3XHKSNSyR6yIHAAJWHoXDsPaiWm-ECaqRxPuCwHsodhmE8/s1600/rb+back+to+top+4.png
15 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWcCNh9S91GLo9nRvEgVE-GXl6d6NsgIWZGsKPR8JXAGfEIjq8xBIHzLW8L1gnaYhVwD39r6tDJlGOpoKz4E3_uXqkW-p48NTOLvencpcpt4stVcAxoW0WaI3eZ75389iLQ3pYmjEDSU/s1600/rb+back+to+top+7.png
16 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij8NSNi8PaGo4TMxmzZoSvy0Vo2n9kC7AFOF3qzH7EXEJGhj3zQd6iS23FltePjm4B-gvvczHFnJ6EW2jutIHs9xfZhKO6l_dlGzr4XcXC3cp8f9QcQBHtpA0gi0QoYXJjD0nMnffBhek/s1600/rb+back+to+top+6.png
17 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSo6FF9GxWKVxA-NpKX03CygWJDErXsQbKgih6XcSwdAUuwcAnMl6BskM7fP2uoqTmIiqq1lWYYFmNEEPvjl8LRMka6Ed9po058oodpYyTBDwAMLqXTWXV5s1xuWAFxyQEqqaJu9xtGcc/s1600/rb+back+to+top+8.png
18 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqconGpMzh7DBLMYqrAIBzbtj109pvQWc7NnaulRCBdDz-nhonHdF_zrFpIe6vDyvRFncEJ759uDMctuD8FPZBrfsd_VJjawHzzsKRf4g4YoGW2xsXAI-HykJz9WI2YGnyMTWw26_mwX0/s1600/rb+back+to+top+9.png
19 - Button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDQxKjDPlztZV1ZMI1bljHNwBz5hBU_lYjR5TFu0BxIU_ZWcdiAAqQnv4qk77qACqrHTtwP8RKzxzqyZpjC6DBU8ty4pXqyNKnGzhv-eatZMFolnUT5eOmqCRcHOwEjND-pVKY_D3pNRY/s1600/rb+back+to+top+5.png
Semoga yah bermanfaat kawan ;)
Tidak ada komentar:
Posting Komentar