Cara Memasang Back to Top di Blog Blogspot

Tombol "Back to Top" memudahkan user atau pengunjung kembali ke bagian atas blog, dalam satu klik, tanpa harus men-scroll mousenya atau "mengusap-usap" jarinya di "touch pad" atau layar SmartPhone-nya.

CB merasa butuh memasang tombol "kembali ke atas" ini karena kadang/sering harus membuka postingan dengan komentar yang banyak, sehingga "turun banget" dan harus bersusah-payah "scroll" ke bagian atas.

Cara Memasang Back to Top

1. Pastikan di template blog Anda sudah ada kode jquery, yaitu kode seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Atau seperti ini:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Kalau belum ada, lakukan langkah ini:
- Template > Edit HTML
- Cari (CTRL+F) kode </head>
- COPY salah satu kode tersebut dan PASTE di atas kode </head>  tadi.
- Save!

2. Klik "Layout" (Tata Letak)
3. Klik "Add Gadget" di Sidebar
4. Pilih "Javascript/HTML"
5. Copy dan Paste kode berikut ini:

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGOq6SQ5YowuysCVgaj4B8eGlfhWNTJZ0xXtln1t0dQBoGFlQriR9Y6B2Oc_QvMHghFKxyieCGqz2MLyH2aA5s4zvJ6VUyTNdpKCqKmOiELigpTdoodKpbmBloQhIB-oyo3OpjjrqdQL0/s1600/back+to+top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.mbw-back-to-top').fadeIn(duration);
        } else { //www.mybloggersworld.com
            jQuery('.mbw-back-to-top').fadeOut(duration);
        }
    }); 
  
    jQuery('.mbw-back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Kode yang berwarna merah adalah image "Back to Top". Anda bisa menggantinya dengan gambar lain sesuai dengan selera Anda, juga sesuai dengan background blog Anda.

Koleksi Gambar Tombol Back to Top untuk Blog

Ini pilihan gambar/tombol "Back to Top" dan URL-nya yang bisa Anda gunakan. Copas link URL-nya ke bagian yang berwarna merah dalam kode di atas tadi.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhof3OQVaXcwKFc2hpxo2x87DwUgzEz31DHRVEYpEgcCvpK0dAi67X9d8tM7L1WQPP9U-YcAT-IvXWRk7wHGcDfMQrx_zbJOG6YeWK1aby-1GiEdJQX0bgdNP6QcTcO8Ia-rQ7XGJc0yCM/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUK81rBEg6m8glz8fB62EO2ENNYqvIqPicw5aANTRN3LS60th9vRjyKs-ea7GKCu9Q24YZZnmOqFGvbTO3szzcml1YBlxOreewN6FhwmccuD0tKR6obnLEith9AKEdhTZosx_vyt09gBo/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixT-wprxnqHUJZqqJKlqO4ji9q9eUWxzZ0frItrCjeV_amRt7FGUSVQpaKjZ1fRlMWLiZ-mc77ZIYz1vMcHs0BBZpuZbGWR8OOkb0XzpXOSSPfhF7jsEPaCn4MJe8lXhUNtFopwdd4ShI/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_RdDEvhRyhCz-fI6j1M1MGdMRqDzdpr8RAFp8FQ7DxJSgFYLUngXmAUcGihP5gpOYlWSC4DFFjoQs3EvakIbV0166nL3Ek2e3T9-TpDIamTGBgttOjgsgISChhFai1SkEBh9liww0q-w/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisVkg6Bs3bfC0TlOhxmdriejl1YTN9Q9yCO0MoGZRhdVPjwcOu8Amw8YMBo5CDWrGCwZ0BsBryI45wYHNhoVKxSwPh8THEQyHWxJ04IjZijjfEPXXeJRiamYRyjhFFEmoQ9RD89JnhOv0/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim99frmcOfXw-vR6b7TsF3N8l7POTVkY1BBZy8zZA5TMkH092ltYouLwiSbT5Huw8UVOh6DqwTTrfvpvX0utHD0U0m261F1_aJsqh7sddwfa4IgWpP41jm_yaDRG2FkjXweM0KPkD-OdU/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlMu5rEu_VGO4tn5_op7Va5cOIZ01jLMbXK-B6Fal0CJlt76h9Z5yoDwH53njTlJxg6fvqa3dEgAAUnqsVgLpHOjRZPUKiAOpWGa385onIFY3kPztQugC4c1rF9oEOrDBgFCrlu44mXvE/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2sPMyqU98z6arR5_hNJPluRuAGqhVZA_IUnDKItqMt8qRGg5yYEPI63xhi4rleba7wMcYEcRxm0dmyIxVupEP77cvBrmaDBe5km5jDZB07rGMb246ABUYm_OqdrmmL6h4Uubts0B7LQ/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGOq6SQ5YowuysCVgaj4B8eGlfhWNTJZ0xXtln1t0dQBoGFlQriR9Y6B2Oc_QvMHghFKxyieCGqz2MLyH2aA5s4zvJ6VUyTNdpKCqKmOiELigpTdoodKpbmBloQhIB-oyo3OpjjrqdQL0/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmk26LxrRq1_APHntwDtTXeJj2gnM64HVWZdbWi8A5ZD3T6pE0eWU6uPNiGJE9YyN7gJLdL-ghr7uYVFsjhlbK6kZSWTzSWif-ONJLcLhP2sIBo71lb4upC4YNPzN7mFjYZWtWdcmjpYE/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbRBTOa7VhsEuwR9UeAWtRteurstxO-7laXd_PssPtr5CtJidnajXezE-NlZ2Sq0QVOXKC_tdNbDFpnOkQ77HCPmx7Bh9coVvHhlJzr8WFlp4kZ33IEDi6HS1EzgqsVuytWiRWVer8sYE/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqdoHmapIweVTbKjQhSepEujZerLrqugABmqvwC5sgYNl6lBMT8mYYqF4bh4aTrxfbEKFWGjjUMRIHVcIPE9fKQ_TlhbsjDXqK_XmnZGVT4cqZgRYBsU0H7vvntKkLRJFRUvp1PTIocAE/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBx7iADdQerwCvSH8EzuBcnAe5F-8iLU0D86rasWIFLodLnrvktalLd197jXss_IFJePZCrWUu-94hCVqiVlKB_YjEKQTDgvNNgU4noZca3XLxOW99mgwF0MVMXfIoPNNhiRhPTNiBhFU/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHo4R3sPxbpwNrq5_YDhaVIvQglXStD1c9M_aCrea7mhYom7felZKtQqAh6sp2cZjeyRWcfi8s8AuEQrGGB09xsTxU7ium4hNHr7C1u-TFTcG-7RP9lWDllArXs2aLfD9yOPbNNsUkPn8/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiva14KJhQ3JQvu4QGW-4Tru_LOIhxIpTE49qJEDVw0yULTwge2DQRnQCyAe41YDUtg_ipUJeAQjXp_kUlxRgiJOsVvPlJRW2zpgwtfbMlvT4G8ZFV8VcIkX9HDBsF6mNO4_GCzp6NydXE/s1600/back_to_top_button.png

Alternatif Cara Memasang Back to Top

Jika cara di atas tidak berhasil, coba lakukan langkah berikut ini.
1. Layout
2. Add Gadget
3. HLML/Javascript
4. COPAS kode berikut ini dan Save!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >

var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="URL Gambar Back To Top" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },

    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()
</script>

Sumber : http://www.contohblog.com/2014/08/cara-memasang-back-to-top-di-blog.html
                

Read More

Blogger XI PAI 2016

1. Afif Mahmudi

2. Ahmad Fauzan

3. Artony

4. Dita Noor Adawiah

5. Dyah Nurul Ulyana

6. Fitriani

7. Hasanul Bisri

8. Herliana

9. Herlina Safitri

10. Hidayati

11. Jakiah Sulistina

12. Kuntum Tiara Mardatillah

13. Mardiana

14. M. Ahyani

15. M. Iqbal

16. M. Kamaludin Abdi

17. M. Luqmanul Hakim 

18. Muhammad Nuri

19. Muhammad Rizki

20. Muhammad Zaini Mufti

21. M. Hafiz

22. Nisfah Amelia Safitri

23. Nita Lestari

24. Norhayati

25. Noor Khalifah

26. Nor Annisa Fitri

27. Novianti

28. Novi Nur'afni

29. Rizki Ainayah

30. Siti Aisyah

31. Siti Marfuah

32. Shalehah

33. Sholehah Faridatun Jannah

34. Syamsudinnor

35. Tiara Ameliani Putri Novendra

36. Wahyudi

Read More

Kode Kursor Jam

<script>
if(typeof(jQuery) == 'undefined'){
document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
</script>
<style type="text/css">
.css1{ position:absolute;top:0px;left:0px; width:16px;height:16px; font-family:Arial,sans-serif; font-size:16px; text-align:center; font-weight:bold; }
.css2{ position:absolute;top:0px;left:0px; width:10px;height:10px; font-family:Arial,sans-serif; font-size:10px; text-align:center; }
</style>
<script>
/* Clock Configuration */
monosbitdCol='black';   //date colour.
monosbitfCol='purple';   //face colour.
monosbitsCol='blue';   //seconds colour.
monosbitmCol='red';   //minutes colour.
monosbithCol='gold';   //hours colour.
theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
</script>
<script src="http://sites.google.com/site/monosbit/monosbit_cursor_clock.js"></script>

Read More

Blogger XI IPS 4 2016

1. Abdur Rahman

2. Abdus Syahid

3. Ahmad Rizki Wahyudi

4. Ahmad Zaini

5. Aida Fahmudita

6. Amrullah

7. Annisa Nur Pujiati

8. Devitha Septiarini Dwi Hartono

9. Dhiki Fadhillah Ilmi

10. Dila Uswatun Hasanah

11. Hanifatur Rahmah

12. Hasanah

13. Helma Amanda

14. Latifa

15. Linda Listianingrum

16. M. Rafsanjani Chaniago

17. M. Nor Fikri

18. Mawardi

19. Muhammad Fauzan

20. M. Fikriza Akbar

21. Muhammad Yani

22. Muhammad Zakaria

23. Nur Arafah

24. Nurul Hidayah

25. Randy Fahlevi

26. Selvia

27. Siah

28. Siti Saidah

29. Sri Nur Azizah

30. Ul Husna

31. Ulumiah

32. Ummy Qalsum

33. Uswatun Khasanah

34. Zahratunnisa

Read More

Blogger XI IPS 3 2016

1. Ahmad Maulana

2. Ahmad Rizki

3. Ananda Bastari

4. Aprillia

5. Azizah

6. Eri Gunawan

7. Fadli

8. Fahrurrazi

9. Herna Fauziah

10. Hilyatul Aulia

11. Irma

12. Irmawati

13. Kartini

14. Maulida Kusumawati

15. Meininda Yundiafi

16. Muhammad Ali Zainal Abidin

17. Muhammad Edi Irawan

18. Muhammad Irfansyah

19. Muhammad Reza Maulana

20. Muhammad Yusuf

21. Muthi'ah Najah Sugiarto

22. Muslih

23. Nur Avita

24. Nurul Hidayah

25. Nasrullah Ramadan

26. Rizky Putra Pratama

27. Siti Hadijah

28. Siti Nurin Naimah

29. Siti Reihani Jati Saputri

30. Sulis

31. Uswatun Hasanah

32. Vinanda Eka Wulandari

33. Wahyu Sucipto Prasetyo

34. Zainul Eka Pratama

35. Rusiyana

Read More

Blogger XI IPS 2 2016

1. Adinda Nor Safitri

2. Ahmad Erfan

3. Ahmad Hafiz Al-Fikry

4. Ahmad Noridho

5. Ahmad Zaini 

6. Amrullah

7. Anisya Aulia Rahim

8. Destry Anastasya

9. Enisa Ananda Putri

10. Fazrul Huda

11. Fitriani

12. Husnul Khotimah

13. Ivania

14. Laily Alfisah

15. Miftahul Jannah

16. Misna

17. Muhammad Ali Alviannor

18. Muhammad Husaini

19. Muhammad Lutfi

20. Muhammad Irvan

21. Nadea Putri

22. Nahidah

23. Noviyanti

24. Nurhaliza

25. Puja Muharrama

26. Raudatina

27 Rima Melati

28. Shasa Sarmila

29. Siti Azizah

30. Syahrul Rahim

31. Triaty Bella Kusuma

32. Yunisa Saphira

33. Yuwansari Bayu Pramudyo

Read More

Blogger XI IPS 1 2016

1. Abdillah

2. Aida Eka Putri

3. Ahmad Rifky Munada

4. Annisa

5. Apriana Kartini

6. Ariyatna Nur Cahya

7. Fauzan Ansari

8. Istiqomah

9. Jannah

10. Kamila

11. Kurnia

12. Maisarah

13. Mia Kurniawati

14. Muhammad Jundi

15. Muhammad Mahlufi

16. Muhammad Nor

17. Muhammad Rafi'i

18. Muhammad Rosyad

19. Muhammad Syahril

20. Muhammad As'ad

21. Jakiah

22. Nina Rahayu

23. Noor Khalisah

24. Normila

25. Nur Khalifah

26. Nurul Qamariah

27. Pahrul Raji

28. Radiah Saputri

29. Rahmawati

30. Ramadhiyatul Ahadhiyah

31. Rizka Nadia

32. Siti Rahmadhaniah

33. Syahman Maulana

34. Tiara Yuliatiyana

Read More