[quote][b][u]Thanks to :[/u][/b]
[b]- Angell de Ville[/b] for the simplified Enter Page script and
[b]- Podo[/b] for the Different JS Script for IE and FF[/quote]
Preview (lihat via IE dan FF utk mengetahui perbedaanya OK
)
[url]http://profiles.friendster.com/bangkanal[/url]
Selamat malam para FTI'ers semua. Disini aku ingin memberikan tutorial membuat ENTER PAGE yang aku tambahkan dengan script JS berbeda untuk browser IE dan FF. Aku utak-atik script ini karena ada sahabatku di FTI'ers yang pernah kirim comment ke FS aku dan mengatakan kalau aku ini jahat karena FS ku tidak bisa dilihat via IE
Untuk itu, aku dedikasikan hasil utak-atik scriptku ini untuk dia. Terima kasih banyak [b]Jeng Linniie[/b] untuk idenya. Sekarang FS ku sudah bisa dilihat via IE
Mari kita mulai :
[b][u]Syarat2nya adalah :[/u][/b]
[b]1. Buat HTML untuk tampilan ENTER PAGE kalian[/b]. Aku akan share script HTML aku. Ini dia dan silahkan kalian edit sendiri OK :-)
[quote]<html>
<head>
<title>ENTERING BANG KANAL'S PAGE</title>
<META NAME="Generator" CONTENT="EditPlus">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<!--
.styling{
background-color:black;
color:lime;
font: bold 16px MS Sans Serif;
padding: 3px;
}
-->
</style>
</head>
<body bgcolor='#000000'>
<script type="text/javascript">
/*
Simple Image Trail script- By JavaScriptKit.com
Visit
http://www.javascriptkit.com for this script and more
This notice must stay intact
*/
var trailimage=["http://img518.imageshack.us/img518/549/imageoj6.gif", 211, 37] //image path, plus width and height
var offsetfrommouse=[10,-20] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0 //duration in seconds image should remain visible. 0 for always.
if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')
function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}
function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""
}
function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
if (typeof e != "undefined"){
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined"){
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
gettrailobj().display="none"
else
gettrailobj().display=""
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}
document.onmousemove=followmouse
if (displayduration>0)
setTimeout("hidetrail()", displayduration*1000)
</script>
<center><br><TABLE BORDER=7 CELLSPACING=5 CELLPADDING=5 WIDTH=100%>
<TR HEIGHT=200>
<TD WIDTH100 ALIGN=CENTER BGCOLOR=#000000><img src="http://img401.imageshack.us/img401/1416/menucm0.gif" border="0"></TD>
</TR>
</TABLE>
<TABLE BORDER=7 CELLSPACING=5 CELLPADDING=5 WIDTH=100%>
<TR HEIGHT=120>
<TD WIDTH=5% ALIGN=CENTER VALIGN=MIDDLE BGCOLOR=#000000><a href="http://profiles.friendster.com/user.php?uid=17347889"><img src="http://img175.imageshack.us/img175/6765/ieev9.gif" border="0"></a></TD>
<TD WIDTH=30% ROWSPAN=2 ALIGN=center VALIGN=top BGCOLOR=#000000><br><br><br><a href="http://theftalk.com/?r=319" title="FriendsterTalk - Friendster Forum - KaNaLiTnUk"><img alt="FriendsterTalk - Friendster Forum - KaNaLiTnUk" src="http://addons.friendstertalk.com/member319-black.gif" /></a></TD>
</TR>
<TR HEIGHT=120>
<TD WIDTH=30% ALIGN=CENTER BGCOLOR=#000000><a href="http://profiles.friendster.com/user.php?uid=17347889"><img src="http://img84.imageshack.us/img84/1119/ffxf5.gif" border="0"></a></TD>
</TR>
</TABLE>
</center>
</body>
</html>[/quote]
[b]2. Buat script CSS extension untuk tampilan IE dan FF kalian[/b]. Jadikan CSS kalian menjadi JS dengan menggunakan script CSS injection.
[b]3. Buat juga JS extension untuk tampilan IE dan FF kalian[/b].
Kenapa aku sarankan kalian membuat CSS dan JS extension utk IE dan juga FF? Karena tidak semua CSS dan JS bisa berjalan sempurna di IE begitu juga tidak semua script CSS dan JS bisa berjalan sempurna di FF. Contoh :
> Script CSS collapsible testimonial box itu bagus hanya utk FF tapi jelek di IE.
> Script CSS colored scrollbar yang hanya bagus utk IE tapi gak jalan di FF.
> Script JS Loading Page itu bagus di FF tapi terlihat kurang bagus di IE.
> Script JS Merlin yang hanya bisa dilihat melalui IE.
> dan masih banyak lagi.
Intinya, sesuaikan CSS dan JS kalian dengan tampilan browsernya biar terlihat mantap. Nah baru kita masukkan URL JS untuk tiap2 tampilan browsernya dengan script ini dan beri nama misalnya [b]browser.js[/b]
[quote]var podo = document.createElement("script");
var browser=navigator.appName;
var mic="Microsoft Internet Explorer";
if (browser==mic){
podo.type = "text/javascript";
podo.src = "[b]URL TXT UNTUK IE[/b]";
document.getElementsByTagName("head")[0].appendChild(podo);
}
else
{
podo.type = "text/javascript";
podo.src = "[b]URL TXT UNTUK FF[/b]";
document.getElementsByTagName("head")[0].appendChild(podo);
}[/quote]
[u][b]Keterangan :[/b][/u]
[b]- URL TXT UNTUK IE[/b] ganti dengan URL JS kalian untuk IE (jangan lupa rename menjadi .txt).
[b]- URL TXT UNTUK FF[/b] ganti dengan URL JS kalian untuk FF (jangan lupa rename menjadi .txt).
[b]4. Setelah itu kita buat lagi script kombinasi dari langkah nomor 3 di atas dengan script Enter page yg sudah disederhanakan[/b]. Jadi nanti hasil akhir scriptnya adalah :
[quote]place=document.location.href;
if(place!="http://profiles.friendster.com/user.php?uid="+pageOwnerID){
top.location.href="[b]URL HTML[/b]"
}
else {
load=document.createElement("script")
load.src="[b]URL browser.js[/b]"
navBg.appendChild(load)
}[/quote]
[u][b]Ket[/b][/u] :
[b]- URL HTML[/b] = ganti dengan URL HTML Enter Page mu.
[b]- URL browser.js[/b] = ganti dengan URL acript browser.js mu dari langkah nomor 3.
[b]5. Sebagai tambahan[/b], kalau kita pakai Force Log In script, lebih baik kita gabungkan dengan script dari langkah nomor 4 tersebut agar kita bisa meminimalisir loading stuck ataupun NULL display ketika kita mau melihat profile FS kita sendiri. Karena loading stuck maupun NULL display itu terjadi apabila kita memakai Enter Page dikarenakan :
1. Sistem redirection view profile FS kita telah dirubah oleh FS.
2. Ada beberapa script yg bisa mengacaukan sistem redirection Enter Page kita yaitu Force Log In dan Alert (welcome maupun goodbye alert).
Jadi nanti scriptnya akan menjadi begini :
[quote]if(pageViewerID==""){
alert("PLEASE LOG IN YOUR FRIENDSTER ACCOUNT TO VIEW MY PROFILE :-)");
top.location.href="http://www.friendster.com/login.php?next=%2fuser.php%3fuid%3D"+pageOwnerID+"&cookie=1";
}
place=document.location.href;
if(place!="http://profiles.friendster.com/user.php?uid="+pageOwnerID){
top.location.href="[b]URL HTML[/b]"
}
else {
load=document.createElement("script")
load.src="[b]URL browser.js[/b]"
navBg.appendChild(load)
}[/quote]
[b]6. Selesai[/b]
Last edited by KaNaLiTnUk (2008-06-23 09:36:07)