« Ajouter le moteur de recherche MSN sur votre blog | Page d'accueil | Traduire son blog »

23/04/2005

Du code javascript dans votre blog !

Suite à la demande de Lionel qui avait des difficultés à insérer le code Javascript de weborama, je vous propose un exemple de script à insérer dans son blog pour y voir plus clair.

Une parenthèse technique :
Les blogs de blogSpirit utilisent la technoblogie Smarty, une solution de template Html associé au langage php. Les balises Smarty utilisent les accolades { } comme séparateur, c'est pourquoi les scripts javascript qui utilisent des accolades ne sont pas valides. Heureusement, les concepteurs de Smarty font bien les choses et la balise {literal} Script {/literal} permet de résoudre ce problème puisqu'elle a été complètement intégrée à blogSpirit.

Exemple avec un script "Ajout aux favoris" :
Je n'aime pas beacoup ce genre de scripts qui ne marchent que sur Internet Explorer, mais certains bloggueurs y trouveront surement leur bonheur :
Créez-vous une nouvelle boîte et insérez-y le code suivant :
<script type="text/javascript">

{literal}

function add_favoris() {
var nom_site = "Bouge ton blog !";
var url_site = "http://technoblog.blogspirit.com";
if ((navigator.appName.indexOf("Microsoft",0)>=0) && (parseInt(navigator.appVersion)>=4))
{
window.external.AddFavorite(url_site,nom_site );
} else {
alert("Cette fonction n'est proposée que par Internet Explorer 4+,
faîtes Ctrl+D pour ajouter"+nom_site+" à vos favoris.");
}
}
{/literal}
</script>
<a href="javascript:add_favoris();">Ajouter aux favoris</a>


NB : ce script ne marche qu'avec IE 4 ou +, si vous souhaitez l'insérer dans votre blog, n'oubliez pas de remplacer les variables nom_site et url_site par les noms et url de votre blog. Vous trouverez un exemple dans la colonne gauche de Bouge ton blog !.

Comme vous pouvez le voir les balises {literal}{/literal} englobent le code JavaScript. Si vous avez un message d'erreur du type "Votre modèle comporte des erreurs", repérez les accolades de votre script et entourez votre script des balises literal.

15:50 Ecrit par blogSpirit Team dans Astuces, Blogspirit, Dépannage | Lien permanent | Commentaires (19) | Envoyer cette note | Tags : Blog

Commentaires

Mille fois mercis Thomas pour cette aide précieuse

Ecrit par : Lionel | 23/04/2005

Merci. Je vais pouvoir faire une comparaison entre StatCounter et Weboscope.

Ecrit par : Vous reprendrez bien un peu d'humanisme ? | 29/04/2005

Merci beaucoup pour cette solution, je désespérais de pouvoir utiliser le Weborama sur Haut et Fort.

Ecrit par : Stella Strawberry | 04/05/2005

Desole pour le hors sujet
Il me semble que j'ai un pb d'affichage sur cette note.
http://zarabes.blogspirit.com/archive/2005/04/28/vaste_coup_de_filet_anti-drogue_mardi_dernier_a_la_reunion.html
Il y a 14 commentaires assez longz et l'affichage est tronque avant la fin.
Pas terrible pour continuer le debat ...

Ecrit par : Zarabes | 08/05/2005

Je ne vois aucun problème sur cette note...
As-tu essayé avec le support blogSpirit ?
Vu le poids et la longueur de la page, il est possible que le problème vient tout simplement du navigateur...

Ecrit par : thomas | 09/05/2005

Salut Thomas
toujours dans la serie des questions betes, j'ai trouvé un script java pour inserer un compteur sur ma page de garde mais je ne sais pas trop ou le mettre, il y a je pense des coordonnées à definir pour le mettre :
voila le script :
Et faut - il que je mette les balises literale ?
merci
la bonne journée à toi

Ecrit par : titov | 31/05/2005

script qui refuse le copier-coller : ""

Ecrit par : titov | 31/05/2005

Et pour XITI

Ecrit par : Léo | 01/06/2005

Bonjour,
j'avais du javascript dans ma colonne de droite qui marchait très bien (un petit bandeau d'informations défilant et s'arrêtant sur les messages), mais depuis quelques jours, cela ne marche plus.... Piuvez vous me dire ce qu'il se passe?? Merci!!!

Ecrit par : Mathieu | 13/07/2005

On peut insèrer du code javascript dans les colonnes. Mais dans une note elle-même ?

Sur hautetfort le système refuse d'enregistrer le code javascript correspondant à la partie BODY, il m'ajoute systématiquement CDATA.

Ecrit par : bee_human | 22/08/2005

Oui, on peut enregistrer du javascript dans les pages, ça marche très bien. Voici des exemples sur mon blog : http://eurosduvillage.blogspirit.com/archive/2005/07/22/l-actualite-europeenne-en-direct-heure-par-heure.html
http://eurosduvillage.blogspirit.com/archive/2005/06/29/le_petit_quizz_europeen.html

Ecrit par : Mathieu | 22/08/2005

Mathieu, dans le premier exemple, j'aimerais bien avoir le code source du .js. Pour moi, j'oscille entre l'erreur de syntaxe et l'erreur inattendue.

Ecrit par : bee_human | 22/08/2005

Hi

I did like your blog postings and comments but i have soem problem if some1 could help me out.

Does anyone know how to pass html table data from parent to a child form html table ? Or may be you could let me know any URL related to this topic.

Any kind of help is highly appericiated.

Thanks

Imran Hashmi
http://www.visionstudio.co.uk

Ecrit par : imran | 04/11/2005

Bonjour,

Merci pour l'information que vous mettez en ligne sur votre Blog.

cela fait plusieurs semaines que je recherce comment INSCRIRE LE CODE XITI DANS HAUT ET FORT ????

Quelqu'un a-t-il déjà réussi ?????

Je vous remercie par avance de votre aide !

ZeN

Ecrit par : ZeN | 10/12/2005

Bonjour

je voudrais mettre sur mon blog des flocons qui tombent.

Bon oui je sais que ca fait kitche. mais j'adoooooooooooore.

Pourrai vous m'aider :-)

Dans l'attente de vos réponses

Bonne journée

Ecrit par : florent | 19/12/2005

Allez voir sur www.dynamicdrive.com
Il y a tout ce que vous cherchez... Vous pourrez avec tout ça faire des bonhommes de neige sur votre blog...

Ecrit par : Mathieu | 19/12/2005

Mathieu ==> Ce site est super sympa, certes. Mais à chaque fois que je veux inscrire un javascript ca ne marche pas. Le tuto indiqué en début de page marche, mais qu'en j'en mets d'autre script, ca ne marche pas. aucune action ne se passe....

Ecrit par : florent | 19/12/2005

Tout dépend de l'endroit où vous voulez mettre les javascript. Le mieux est d'externaliser le code (de le mettre dans un fichier.js que vous placez dans vos fichiers sur votre blog, à l'aide de notepad++ par exemple) et d'y faire référence (du type ) soit:
1- si le javascript est dans une note : directement dans la note, en tout début de code. Il se peut que dans ce cas cela ne marche pas, ou qu'il soit impossible de valider la note dans l'éditeur de note de blogspirit. C'est normal. Pour palier ce problème, écrivez tout le code dans un éditeur (je conseille mozilla, c'est le meilleur), puis copier le dans la note en html. Enregistrez la note une fois. Si vous avez des retouches à faire, il faudra supprimer la note et en refaire une nouvelle. Et si cela ne marche toujours pas en intégrant le code dans la note, mettez la référence au javascript entre les balises "head" de vos templates "page d'accueil", "pages de catégories", "pages d'archives", et "pages de commentaires"
2- si le javascript est en page d'accueil, catégorie ou archive. Faites référence au javascript entre les balises "head".
3- Si le javascript est dans une colonne, faites référence au javascript en tout début de code. Ca devrait marcher. Si ça ne marche pas, c'est qu'il y a une erreur quelque part dans vos codes. Des fois, il y a interférence avec le css (il faut alors créer une "class" nouvelle dans le css, ce qui est assez fastidieux...)

Si je suis pas clair, dites le moi (car je ne suis pas informaticien, mais bidouilleur!!!!)

Ecrit par : Mathieu | 19/12/2005

Salut MATHIEU ==> Je voudrais mettre un script, qui permettrai de faire tomber des flocons de neige.
Le script je l'ai :



var snowsrc="http://familleurbain.blogspirit.com/images/flocon.gif"
var no = 10;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var nn6up = (document.getElementById) ? 1 : 0;
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;

if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
} else if (nn6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
if (i == 0) {
document.write("");
} else {
document.write("");
}
} else if (ie4up || nn6up) {
if (i == 0) { document.write("");
} else {
document.write("");
}
}
}

function snowNS() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}

function snowIE() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", 10);
}

function snowNN6() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top = yp[i];
document.getElementById("dot"+i).style.left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNN6()", 10);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
} else if (nn6up) {
snowNN6();
}



Quand je veux le mettre ca ne marche pas. si je rajoutte {literal} {/literal} ca marche, mais rien ne se passe.

Je voudrai le mettre en page d'accueil, en quand tu dis "Faites référence au javascript entre les balises "head"." Qu'est-ce tu endends par la.

Même si tu es que bidouilleur, et pas informaticien que je pense que tes connaissances me seront d'un grande utilité ;-)

Ecrit par : florent | 19/12/2005

Les commentaires sont fermés.