Membuat Tombol Back To Top Dengan Before And After

Kali ini kita akan menciptakan membuat tombol back to top atau scroll to top dengan menggunakan instruksi CSS :before dan :after sehingga tidak menggunakan gambar. Ya...setidaknya akan sedikit merampingkan size blog. Bagi yang sudah mengenal koding mungkin ini akan gampang saja, namun bagi yang gres mengenal istilah koding, mungkin ini akan sangat sulit.

Nah bagi yang gres mengenal koding, silahkan simak postingan ini dan silahkan pelajari atau mungkin mau memakainya...ya silahkan saja. Atau mungkin Anda modifikasi tombolnya sehingga tampilannya dapat sesuai dengan blog Anda.

Sebenarnya aku sudah men-sharing cara menciptakan tombol back to top (tanpa scroll) dan scroll to top pada postingan dahulu. Silahkan baca postingannya di link di bawah ini:

• Membuat Back To Top Button
• Membuat Scroll To Top Button

Namun kali ini aku akan merekomendasikan instruksi scroll to top dari +Kang Ismet  alasannya yaitu scriptnya lebih simple dan mempunyai efek bounce pada halaman dikala hingga ke atas. 

Baiklah kita mulai menciptakan tombol back to top ini dengan instruksi :before dan :after.

1. Silahkan copy instruksi CSS di bawah ini dan simpan di atas kode ]]></b:skin>

#BounceToTop {background:#D2D2D2;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;border-radius:2px;padding:5px;display:none;}
#BounceToTop:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #A6A6A6 transparent; line-height:0;}
#BounceToTop:hover:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #464646 transparent; line-height:0 }
#BounceToTop:after {content:""; position:absolute; bottom:5px; right:11px; width:0; height:0; border-style:solid; border-width:0 9px 12px 9px; border-color:transparent transparent #D2D2D2 transparent; line-height:0;}

2. Silahkan copy instruksi javascriptnya dari Kang Ismet (langkah ke-2). Silahkan menuju postingannya DI SINI. Dan simpan instruksi javascript-nya di atas instruksi </body>

3. Kemudian simpan instruksi di bawah ini persis di bawah instruksi javascript yang dari Kang Ismet tadi.

<div id='BounceToTop'/>

4. Terakhir silahkan save templatenya. Dan tombolnya akan berada di sebelah kanan bawah blog Anda, dan penampakannya menyerupai pada gambar thumbnail di atas atau pada tombol back to top blog ini (jika tombolnya belum aku ganti lagi hheehehe).

Ada sedikit perbedaan jikalau menggunakan trik ini, jikalau Anda klik tombol back to top-nya maka tidak akan ada penambahan instruksi (#top) pada link postingan yang akan tampak di address kafe browser.

Selamat mencoba dan berkreasi...

Sumber https://www.kompiajaib.com/

Share this post