Memasang Icon Back Top Dan Back Top Melayang

Tutorial kalia ini akan mebahas tetang cara Memasang Icon Back Top Dan Back Top Melayang. Tips-Trik yang sebelumnya membahas tentang judul Blog Bergerak liat saja contohnya di blog saya sekarang :). Sebenarnya sudah banyak yang memposting tips-trik Memasang Icon Back Top Dan Back Top Melayang, misalnya di O-OM dan cidaunsblog dan masih bayak lagi yang lainnya :).Fungsi dari Memasang Icon Back Top Dan Back Top Melayang ini melakukan loncatan dari halaman bawah ke halaman paling atas. Jadi kita tidak perlu lagi melakukan scrollbar pada browser.

Langsung aja deh...!!!

untuk cara pertama memasang icon back top pada pojok kanan bawah.

pertama-tama di pastikan anda sudah mempunyai Accont di Blogger



* Klik Tata Letak (layout)
* Kemudian Edit HTML
* Kemudian Cari kode </Body>
biar lebih cepat ctrl+F

* Kemudian Tambahakan kode berikut di bawah kode </Body>


<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRG42XWv5uPBZvC8YAal7NOB_XrEW13__TnW86Qtxlmc_h2JFEtlYVLkEpkr3pLVsU-ZWA2B_rWbYmF25pGXxs-Ad5p8fAmSPJs6LuuG9Z27J8lqZAPQVsd4n2buYdARoAZGiq1Zm8Z21/s400/Jumptotop2.gif'/></a>

Silahkan ganti yang berwarna code gambar yang berwarna HIJAU sesuai dengan code gambar milik anda :).

sehingga menjadi

</Body>

<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRG42XWv5uPBZvC8YAal7NOB_XrEW13__TnW86Qtxlmc_h2JFEtlYVLkEpkr3pLVsU-ZWA2B_rWbYmF25pGXxs-Ad5p8fAmSPJs6LuuG9Z27J8lqZAPQVsd4n2buYdARoAZGiq1Zm8Z21/s400/Jumptotop2.gif'/></a>


* Kemudian save

untuk memasang Back Top Melayang

silahkan copy code di bawah ini :

Ini Codenya

<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://i554.photobucket.com/albums/jj414/aan_mania/PANAHATAS.jpg" height="25"/></a></div>

Silahkan ganti yang berwarna code gambar yang berwarna HIJAU sesuai dengan code gambar milik anda :).



cara untuk memasang Back Top Melayang seperti ini :

* Masuk ke BLOGGER hingga memasuki Panel Kontrol
* Klik Tata Letak (layout)
* Kemudian Tambahkan Gadget
* Kemudian Tambahkan HTML/Javascript
* Kemudian pastekan code di atas
* Simpan Perubahan
* Selesai


Selamat mencoba Dan Semoga Berhasil :)

Salam

TUTORIAL BLOG