Membuat Tombol Back To Top Dengan Before And After

Membuat Tombol Back To Top Dengan Before And After

Bola Hero Gawai

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...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

56 Comments Add Comment

mas kompi kok gak pernah ngebuat template lagi yah? sepi bangetnih, gak ada pembuat lagi!! :(
where are u maskolis !!

Balas

Iya mas...hehehe...
Nanti juga Maskolis pasti muncul... :D

Balas

Jadi tambah keren tombol back to topnya kalau di pasang before dan after ini, terasa lebih hidup lagi :D super keren :D

Balas

Warna templatenya berubah drastis :D
Merah = Abu-Abu

Balas

mantap hover komentar di home pagena :-bd

Balas

Dengan ini lebih gampang ngutak ngatik warnanya mas :D

Balas

Iya mas sudah cukup lama pakai merah... :D

Balas

Biasa kang manpaatkeun script-na Maskolis hehhehe...

Balas

mantep CSSna kang :-d

Balas

Ah biasa wae kang Is :D

Balas

tapi lebih baik kayak gini kayaknya.. pas make langsung share.. jadi ga banyak yang nanya caranya.. jangan salah nanti pasti ada yang nanya hover pada thumbnail :)

Balas

Heheheehe...iya kang...(hadeueuhh kang Ismet ngabales kamari yeuh heueheuehe...)

Balas

hihih hari ini kompi ajaib tukar baju nih... text di bagian sinebar kok tidak gunakan text oswald mas, kan lebih cantik lihatnya :)

Balas

Silahkan mas Syarif :D

Balas

Hehehehe iya salin doang sis... pake font luar agak membebani blog sis, jadi pakai font default aja.

Balas

Kayaknya sama seperti di template Mas Sugeng (Fastest Magz)
Tutorial yg bagus gan :D

Balas

Cool bgt kang warna templatenya..... Keren!

Balas

Itulah css bisa seperti apa aja ya mas...
Tapi kalo yang di template mas Sugeng dipatok di footer ya...

Balas

Rada teu serab, benten sareng beureum nya kang...hehehe :D

Balas

Abu-abu teh cenah mah artina bijaksana, kedewasaan, tidak egois, tenang dan seimbang. Muhun kang cocok... Jadi suasana na tidak membosankan he..

Balas

pusing atuh da kang... setiap aya nu baru.. pasti aya wae gimana caranya :)

Balas

wow perubahan drastis :D trlihat mungil tp keren gan.
mampir kegubuk saya gan dan tolong kasih saran kekuranganya. soalnya sy jga gnti template
http://hekos-soft.blogspot.com

Balas

Oohh kitu kang...siippp... :-bd :D

Balas

Siipp mas....meluncurrr.... :D

Balas

wah baru lagi nih.. ga ada demonya ya mas ? :(

Balas

Demonya langsung saya pakai di pojok kanan bawah mas :D

Balas

wow, keren dan super keren kang,
Terimakasih sudah share,sangat membantu nih ^_^
#salam damai kang!
- Blogwalking yuk - - KarcakZone - :D

Balas

+kang Ismet - Untuk hover pada thumbnail, bisa diambil di template pakdhe Johny Maskolis.

Balas

Salam damai juga mas Rio :D

Balas

wah tambah keren nih mas :)

Balas

Heehehehe makasih :D

Balas

tapi ga papa kang banyak yang nanya juga, ini kan juga buat inspirasi postingan :d

Balas

kalo saya udah ada bawaan templatna kang, tapi tak bungkus dulu nih kang tutorialnya

Balas

@johny: perasaan ga nanyain ya wkwkwkwk

Balas

Siipp itu lebih bagus kang jadi ga ribet :D

Balas

bukannya kang ismet bilang "jangan salah nanti pasti ada yang nanya hover pada thumbnail".

Balas

Usul mas, apakah mas kompi tidak share tentang tampilan lawas Kompi ajaib, soalnya saya sangat penasaran, maklum namanya juga anak baru :D

Balas

Ohh :D, saya kira nanya, heheh, maaf deh kang ismet, saya tidak fokus membaca karena mengantuk.

Balas

Keren mas, ijin pake .. :D

Balas

Silahkan kang Eful :D

Balas

Wah file xml-nya udah ga ada mas :D

Balas

ijin pake gan ,jadi mantaf blog ane hehehe :D

Balas

johny Mascolis bukannya sdh master :p

Balas

Silahkan mas semoga bisa berguna :D

Balas

nyobian kode CSSna ah ;)

Balas

Mangga kang Ismet :)
Pasti langkung sae kang Ismet mah hehhehe :D

Balas

ah sok kitu.. tos dipasang kang :-d

Balas

Mas.. cara mengganti tampilan blog-pager seperti di blog mas adhy gimana??

Balas

Ohh itu...coba baca komentr ini mas
http://www.kompiajaib.com/2013/10/menyembunyikan-blog-pager-di-halaman.html?showComment=1380624317833#c9031915631979416351

Balas
This comment has been removed by the author.

kok di blog aku ga muncul mas? UDah aku simpen jsnya dr kang ismet trus ikutin cara diatas

Balas

Dicoba lagi sis, mungkin ada kesalahan penempatannya.

Balas

Kang nanya nih. Cara bikin tombol back to top sama yang go to down itu bisa gak?

Balas

gimna script button untuk kembali kemenu sebelum'y??? (HTML)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×