Back To Top on Blog!

Posted In - 19.09 - 0 komentar
Back To Top adalah button yang bisa mengembalikan kita ke halaman paling atas secara otomatis

Langkah 1:
Buka Dashboard -> Layout -> Edit html
Temukan script di bawah: [ctrl+f]
]]></b:skin>
Apabila sudah menemukannya, tambahkan script di bawah ini, di atas script tadi:
#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
Langkah ke 2:
Temukan script di bawah: [ctrl+f]

</body>
Apabila sudah menemukannya, tambahkan script di bawah ini, di atas script tadi:
<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>
Ganti Image-Url ke alamat model button yang di inginkan
 ------------------------------------------------------------------------------

 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj100gKJDTkhCrNglCNGrSLfipPJgv89aFHXoMTF5hatj-BfWMDKiTuzE2UXVpeMNWvsymX8NxfLxPzE7cZt9m0zag8RuahYP6Mh_wg5d44hyphenhyphenbDwFfbM6K9DnFLbo4n6DH6Pt48sPuQLS9F/s1600/bttp-5.png
 ------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9Na_AqJdXlMEYpASp9A4oVsrWRJez8FaPvOKZ5k3NhFbibqfszv0eg6fBOwif7QGHjFFjbET49rYS_hkSnw_jEIATGcQ3Fk1mndyp2vWR0rFa6WQI4X_Ri1Jp5r7IuvHW5l21Xrw8GMl/s1600/bttp-4.png
------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmAxcQ_TB7N6NH37IRafw3QTP3nMeXJEoRbdbRGdIlVcUJ72a7q7G3fvajmhUyTXMe_C_aDWgQGCiwsvEaJl02R6wuuNuVmEdjyE7IN_n-MMBW1ani6ZV57b2fyL-8dGqWPEXmoXL6_4A/s1600/bttp-3.png
------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKLS2Yq89Zc1J0_VjaPDtmaRFlH_Qqs9h_0g_YCbhD9l06pJvHiWpe-3jxR51pDM0yvMisBsPakW7EDu4VWAKNlMJFRwEB1d9r_A09VftSv2k10fB3V4g4L76lzMg_0ZDCjxUKrI38lk6L/s1600/bttp-1.png
------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9RAEIe0kF-kVo4PkG1T6vdLZECA4RNjw7dZ0end0PrNvK4GPnvFxODYqIKvTirMzEFph2bcH90CuHl4ftHJnyi10LF0Yh9uKGYq9o2fhYBXrSjZTD2hmhUOywWud7DQk_vXooOJa-vjCu/s1600/bttp-2.png
------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO6amkq_zh0-F6OjqeK4xXFtgv_Zp8SOFBk4nt9ZYshfMibMhcGI1RuGbkdcZEi__DG8ddHxuR159qpjbHI6XBhzxk_EdHiFlVjSZ0roY4Vc91umLIgzE9DgfQA2_PAtrq4zt4wne3mosG/s400/bttp-10.png
------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiASE8XP4HhxeQlHhnVlM_3nzUbFWP9VCZ1oSvDbmyYvNXKk0Qc9oD9SySoO6gDBjMWondZcM9THEw0O7xOnGFeNuTDzxYNe16TNbVKX8V48egQ1nyJCJKi03fiC6ksvVgxN4AMB1OdNie8/s400/bttp-9.png
------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdtFNMKZBPmvpqF45Ccf-fKYlD6AmrPy0NL6BniERWns8Sk2nskL3q2EMdGXVcsC6E_tTBYq6A2_cWQqLM2_BNGFo4WJb0t6idIsnST20mIncvFe1YbYp_qWRriXhyphenhyphenHridDoF8AUmKEJcU/s400/bttp-8.png
------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDBghpWj3qx-N-GZK_pxVMGh8ZQGYISjz5ymDizeLd8JJcRna_tKMj4nGnaNd-q5DGA9sYtRNYwYnDLv1dKcoOHSPi6f8voEfEKur0gJGrPDhxmDhzTwbnqCG_T1_veYyW4fmuExEHDLm/s400/bttp-11.png
------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZNrGVoMPrmwABKFwAB2KlJ_LEHIwXzTgexMWIv6PdNzhyphenhyphenckoVT2ohXAAshOCgisT4iJW9vWBQSP4pH-53-cvIEM0oSq55MgBkZddk0mdoen6W_G2SELTCyG0dQMPOou0qpvnVYEmpRb_X/s400/bttp-12.png
------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm_BxPDf1F6GQRDFmH6X_gcEGqrg-Rjnvlmsj_fRhHki_5nQ6at4aMv2M0ET2fIwcjfTShGnPwrJ2VMDix6zjXCHRLAoU8YXXHG2fgPTow0Hq_N8s9qtP11Eld_F4AABVa9UnP-2-TZlH2/
------------------------------------------------------------------------------ 
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs_LSE0G1UEEhfvlJqu6gpsJXQISQApS-Cx5oMgotD3XJe5yRCPPCaM4gP47CPl91lnXCBDb5xawBa3APBVsHULYUsvpqamSq4iT3spwTvBse-TY0N0rioxnoHyVS9mWDvz7Z7wDnp3G2n/s400/bttp-13.png
------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhshJG9GE2jB9rr9MQCzGNgPkMc753fOwZV3UZpnJKx62hYm0wU1e-gGV2ZBlfNJc5IwkNRug1Pn57-WLpAPj6icFdmOtlx91hMdHaNGhwDuElRTo3veQQ6CxkBSnjHvjCo6ptBrpCWHN1k/s400/bttp-14.png

------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8YcI-dss_PUE5BeZAt_eZL5C8dlFa8uNzc4pRhKM2xdzCeYOkIov82pW-ZrOQ-8dyHDslfR_Oqw1W00n45eW0ygfdLAxhjkyrvA9Kghq84JNJYSBxxJUk2gHMn-j8FsTgBMrwuC3VDrmY/s400/bttp-15.png

------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGx9ICz2E0tih7q1wtDO7nKWQCaCfack4adR3jfzUaN5jlGNbEMItZAZk1K9Q5_2G6PdzXR7zo5qc3wGbiuWO8rm6hfq_bxT7g8ignWoXkeBK5fAdkkWii8lJvvHbpidsFkCawNdmtTBH/s1600/bttp-16.png

------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKt4BgOdqSslp338zzTdZ5t0LX0KApJcH_gcANrP3zkFrIhvPu9bKrHlqWoL0FTvRLvJDCL0_D9RPvo2Itw6u7QRUDyylsiZmmpEVePU_lK53GNJ5ba_QtvFWpMZx7lw89WpaP1btaYtC0/s400/bttp-17.png
------------------------------------------------------------------------------

 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAHQx0PRh8KSLrXRWzNaV97WxejL9OASy0DtWgUYBJUq7_PSXlO4DGtFU5tddTW0timwYWB3PDqk0poWXZpkvjTAdN_Z6e3ytT-89CLQ-DgOTsMdx4tKQGd7Szx-WtL5PABmAqWtew8sz_/s400/bttp-19.png
 ------------------------------------------------------------------------------
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWcUJuSvL8SGPpp0sq9bvVDNxBkOUpRe4GWl7xG8D5YELulBWIKxqOvsRzT8xtwDVYybS4mC7rfvf81y1yKopFNhPoZGP5zKYxczYyx46nue3PkBc6U2K08giCkJK4KLDxZRxHHkzzJuT/s400/20.png
------------------------------------------------------------------------------ 

 Setelah mengganti Image-Url dengan gambar yang di inginkan akan terlihat seperti contoh di bawah ini:
<a href="#" id="backtotop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWcUJuSvL8SGPpp0sq9bvVDNxBkOUpRe4GWl7xG8D5YELulBWIKxqOvsRzT8xtwDVYybS4mC7rfvf81y1yKopFNhPoZGP5zKYxczYyx46nue3PkBc6U2K08giCkJK4KLDxZRxHHkzzJuT/s400/20.png" alt="back to top" /></a>
Langkah 3:
Temukan script di bawah: [ctrl+f]
<head>
Dan paste script di bawah ini setelah script di atas:
type='text/javascript'&gt;&lt;/script&gt; 
&lt;script language=&quot;javascript&quot;&gt; $(window).ready(function(){ $('#backtotop').click(function(e)
{ e.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); }); &lt;/script&gt;
kemudian pilih Save Template

Selesai

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 
back to top