Saturday, July 21, 2012

Memasang Tombol Back to Top

By Sriudin sahrudin   Posted at  1:51 PM   Blogger No comments

Tujuan membuat tombol back to top dalam blog adalah agar para pengunjung blog merasa lebih mudah untuk kembali ke bagian atas blog kita. Walau mereka bisa kembali ke bagian atas blog dengan cara menggulung scrool namun dengan adanya tombol back to top ini akan lebih mempermudah, yaitu cukup dengan satu klik saja, maka mereka langsung di bawa ke bagian atas blog kita.

Untuk membuat tombol yang kita maksud, kita hanya membutuhkan kode berikut:



<script type="text/JavaScript">
var topMargin = 300
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)

function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}

function main() {
if (ns4) {
this.currentY = document.floatLayer.top;
this.scrollTop = window.pageYOffset;
mainTrigger();
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}

}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
floatStart();
}
animator();
}


}
function floatStart() {
var now = new Date()
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime()
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
this.A = this.A > 0 ? this.findHt : -this.findHt
} else {
this.D = this.currentY
}
}
function animator() {
var now = new Date()
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
newY = Math.round(newY)
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )floatLayer.style.pixelTop = newY
if ( ns4 )document.floatLayer.top = newY
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
}
}
//-->
</script>
<div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" width="15" src="http://lh4.ggpht.com/_RVpTV2JOOxA/TBfOGtzKPKI/AAAAAAAADFY/gas3AV0xDus/back_to_top01_t4belajarblogger.png" height="25"/></a></div>





Cara memasangnya seperti biasa, login ke blogger >> Tata letak dan Tambah Gadget HTML. bagi teman-teman yang ingin mengganti gambar back to top, maka bisa diganti link yang berwarna seperti ini. tampilan dari link gambar di atas adalah seperti berikut ini:
tampilan01




Di atas adalah kode dan langkah-langkah untuk memasang tombol back to top yang letakknya mengikuti gerakan scroll browser, selanjutnya bagi teman-teman yang ingin memasang tombol back to top melayang/berada di kanan slalu (bisa diatur letaknya, NB ==> kode yg tlah saya sediakan di bawah ini sudah diatur untk tampil di bagian kanan bawah), maka tman2 bisa memperaktekkannya melaui langkah-langkah berikut:

Login ke blogger >> Tata Letak >> Edit HTML

Kemudian letakkan kode berikut tepat di bawah kode </Body>




<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src='http://lh4.ggpht.com/_RVpTV2JOOxA/TBfOGtzKPKI/AAAAAAAADFY/gas3AV0xDus/back_to_top01_t4belajarblogger.png'/></a>



Tampilan:
tampilan02




Simpan hasil kerjaan anda!




Nb:

Teman-teman juga bisa memilih beberapa gambar back to top berikut ini



back to top02
http://lh6.ggpht.com/_RVpTV2JOOxA/TBfOG8xv1OI/AAAAAAAADFc/txSeorezV5E/back_to_top02_t4belajarblogger.gif


back to top03
http://lh4.ggpht.com/_RVpTV2JOOxA/TBfOG70ZLRI/AAAAAAAADFg/a_QGnyThMsY/back_to_top03_t4belajarblogger.gif






Semoga Bermanfaat

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

0 komentar:

Back to top ↑
Connect with Us

What they says

© 2013 BLOG SI PALUI. WP Mythemeshop Converted by Bloggertheme9
Blogger templates. Proudly Powered by Blogger.