Visualizzazione Stampabile
-
My Scrolling Bar sociale
(Premetto che questa mia guida è un po' vecchia e il sito che in certe parti riporta lo ho fatto scadere quasi 1 anno fa ma la guida è perfettamente utilizzabile ;))
Allora in questo Tutorial vi spieghero' come mettere
una sidebar laterale sul proprio sito/blog/forum con
i vari socialnetwork:
Andiamo ad analizzare il codice:
Codice:
</-----------ToolbarMirkoLockzv1-------------------/>
<div id="divTopright" style="position: absolute; right: 10px; top: 10px;">
<table width="10" height="10" border="0">
<tr>
<td><a href="http://www.facebook.com/pages/ZoneX2net/113697738684001"><img title="Facebook Fan Page!" src="http://img219.imageshack.us/img219/5056/facebookicongz.png" alt="Facebook Fan Page!"></a> </td></tr>
<tr><td><a href="http://twitter.com/#!/MirkoLockz"><img title="Follow ZoneX2.net on Twitter" src="http://img706.imageshack.us/img706/4383/twittericonu.png" alt="Follow ZoneX2.ne on Twitter"></a> </td></tr>
<tr><td><a href="http://lol4fun.com/index.php?p=u/zonex2"><img title="Follow ZoneX2.net on Lol4fun" src="http://img408.imageshack.us/img408/4981/lol4funiconu.png" alt="Follow ZoneX2.net on Lol4fun"></a></td></tr>
</table></div>
<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):D.all?d.all[id]:D.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.right=x+px;this.style.top=y+px;};
el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
JSFX_FloatDiv("divTopright", 10, 10).floatIt();
</script>
</-----------FineToolbarMirkoLockzv1-------------------/>
Questo andra' a segnalare l'inizio del codice:
Codice:
</-----------ToolbarMirkoLockzv1-------------------/>
e questo la fine:
Codice:
</-----------FineToolbarMirkoLockzv1-------------------/>
La posizione è determinata da 2 fattori:
Codice:
<div id="divTopright" style="position: absolute; right: 10px; top: 10px;">
e
Codice:
<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):D.all?d.all[id]:D.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.right=x+px;this.style.top=y+px;};
el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
JSFX_FloatDiv("divTopright", 10, 10).floatIt();
</script>
Come vedrete il secondo è un codice in javascript, quindi per modirficare la posizione della nostra sidebar,
non dovremmo modificarne solo 1 di valore ma bensi' tutti, quindi andremmo a cambiare tutti i valori da:
a
Codice:
Left (per metterla a sinistra)
a
Codice:
Top (per metterla in alto)
(per altri usare una traduzione in inglese dei termini italiani o modificare il codice sotto un valore in percentuale o pixel"px")
In questo caso se abbiamo scelto di mettere left la sidebar non sara' ancora visualizzata a sinistra, datosi che dovremmo ancora modificare questo valore, presente nella prima parte del posizionamento:
Codice:
<div id="divTopright" style="position: absolute; lwft: 10px; top: 10px;">
quindi andremo a modificare questo:
Codice:
left: 10px; top: 10px;">
con le dimensioni che volete per la sua posizioni nei bordi della pagina.
Ora per finire andremo a sostituire tutti i link con redirezione alle varie pagine social network, con le vostre pagine.
Guida e sorgente interamente sviluppata da MirkoLockz ovvero io
Vietata la redistribuzione senza autorizzazione.
(Sotto criterio Creative Commons attribuzione 2.5)
"se ci sono problemi contattatemi pure da questa discussione ;)
Non dico di non copiare datosi che le persone mature danno se copiare o no.
Mirko B.
-
Questa la devo provare ... e se funziona come descritto allora sarà promosso in home :)
-
Grazie mille x.x comunque la sto aggiornando includendo la possibile di commentare e fare share di qualsiasi cosa su facebook... naturalmente sarà con un sito funzionante invece che zonex.net sarà ripcloud.net negli screen.
Sono lieto del vostro interesse.
Mirko B.
