Discussione: 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:

Codice:

Right (destra)

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.