Memasang Icon Back Top Dan Back Top Melayang

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='http://1.bp.blogspot.com/_C6KkooKXCEw/STDLOei9LKI/AAAAAAAACnw/udvHQji9acI/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='http://1.bp.blogspot.com/_C6KkooKXCEw/STDLOei9LKI/AAAAAAAACnw/udvHQji9acI/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


47 comments

avatar
×

coba ahhh............

avatar
×

wow...infonya mantap sob ;;)
terus berkarya ;))

avatar
×

thanks atas info nya

avatar
×

info bagussob,keep shharing ;)

avatar
×

wow info yang sangat keren Q

avatar
sultan safana June 30, 2009 at 8:51 AM
Author
×

blognya asli keren bro.......

avatar
×

pertamax bro... lanjutkan

avatar
×

bisa coba gk ya?
makash sharingnya.

avatar
×

full animasi,,

avatar
×

nanti aq pelajari sob..mksh

avatar
×

thanks infonya friends...GBU

avatar
×

LInknya udah q pasang sob, makasih ya

avatar
×

Kereeeennzzz.....artikelnya ^_^ PR nya juga mantaaaaaaaaaff.. Keep posting Sobat :D

avatar
×

mantab sobat.. info jitu nih.. tengkiyu..

avatar
×

Keren juga tutornya!!!!!

avatar
×

Wah, Sebelumnya,,makasih tas info yang bermanfaat...

blognya UNIK euy...ada smbutan pembukanya..<<

avatar
×

huhu..ya mampir balik...salam yuukk

avatar
×

good sob...
tapi tanganku ngak good...soalnya lupa disable JS

avatar
×

wah mantabs,,,

avatar
×

waah...
setelah dicoba, bener2 KERREN...!!
:D

avatar
×

thanks atas kunjungannya, nice article friend

avatar
×

caranya buat flah merah tu gmn?

avatar
×

kalau pake wordpress gemana sob caranya dan kodenya

avatar
×

berkuncung kawan

avatar
×

makasih informasinya, gw demen kalau yang ada seperti ini ...

ditunggu tulisan spektakuler berikutnya...

avatar
×

wah... mantap postingannya sob..
thank ya sharingnya...

avatar
×

KEREN INFONYA SUKSES YAAAA :)

avatar
×

mantab nih .. sob artikel nya sangat bermamfaat .. sukses slalu yah ..

avatar
×

wah cerdas nih artikelnya :D

avatar
×

wkakwkm !! aneh2 az tapi keren !! :D

avatar
×

;;)) ;)) keren.... mo coba juga...tapi..kyknya gak bisa....gaptek sih..biasanya kalo nyoba widget baru...error jadinya... ~x( :((

avatar
×

bagus mas infone...tukeran link dong mas+followers..kasi komen jg y mas,baru pemula ni :)..makacih..

avatar
×

Bagus-bagus ya artikelnya ,prakteki aaah

avatar
×

keep update ya kawan...
sukses selalu

avatar
×

mantab sob... makasih infonya :D

avatar
×

nggak ah negaggu banget soalnya

avatar
×

Thanks ya ...bermnfaat sekali

avatar
×

maksih an infonya...aku dah pasang tuh...

avatar
×

Makin mantap aja...


http://1001processor.blogspot.com/2009/07/amd-processor.html

avatar
×

wah keren2..
ntar mah mo rajin2 lagi datang n berkomentar di blog ini.
klo ada post terbaru kabari lagi yah

avatar
×

thanks buat infonya

avatar
×

Terima kasih infonya..

numpang copy. hehehe....

avatar
×

info bagus neh.....tks yach..?