Memasang Icon Back Top Dan Back Top Melayang

by Muhammad Aan , at 5:14:00 AM , have 55 comments
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


Muhammad Aan
Memasang Icon Back Top Dan Back Top Melayang - written by Muhammad Aan , published at 5:14:00 AM, categorized as Blogger , Tips , Trik . And have 55 comments
55 comments Add a comment
Dinarni
wow...infonya mantap sob ;;)
terus berkarya ;))
Reply Delete
R-E-Z-A
info bagussob,keep shharing ;)
Reply Delete
narti
bisa coba gk ya?
makash sharingnya.
Reply Delete
R15AL
nanti aq pelajari sob..mksh
Reply Delete
Gadis liar
LInknya udah q pasang sob, makasih ya
Reply Delete
Pujangga
Kereeeennzzz.....artikelnya ^_^ PR nya juga mantaaaaaaaaaff.. Keep posting Sobat :D
Reply Delete
cemacem
mantab sobat.. info jitu nih.. tengkiyu..
Reply Delete
Cha' Bie
huhu..ya mampir balik...salam yuukk
Reply Delete
The_JaeV
Wah, Sebelumnya,,makasih tas info yang bermanfaat...

blognya UNIK euy...ada smbutan pembukanya..<<
Reply Delete
kumpulan tutorial blog
good sob...
tapi tanganku ngak good...soalnya lupa disable JS
Reply Delete
IT ConsultanT
waah...
setelah dicoba, bener2 KERREN...!!
:D
Reply Delete
Lora Amir Husin
thanks atas kunjungannya, nice article friend
Reply Delete
zan
caranya buat flah merah tu gmn?
Reply Delete
aswad
kalau pake wordpress gemana sob caranya dan kodenya
Reply Delete
rizal
makasih informasinya, gw demen kalau yang ada seperti ini ...

ditunggu tulisan spektakuler berikutnya...
Reply Delete
Imoel
wah... mantap postingannya sob..
thank ya sharingnya...
Reply Delete
eRGe
mantab nih .. sob artikel nya sangat bermamfaat .. sukses slalu yah ..
Reply Delete
SEO Pemula
wah cerdas nih artikelnya :D
Reply Delete
TOMATO
wkakwkm !! aneh2 az tapi keren !! :D
Reply Delete
Tisti Rabbani
;;)) ;)) keren.... mo coba juga...tapi..kyknya gak bisa....gaptek sih..biasanya kalo nyoba widget baru...error jadinya... ~x( :((
Reply Delete
Arief
bagus mas infone...tukeran link dong mas+followers..kasi komen jg y mas,baru pemula ni :)..makacih..
Reply Delete
Ronaldo Rozalino
Bagus-bagus ya artikelnya ,prakteki aaah
Reply Delete
Flash-Man
keep update ya kawan...
sukses selalu
Reply Delete
aan damar
mantab sob... makasih infonya :D
Reply Delete
Bang Fajar
maksih an infonya...aku dah pasang tuh...
Reply Delete
Neneng M.
Makin mantap aja...


http://1001processor.blogspot.com/2009/07/amd-processor.html
Reply Delete
Ricky Bachtiar
wah keren2..
ntar mah mo rajin2 lagi datang n berkomentar di blog ini.
klo ada post terbaru kabari lagi yah
Reply Delete
Dadang Asep F
Terima kasih infonya..

numpang copy. hehehe....
Reply Delete
Bagaweb
info bagus neh.....tks yach..?
Reply Delete
4shared mp3 downloads
wah udah lama nih cari info yg beginian. Thanks sob atas infonya & happy blogging
Reply Delete
Fahrizal Dwi Indrawan
Mana Melayang Nya Mas Kok Gak Ada Melayang Tuh ZBack Top Melayan Seperti Apa....?
Reply Delete
Cancel Reply
GetID
Copyright ©2013 Blog Mas Aan
Designed by Damzaky - Powered by Blogger