Tips trik tutorial blogspot bagaimana cara membuat tombol back to top tanpa menggunakan JS di blogger http://bigtut.blogspot.com/2014/04/cara-membuat-tombol-back-to-top-tanpa-js.html

GO

Membuat Tombol Back To Top tanpa JS

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

Tombol_Back_To_Top_tanpa_JS

Post a Comment

▲ Back To Top