Tutorial cambiar plantillas con click
JavaScript(cambiar la plantilla con un clip)Esta tutorial esta hecho por Skys-Design quien cambie el nombre le denunciarep or plagio
(Ya se que parece un poco dificil pero vereis que es lo mas facil que hay,para que quede al menos bien teneis que hacer almenos mas de 10 diseños es recomendado*,pero no es necesario )
Solo Para plantillas Css
1º Paso
Lo primero que teneis que hacer es crear todas las plantillas que querais en vuestra web,ya cuando tengas todos los diseños lo unico que teneis que hacer es guardar la parte de style tags(incluido el principal)en el block de notas
2º Paso
En este paso lo unico que teneis que hacer es añadir este codigo po rdebajo de la pagina(No se edita nada en este paso)
Codigo
_________________________
<script language="JavaScript">
//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm
var manual_or_random="manual" //"manual" or "random"
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.
//////No need to edit beyond here//////////////
function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
function deleteCookie(name){
setCookie(name, "moot")
}
function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}
function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}
if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
}
}
</script>
Este paso no es necesario aunque te ayudara hacerlo mejor.lo que teneis que hacer es ir a "controlar páginas" y crear un apartado ocn el nombre de "pruevas"
4º Paso
Este es el paso mas importante de todo(solo editen la parte roja y mas abajo en el paso 5º os explicara como editarlo)
Este codigo se pone en el apartado de "pruevas"
Codigo
______________________________
<center><center>
<link href="Aqui va el diseño principal,el que se vera en la web al entrarp or primera vez.css" type="text/css" rel="stylesheet" />
<link title="wallE" media="screen" href="Aqui el 2º diseño que has creado.css" type="text/css" rel="alternate stylesheet" />
<link title="verde" media="screen" href="Aqui el 3º diseño que has creado.css" type="text/css" rel="alternate stylesheet" />
<link title="naranja" media="screen" href="Aqui el 4º diseño que has creado.css" rel="alternate stylesheet" /><font color="#c0c0c0"><font face="Comic Sans MS" size="3"><br />
</font></font><a href="javascript:chooseStyle('none', 60)"><br />
<img alt="" src="Aqui va la imagen que te llevara al diseño principal" /></a> <a href="javascript:chooseStyle('wallE', 60) "><img alt="" src="Aqui va la imagen que te llevara al diseño 2º" /></a> <a href="javascript:chooseStyle('verde', 60)"><img alt="" src="Aqui va la imagen que te llevara al diseño 3º" /></a> <a href="javascript:chooseStyle('naranja', 60)"><img alt="" src="Aqui va la imagen que te llevara al diseño 4º" /></a>
<p> </p>
<p align="justify"> </p>
</center>
<div> </div>
</center>
<div> </div>
__________________________________
Si quereis añadir mas plantillas solo tienen que copiar y pegar pero debe estar en orden(ejemplo si esta la plantilla 4,copiais su apartado y poneis uno debajo pero no del todo si no debajo del apartado 4º parap oner la plantilla y con lasi magenes pasa los mismo)
Las imagenes se pone cualquiera pero se aconseja que sea pequeñita para que no ocupe mucho más o menos de 20 x18(es la estatura de la imagenes de nuestro script de la web)
5º Paso
Este paso es uno muy facil aunque parece dificil para hace que nuestros diseños sean .css para que se pongan las plantillas en el codigo del paso 4º
Cogemos la 1ºplantilla(la principal)reuerden solo la parte de style tags,y cuando termineis de editarla para como va a quedar solo tienes que poner guardar como y te sale un cuadro,en la segunda linea sale algo como .txt pues tocan ahy y te sale .txt o todos los prefijos(o algo parecido)tocan eso ponen y en la primera linea pones el nombre y lep ones el prefijo .css, ejemplo=
Y asi con todas las plantillas,ya despues para subirlas vallan a un upload(recomendado fileden.com)para subir este archivo y lo colocais en la partes indicada de roja que estan en el paso 4º
6º Paso
Ahora cuando ya tengais el las dirreciones .css y pasadasp or el fileden y puestas en le codigo toca las imagenes lo unico que teneis que hacer es ponerlas pero (ni se os ocurra cambiarlas de sitio ya que es haria perder los link de las plantillas)
7º Paso
ahora solo teneis que guardar y ver como quedo si no funciono esque has hehco algo mal si no pasa al paso 8º
8º Paso
Este paso es cuando ya tengais todo bien colocais este codigo encima de la página
(este codigo servira para poner el scrip donde quieras en la web)
Codigo
______________________________
<div style="position:absolute;left:100px;top:100px;">aqui va el script</div>
_______________________________
Y ahora copiais el codigo ya terminado por ustedes del paso 4º y lo poneis entre el codigo que os acabo de dar y ya esta
y borrais el apartado de pruevas y ya esta(avisado importante el script no se puede quedar en el apartado por que si no solo se pondra para esa hoja nada mas que debeis onerlo ecima de la pagina como se ecxplica en el principio de paso 8º)
Tutorial by:Skys-Design
_____________________________________________________________________________________
