AH-SHARED

Creative Is Knowledge

  • Home
  • Tutorial
  • Sitemap
  • About
  • Exchange
  • Search
skip to main | skip to sidebar
Home » Blogger » Tutorial » Cara membuat Back to Top Smooth Effect

Cara membuat Back to Top Smooth Effect

Posted by Unknown
Blogger,Tutorial
Thursday, June 06, 2013
9 Comments
AHS

H
aloo sobat blogger, kalian lagi liburan kan???
ya, di tengah tengah liburan gini, saya ingin berbagi tips dg anda tentang cara membuat back to top smooth effect

jika di tutorial sebelumnya itu ada tombol back to down, kali ini tidak ada sobat, hanya back to top saja.
bagi yang ingin mencoba back to top pada tutorial sebelumnya silahkan ke Cara membuat back to top lengkap

nah,bagi sobat yg udah tau back to top ini, memang benar tampilannya sama dengan punyanya Mas Taufik(author blog DTE)
tetapi, hanya beda kode saja..
penasaran? yuk mulai sobat tutorialnya

Demo
Untuk demo,silahkan lihat saja di blog ini :v


Tutorial Back To Top Smooth Effect


  • pertama, jelas login ke blogger 
  • setelah itu masuk ke template
  • waktu setelah kode dari template anda kebuka, cari kode ]]></b:skin> dg Ctrl+F
  • setelah ketemu kode itu, copy tepat di atasnya kode di bawah ini
#gotop {display:block;cursor:pointer;position:fixed !important;
position:absolute;bottom:-40px;right:-40px;z-index:999;background-color:#067BAF;background-image:-webkit-radial-gradient(top,#2493C4,#086A95);background-image:-moz-radial-gradient(top,#2493C4,#086A95);background-image:-ms-radial-gradient(top,#2493C4,#086A95);background-image:-o-radial-gradient(top,#2493C4,#086A95);background-image:radial-gradient(top,#2493C4,#086A95);-webkit-border-radius:10px 0 0 0;-moz-border-radius:10px 0 0 0;border-radius:10px 0 0 0;border:1px solid #144F69;width:30px;height:30px;overflow:hidden;text-indent:-9999px;-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;}
#gotop:after {content:"";display:block;width:0;height:0;border-width:10px 4px;border-style:solid;border-color:transparent transparent #C3D1D7 transparent;position:absolute;top:0;left:11px;}
#gotop:focus {outline:none}
#gotop:hover:after {border-bottom-color:white}
#gotop:active {background-image:-webkit-linear-gradient(top,#144F69,#2493C4);background-image:-moz-linear-gradient(top,#144F69,#2493C4);background-image:-ms-linear-gradient(top,#144F69,#2493C4);background-image:-o-linear-gradient(top,#144F69,#2493C4);background-image:linear-gradient(top,#144F69,#2493C4);}

  • setelah itu, cari lagi kode </body> dg Ctrl+F
  • setelah ketemu, copy kan kode dibawah ini tepat di atasnya kode </body>
<a id='gotop' style='bottom: 0px; right: 0px;'></a>
<script type='text/javascript'>
$(window).scroll(function() { if($(this).scrollTop() > 200) { $('#gotop')
.show(); } else { $('#gotop').hide(); }});
$('#gotop').hide().click(function() { $('html, body')
.animate({scrollTop:0}, 1000); return false;});
</script>

Nah, sekarang anda sudah selesai sobat

Langkah berikutnya ialah save template anda
dan selamat anda telah berhasil membuat back to top smooth effect
bila ada masalah silahkan komentar dibawah,
sampai jumpa lagi sobat AHS
Tweet

9 Responses to "Cara membuat Back to Top Smooth Effect "

ahs-avatar
Balas
Unknown Author ahs-delete June 6, 2013 at 4:34 PM

Dear Admin
award dibuka,kunjungi http://www.viendyputra.blogspot.com/2013/06/creative-template-hacker-design.html

ahs-avatar
Balas
Unknown Author ahs-delete June 6, 2013 at 5:11 PM

@viendy putra udh daftar kok gan ^^

ahs-avatar
Balas
Ilham Author ahs-delete June 6, 2013 at 8:37 PM

Keren sob tutorialnya

comentback : http://sevenskys.blogspot.com/

ahs-avatar
Balas
Unknown Author ahs-delete June 6, 2013 at 8:40 PM

@M Ilham Margatama siap meluncur ^^

ahs-avatar
Balas
Markus NA Author ahs-delete June 6, 2013 at 8:42 PM

menarik untuk di coba..
http://itsmymarkus.blogspot.com/

ahs-avatar
Balas
Unknown Author ahs-delete June 6, 2013 at 8:44 PM

@Markus NA coba aja :v

ahs-avatar
Balas
Ajie Wicaksono Author ahs-delete June 11, 2013 at 4:03 PM

Terimakasih --" dapet ilmu lah lumayan mampir2 kerumah orang /.. btw mampir kerumah gue dong


www.progralicious.blogspot.com

ahs-avatar
Balas
Ridho M Firdaus Author ahs-delete July 3, 2013 at 4:40 AM

kenapa di blog saya ga bisa ya mas? mohon solusinya.
http://ridhomfirdaus.blogspot.com/

ahs-avatar
Balas
Blogger Dallas Author ahs-delete February 17, 2015 at 11:47 AM

keren nihh gan,, contohnya bisa dilihat di blog saya
Blog Berbagi

:)
:(
=(
^_^
:D
=D
|o|
@@,
;)
:-bd
:-d
:p
Thanks for comments
← Newer PostOlder Post →Home

AH-SHARED On Facebook

Advertise

banner andabanner anda1banner anda2banner anda3
 
AHS2

Labels

AHS OriginalAwardBeritaBloggerC++CheatCSSDewasa(18+)EmoticonEvent AHSFacebookFull PatchGamesGaya HidupHackingInfoInfo JutsuIT InfoKesehatanNarutoNewsPengetahuanProgrammingRemajaSEOSoftwareTemplateTipsToolsTricksTukar linkTutorialUnik

Little About AHS

AH-SHARED didirikan sekitar bulan Agustus 2012 tetapi baru diluncurkan sekitar bulan Mei 2013. Mau tau kenapa?? silahkan simak di... Readmore »

New Update

  • Kumpulan Dork Untuk Deface Website
  • Cara Membuat Comment Form Keren & Tombol Konvert
  • Cara Membuat Comment Blogger dan G+ Berdampingan
  • Cara Membuat Post Di Bagi Menjadi 2 Bagian
Back to top!
Copyright © 2012-2013 AH-SHARED - All Rights Reserved
Design by Angwyn Benvenuto - Powered by Blogger