Cara Membuat Tombol Menu Back To Top

Tombol Back To Top atau Kembali ke atas, bermanfaat banget buat pengunjung blog anda, jadi ketika posisi sudah berada di bawah bagian foote, untuk kembali ke posisi atas tidak perlu menggulung layar menggunakan mouse, tinggal klik tombol Back to top saja, Langkah membuatnya sebagai berikut:

Pilih Template>Edit HTML , lalu cari tag html </body> dengan menggunakan ctrl+f,

Kalau sudah ketemu coba anda cari kode jquery yang di bawah ini :

Jika belum ada, pastekan kode di atas. tepat sebelum </body>

Jika sudah, anda copy kode di bawah

function $(id) {
	return document.getElementById(id);
}

function setStyleDisplay(id, status) {
	$(id).style.display = status;
}

function goTop(a, t) {
	a = a || 0.1;
	t = t || 16;

var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;
	var x3 = 0;
	var y3 = 0;

if (document.documentElement) {
		x1 = document.documentElement.scrollLeft || 0;
		y1 = document.documentElement.scrollTop || 0;
	}
	if (document.body) {
		x2 = document.body.scrollLeft || 0;
		y2 = document.body.scrollTop || 0;
	}
	var x3 = window.scrollX || 0;
	var y3 = window.scrollY || 0;

var x = Math.max(x1, Math.max(x2, x3));
	var y = Math.max(y1, Math.max(y2, y3));

var speed = 1 + a;
	window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
	if(x > 0 || y > 0) {
		var f = "MGJS.goTop(" + a + ", " + t + ")";
		window.setTimeout(f, t);
	}
}

function switchTab(showPanels, hidePanels, activeTab, activeClass, fadeTab, fadeClass) {
	$(activeTab).className = activeClass;
	$(fadeTab).className = fadeClass;

var panel, panelList;
	panelList = showPanels.split(',');
	for (var i = 0; i < panelList.length; i++) {
		var panel = panelList[i];
		if ($(panel)) {
			setStyleDisplay(panel, 'block');
		}
	}
	panelList = hidePanels.split(',');
	for (var i = 0; i < panelList.length; i++) {
		panel = panelList[i];
		if ($(panel)) {
			setStyleDisplay(panel, 'none');
		}
	}
}
/*
Author: mg12
Update: 2008/05/05
Author URI: http://www.neoease.com/
In This blog/web, the code is published by : http://kabelantena.blogspot.com
*/
function loadCommentShortcut() {
	$('comment').onkeydown = function (moz_ev) {
		var ev = null;
		if (window.event){
			ev = window.event;
		} else {
			ev = moz_ev;
		}
		if (ev != null && ev.ctrlKey && ev.keyCode == 13) {
			$('submit').click();
		}
	}
	$('submit').value += ' (Ctrl+Enter)';
}

function getElementsByClassName(className, tag, parent) {
	parent = parent || document;

var allTags = (tag == '*' && parent.all) ? parent.all : parent.getElementsByTagName(tag);
	var matchingElements = new Array();

className = className.replace(/\-/g, '\\-');
	var regex = new RegExp('(^|\\s)' + className + '(\\s|$)');

var element;
	for (var i = 0; i < allTags.length; i++) {
		element = allTags[i];
		if (regex.test(element.className)) {
			matchingElements.push(element);
		}
	}

return matchingElements;
}

window['MGJS'] = {};
window['MGJS']['$'] = $;
window['MGJS']['setStyleDisplay'] = setStyleDisplay;
window['MGJS']['goTop'] = goTop;
window['MGJS']['switchTab'] = switchTab;
window['MGJS']['loadCommentShortcut'] = loadCommentShortcut;
window['MGJS']['getElementsByClassName'] = getElementsByClassName;

})();
</script><a href="https://www.blogger.com/blogger.g?blogID=3527197364712636062#" style="bottom: 5px; display: scroll; position: fixed; right: 5px;" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7bEAISso-5NMhG857AAjTBlvXhxFnnljj1P4OoAmJOI5UGPP4OAELCIAXqhvqX-kyDQruAdKc9wMAkVIFC3yPKFUDKUgzua6JK8-wa6T2fs1dOIUduuHwKeKkzUI_WiDLLdI-HbFTeVB/s1600/back-to-top.gif" onclick="MGJS.goTop();return false;" /></a></div>
<br />

lalu pastekan di atas </body>.

Share To:

kabelantena.blog

View Profile
Terima kasih sudah berkunjung ke kabelantena, semoga bermanfaat,, aamiin..
----------------------------------

Pages

MagPress Blogger Template

Cara Membuat Tombol Menu Back To Top

Share To:

kabelantena.blog

Post A Comment:

Recent Posts

Popular Posts

Gadget

Recent Post

Random Posts

Pages

Pages

Cara Membuat Tombol Menu Back To Top

Share To:

Next

Posting Lebih Baru

Previous

Posting Lama

kabelantena.blog

Post A Comment: