Blog d'aide de Blog4ever

C' est possible.

Voici comment procéder:

En premier lieu, il va falloir créer plusieurs designs pour votre site web. Vous pouvez simplement changer les couleurs. Donc, vous aurez plusieurs feuilles de styles CSS. Par exemple : rouge.css, noir.css, et bleu.css. Dans ce tuto, nous allons voir comment les visiteurs pourront choisir le design de votre site !



Ce que nous allons faire, en résumé:
Vous allez tout d'abord créer quelques designs pour votre site web
Créer une page "design.js" avec le code JavaScript que nous allons voir
Créer une page "options.html" où les visiteurs choisiront le design du site
Intégrer à l'endroit souhaité dans "options.html" le code formulaire pour que les visiteurs choisissent le design
Intégrer en haut de "options.html" les codes pour les links
Tout transférer avec un logiciel FTP ou sur un service FTP en ligne, IFrance par exemple: http://web.ifrance.com/



A présent détaillons tout cela:

1)
Créer une page "design.js" qui retiendra le design choisit par le visiteur
Maintenant que vous savez ce que nous allons faire, commençons par créer une page qui permettra de mémoriser quel est le design choisit par le visiteur. Ainsi toutes les pages de votre site aura le design que le visiteur aura choisi !

Pour créer cette page, "design.js", il faut aller dans votre éditeur de texte et intégrer ce code JavaScript dans votre page nommée "design.js":

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")
&& !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
document.getElementById('button_skin_ok').style.display = 'none';
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);





2) Créer une page "options.html" où les visiteurs choisiront le design du site
Biensur vous n'êtes pas obligé de créer une page "options.html". Vous pouvez intégrer l'option du choix du design dans un menu (comme je l'ai fait) ou n'importe où.

Prenons comme exemple que mes feuilles de style s'appellent "rouge.css", "noir.css" et mon design par défaut qui se nomme "design.css".
On intègre dans la page option ce code en forme formulaire :

Changer de design








Super design rouge




Très beau design noir




Le design par défaut

3) Intégrer en haut de "options.html" les codes pour les links
Il faudra remplacer les valeurs pour les designs en fonctions des votre et du code suivant que l'on intègre en haut de toute les pages de votre site au niveau des balises entre les balises et :



















Il faut intégrer ce code dans toutes les pages de votre site.
Vous remarquerez que les valeurs des designs du code se retrouvent dans les valeurs du code en forme de formulaire. Il faut donc faire attention à ne pas se tromper !




4) Dernière étape : Maintenant que tout est au point, il faut transférer tout votre site avec votre logiciel FTP !
Comme FTP ou hébergeur gratuit, vous pouvez comme je l' ai fait utiliser: http://web.ifrance.com/
Il ne faut pas oublier la page "design.js".



Voilà ^^ Bonne chance à tous ! :n6:


[i]Derni?re modification le 17-12-2008 ? 18:41:35

:b0: Fred, pour ton blog, pour le desingn, c'est super mais je reste classique(c'est l'age,) tu as gagné un vote pour le concours, Bonnes Fêtes :n14: :n8: (Ah moi aussi je suis Balance. Suny

Merci beaucoups ^^ J' ai eu du mal....

J' ajoute une petite précision à mon tutorial:

Vous devez effacer tout votre code CSS perso dans votre espace perso (faites en une sauvegarde avant), sinon cela ne marchera pas.
En effet, l' intégralité de vos CSS est hébergé sur le FTP. C' est de là qu' ils se chargeront désormais et non à partir du serveur blog4ever.

Edit: J' ai finalement désactivé cette fonction sur mon propre blog car les feuilles CSS externalisés sur le FTP gratuit Ifrance étaient parfois indisponibles lorsque le site était saturé. Du coups elles n' apparaîssaient plus ou prenaient du temps à se charger.

C' est un risque à prendre... ou pas.


Derni?re modification le 17-12-2008 ? 18:40:10