Tips trik tutorial bagaimana cara membuat tombol back to top tanpa menggunakan JS
Kebanyakan tutorial blogspot memberikan trik membuat tombol back to top biasanya dengan JS, dan ini berdampak terhadap kecepatan loading blog
Dengan cara ini, diharapkan tanpa menggunakan JS, maka oading blog akan lebih cepat
1. Tahap Pertama
Taruh code CSS ini berada diatas ]]></b:skin>
#paling-atas{display:block}
.back-top{float: right;font-size:80%;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin2cyvbQBXnOkhSdcnFQ1JwM8C8LYtqRPS_gcke9oyedo2W5gOARA-teNoPv5c_t2HAJOeGJxTZQq3Khq70I2YWqDvQJBe4saKA2hpn3wfiMU9HJoeSQYe5-LWZwUkF6hNOvGjPyDzXG8/h120/back-top.png") no-repeat scroll 50% 10px rgb(50, 132, 214);right: 2em;position: fixed;bottom: 0px;z-index: 999;padding: 20px 5px 0;width:30px;line-height:13px;
text-align: center;border-radius:3px 3px 0 0;border: 1px solid rgb(17, 17, 17);}
a.back-top{bottom:-38px}a.back-top:hover{color: rgb(114, 7, 4);bottom:0;transition: all 0.7s ease 0s;}
2. Tahap Kedua
Taruh code berikut, tepat sebelum code </body>
<p style="display: block;"><a class="back-top" href="#paling-atas" title="Back To Top">Back To Top</a></p>
3. Tahap Ketiga
Taruh code ini, tepat dibawah <body>
<a id='paling-atas'></a>
Simpan pengaturan templatenya, lalu lihat hasilnya beserta pengaruh loading blognya, juga semua browser dan mobile

Post a Comment