Membuat Tombol Back To Top Dengan Before And After

Tombol Back To Top Dengan Before And After
Kali ini kita akan membuat membuat tombol back to top atau scroll to top dengan menggunakan kode CSS :before dan :after sehingga tidak menggunakan gambar. Ya...setidaknya akan sedikit merampingkan size blog. Bagi yang sudah mengenal koding mungkin ini akan mudah saja, namun bagi yang baru mengenal istilah koding, mungkin ini akan sangat sulit.

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

Sebenarnya saya sudah men-sharing cara membuat tombol back to top (tanpa scroll) dan scroll to top pada postingan dahulu. Silahkan baca postingannya di link di bawah ini:
Namun kali ini saya akan merekomendasikan kode scroll to top dari +Kang Ismet  karena scriptnya lebih simple dan memiliki efek bounce pada halaman ketika sampai ke atas. 

Baiklah kita mulai membuat tombol back to top ini dengan kode :before dan :after.

1. Silahkan copy kode 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:&quot;&quot;; 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:&quot;&quot;; 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:&quot;&quot;; 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 kode javascriptnya dari Kang Ismet (langkah ke-2). Silahkan menuju postingannya DI SINI. Dan simpan kode javascript-nya di atas kode </body>

3. Kemudian simpan kode di bawah ini persis di bawah kode 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 seperti pada gambar thumbnail di atas atau pada tombol back to top blog ini (jika tombolnya belum saya ganti lagi hheehehe).

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

Selamat mencoba dan berkreasi...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments