Cara Membuat Smooth Scroll Back To Top di Blog

Cara Membuat Smooth Scroll Back To Top di Blog


Assaalamualaikum wr wb. Cara Membuat Smooth Scroll Back To Top di Blog , Hai Blogger Apa Kabar Hari Ini ?? saya harap baik baik saja ya ,, oke pada postingan kali ini saya akan membahas tentang Cara Membuat Smooth Scroll Back To Top di Blog ,

Back To Top Adalah sebagai jalan pintas menuju tampilan teratas dari blog setelah berada pada scroll paling bawah dari semua tampilan blog. dalam hal ini back to top mempermudah para pengunjung untuk kembali keatas untuk melihat menu utama blog yang dilihat.
lah udah jelas kan ?? ,, Yuk Kita Praktekkan Tutorial nya

Cara Membuat Smooth Scroll Back To Top di Blog


1. Login Di Blogger
2. Masuk Ke Dashboard > Template
3. Edit HTML > CTRL+ F
4. Cari Kode ]]></b:skin>
5. Masukkan Kode Dibawah Ini ,, Dibawah Kode Tersebut

<style>

#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;}
#backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}

</style>

6. Lalu CTRL + F
7. Cari Kode </body>
8. Masukkan Kode Dibawah Ini Diatas Kode tersebut


<div id='backtop'>Back to Top</div>

<script type='text/javascript'>

//<![CDATA[

$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});

//]]>

</script> 

9. Simpan Template > Good Luck :)

Sekian Post  Cara Membuat Smooth Scroll Back To Top di Blog Pada Hari Ini semoga bermanfaat Bagi Kita Semua ,wassalamualaikum wr wb.

Anda Mungkin Juga Tertarik Dengan Ini Template JKT48

Cara Membuat Smooth Scroll Back To Top di Blog

Alternative Link : [ Click Here ... ]

Posted by Ramadhan Ashary | Published at 14.31

32 komentar :

  1. Wah Kayak Di Blog agan ya,, Keren Banget Nih
    Saya Cobain ya Mas :D

    BalasHapus
  2. dicoba dulu gan , , dari dulu gua nyari di google ubek ubek kagak ada , ehk pas berkunjung kesini ada deh :D terims

    BalasHapus
  3. Wahh mantab gan trik nya ..
    saya sudah pasang di blog saya :D

    BalasHapus
  4. wahh keren nih gan cara'a kebetulan kadang saya butuh.. :D

    BalasHapus
    Balasan
    1. hehe semua orang kadang kadang butuh gan :D

      Hapus
  5. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  6. wah keren sob, ijin coba,,,

    BalasHapus
  7. Wiiihh... keren sob, Ijin nyoba hehehe :)

    BalasHapus
  8. Yeah... akhirnya bisa juga gan... Thx gan.. :)

    Bisa di check: http://central-shared.blogspot.com

    BalasHapus
  9. Keren nie,, ijin bookmark ya..

    BalasHapus
    Balasan
    1. Oke Sob :D ,, Di Bookmark juga gk papa :D

      Hapus
  10. keren ini..
    tutorialnya sangat jelas. trima kasih infonya mas admin..

    BalasHapus
  11. izin coba sobb . . .

    mampir diblog ane ya . . . .

    BalasHapus
  12. mantaf gan :3 , izin coba dulu ^_^

    BalasHapus
  13. Makasih ya Infonya ,, keren sob back to top nya :)

    BalasHapus
  14. Bisa juga untuk mempermudah pengunjung untuk kembali ke atas nih :D juga bisa memperkeren blog :D

    BalasHapus
  15. kayaknya keren, langsung dipake.
    makasih sudah share.

    BalasHapus
  16. Mantap gan Trik nya (Y)
    Visit my blog http://bl4ck-screen.blogspot.com/

    BalasHapus

{ Harap Baca }

1. Harap berkomentar dengan bahasa indonesia yang baku tanpa singkatan.
2. Apabila Anda Komentar Thank's Info ,, Nice Post <-- Akan saya Hapus
3. Dilarang Live Link
4. Dilarang Berkomentar berbau Por** and SARA
5. Berkomentar lah Dengan Sesuai Postingan Diatas
6. Jika Anda Mengomentar Enggak Sesuai Topik Gunakan OOT

{+} Ingat Jangan Sekali Sekali Menaruh Link Hidup Maupun Link Mati

 
 
Copyright © 2014 Blog Mas Rama Template Design By | Pathmo