Assalamu'alaikum, 
Selamat Pagi,

Cara tambah scroll back to top button dalam blog | Alhamdulillah, terima kasih ya Allah kerana terus memberi peluang untuk terus bernafas.

Fiza masih lagi dalam proses re-edit skin blog, so banyak benda lagi nak kena ubah dan add-on. Alhamdulillah, pagi ni after subuh... Fiza try buat scroll back to top button dengan bantuan tutorial yang terdapat pada hasil carian google.


cara,buat,scroll,back,to,top,button,

Berdasarkan tutorial yang dikongsikan di laman xomisse.com, berikut adalah cara bagaimana nak tambahkan button scroll back to top:-

Pertama, pergi ke Layout > Add gadget > Add HTML/Javascript Gadget dan copypaste coding berikut di content section.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script>jQuery(document).ready(function() {var offset = 300;var duration = 500;jQuery(window).scroll(function() {if (jQuery(this).scrollTop() > offset) {jQuery('.backtotop').fadeIn(duration);} else {jQuery('.backtotop').fadeOut(duration);}});
jQuery('.backtotop').click(function(event) {event.preventDefault();jQuery('html, body').animate({scrollTop: 0}, duration);return false;})});</script>
<a href="#" class="backtotop">Back to Top</a>

Kemudian, pergi ke Template > Edit HTML dan carikan ]]></b:skin>. Copypaste coding di bawah pada bahagian atas ]]></b:skin>.
.backtotop {position: fixed;bottom: 10px; /* increase value to move position up */right: 0px; /* increase value to move position left */color: #000000; /* color of text */background-color: #ffffff; /* background color of button */ font-size: 12px; /* changes size of text */ padding: 10px; /* add space around the text */text-transform: uppercase; /* change text to all caps */ letter-spacing: 1.0px; /* space between letters */}
.backtotop:hover {background-color: #333333; /* color of background on hover over */color: #ffffff; /* color of text on hover over */text-decoration: none; /* no underline */}

Alhamdulillah, Fiza berjaya menghasilkannya. Bagi memudahkan proses re-edit blog pada masa akan datang, tak perlulah nak google satu persatu tutorial di google... Lebih baik buat entri sendiri. Nanti boleh refer balik. Hehe...