18 décembre 2007
Des blogs vraiment bien de tuto canalblog ! ^^
- http://alerionexemple.canalblog.com/
- http://demolitetuto.canalblog.com/
- http://astucesblog.canalblog.com/
10 novembre 2007
Mettre un lien survolé sur mon blog (canalblog)
Voila un petit code court qui permet d'afficher un petit message lorsque vous passez votre souris sur un lien.
Par exemple : Le blog Minzamin de Monkey et Mingchao
Voici le code que j'ai utilisé pour ce lien : Après
<p><a onmouseover="this.style.color='#99CC33';this.innerText='Pendant'" onmouseout="this.style.color='#99CCFF';this.innerText='Après'" href="http://leblogminzamin.canalblog.com/" style="COLOR: #996699;">Avant</a></p>
Mode d'emploi : Remplacer les couleurs par celles que vous désirez, idem pour les mots et l'adresse du site/blog
Avant que le lien ne passe dessus-- => Mot "Avant" Couleur : 996699
Pendant que le lien passe dessus__=> Mot "Pendant" Couleur : 99CC33
Après que le lien passe dessus____=> Mot "Après"__---Couleur : 99CCFF
Adresse du lien => http://leblogminzamin.canalblog.com/
Pour connaître les codes permettant de changer ces couleurs : Cliquez-ici !
07 octobre 2007
Mettre une phrase rebondissante sur mon blog
Pour faire rebondir une phrase comme ceci :
Passez en mode htlm et collez le code suivant :
<MARQUEE bgcolor=#FFFFFF behavior="alternate"><font color=#000000>Phrase à faire rebondir</font></MARQUEE>
Changer par le code couleur de votre choix pour changer la couleur du fond sur lequel la phrase va défiler.
Changer par le code couleur de votre choix pour changer la couleur de la phrase.
Voici un exemple avec un fond coloré et un texte en couleur :
Pour mettre en gras, en italique, souligné ou barré :
<marquee behavior="alternate" bgcolor="#ffffff"><font color="#000000"><strong>Texte en gras</strong>, <em>italique</em>, <u>souligné</u>, <strike>barré</strike></font></marquee>
Il faut mettre votre texte entre les balises
Gras : <strong> et </strong>
Italique : <em> et </em>
Souligné : <u> et </u>
Barré : <strike> et </strike>
Ici pour changer la couleur, repassez en mode texte et changer la couleur comme pour un texte normal !
Pour changer la police :
<MARQUEE bgcolor=#FFFFFF behavior="alternate"><font face="NOM DE LA POLICE DE VOTRE CHOIX" font color=#000000>VOTRE TEXTE</font></MARQUEE>
Pour changer la taille :
<marquee behavior="alternate" bgcolor="#ffffff"><p><font color="#000000" size="3">Police taille 3</font></p></marquee>
Pour agrandir l'écriture il faut changer FONT SIZE=1 par FONT SIZE=2 ou FONT SIZE=3 etc...
Voilà, c'est à vous de jouer !!
01 octobre 2007
Mettre des étoiles qui tombent de votre curseur de blog (canalblog)
Première chose à savoir : il faut être en mode avancé !
Une fois en mode avancé :
Allez dans "APPARENCE", puis "EDITER LES FICHIERS DE CE MODELE" (voir ci-dessous)
Si vous voulez que votre curseur soit animé sur toutes les pages de votre blog, vous devez "coller le code ci-dessous" entre <body> et </body> sur toutes les pages... (page d'accueil, des archives, d'un message etc..)
Conseil : Mettez le en bas de page juste avant </body> cela évite de mettre tout ce charabia en plein milieu de votre page, déjà pas mal encombrée par toute sortes de codes !
Voici le code :
<script type="text/javascript">
var colour="#FFBB00";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
Si vous souhaitez changer la couleur des étoiles, rendez-vous à la deuxième ligne du code et changer le code couleur :
var colour="#FFBB00";
Pour trouvez le code couleur de votre choix, il vous suffit d'allez sur notre tutoriel "GENERATEUR DE COULEUR HEXADECIMALE".
Vous n'avez plus qu'à valider et voilà des petites étoiles tombent de votre curseur !
25 septembre 2007
Mettre un texte défilant sur son blog (canalblog)
Si vous êtes sur canalblog, lorsque vous rédigez un message, un bouton permet de passer du mode texte au mode html et inversement.
Passez donc en mode html et inserez ce code :
<p><font face="Arial" size="2"></font></p>
<p align="center"><font size="2" face="Arial"><marquee onmouseover="function anonymous()
{
this.STOP()
}" onmouseout="function anonymous()
{
this.start()
}" scrollamount="1" scrolldelay="5" direction="up" height="150" width="300"><center><font color="#000000" size="2">TAPEZ VOTRE TEXTE ICI<font size="+0"></font></font></center></marquee></font></p>
Sur le mode texte, le texte ne défile pas, c'est sur le blog, une fois le message posté, que le texte défilera.
Vous n'êtes pas obligé de taper le texte dans le code html, mais pouvez directement le faire en mode texte.
Pour cela, cliquez deux fois sur le cadre du texte défilant, une fois son contour hachuré (voir ci-dessous), cliquez sur le texte et modifiez le comme vous le souhaitez, que ça soit la couleur, la police, l'ajout d'une image...
Si vous souhaitez modifier la direction du défilement, la vitesse, la police etc...
Vous devez repasser en mode html, et modifiez ce qui vous intéresse.
Voici donc la signification du code.
font size="2" : taille de l'écriture
face="Arial" : police d'écriture
direction="up" : direction du défilement ("up"= de bas en haut et "down"= de haut en bas)
font color="#000000" : couleur du texte (entrez le code html de la couleur désirée)
height="150" : hauteur du texte défilant
width="300" : largeur du texte défilant
scrollamount="1" : : vitesse de défilement, si le nombre augmente, le texte défile plus vite
Voila, vous n'avez plus qu'a "poster et publier" votre message !
Générateur de couleur hexadécimale
07 août 2007
Méthode pour proposer des émoticônes dans ses commentaires de blog !
Première étape : Se mettre en "mode avancé"
Deuxième étape : éditer la "page d'un message"
Dans l'entête juste avant la balise </head>
Insérez ce code:
<script src="http://storage.canalblog.com/10/99/287897/15839144.js" type="text/javascript" ></script>
<script type="text/javascript">
<!--
function TableauGif() {
var list = new Array();
list[list.length] = new Array("stp","http://storage.canalblog.com/80/37/296517/15839592.gif");
list[list.length] = new Array("Mdr","http://storage.canalblog.com/71/27/296517/15839583.gif");
list[list.length] = new Array("coucou","http://storage.canalblog.com/79/28/296517/15839548.gif");
list[list.length] = new Array("ok","http://storage.canalblog.com/79/04/296517/15839600.gif");
list[list.length] = new Array("Cool","http://storage.canalblog.com/61/36/296517/15839630.gif");
list[list.length] = new Array("Content","http://storage.canalblog.com/64/17/296517/15839541.gif");
list[list.length] = new Array("J'arrive","http://storage.canalblog.com/68/24/296517/15839623.gif");
list[list.length] = new Array("Félicitation","http://storage.canalblog.com/15/40/296517/15839538.gif");
list[list.length] = new Array("classe","http://storage.canalblog.com/54/89/296517/15839588.gif");
list[list.length] = new Array("danse","http://storage.canalblog.com/70/65/296517/15839561.gif");
list[list.length] = new Array("c'estpasvrai","http://storage.canalblog.com/97/79/296517/15839575.gif");
list[list.length] = new Array("Youpiii","http://storage.canalblog.com/27/50/296517/15839635.gif");
list[list.length] = new Array("Hero","http://storage.canalblog.com/55/50/296517/15839580.gif");
list[list.length] = new Array("dodo","http://storage.canalblog.com/76/10/296517/15839567.gif");
list[list.length] = new Array("adorer","http://storage.canalblog.com/02/32/296517/15839444.gif");
list[list.length] = new Array("bisous","http://storage.canalblog.com/38/80/296517/15839403.gif");
list[list.length] = new Array("tousse","http://storage.canalblog.com/64/39/296517/15839529.gif");
list[list.length] = new Array("chut","http://storage.canalblog.com/28/96/296517/15839415.gif");
list[list.length] = new Array("raler","http://storage.canalblog.com/59/17/296517/15839432.gif");
list[list.length] = new Array("colère","http://storage.canalblog.com/28/73/296517/15839423.gif");
list[list.length] = new Array("snif","http://storage.canalblog.com/57/35/296517/15839520.gif");
list[list.length] = new Array("pleur","http://storage.canalblog.com/10/08/296517/15839409.gif");
list[list.length] = new Array("bravo","http://storage.canalblog.com/34/50/296517/15839658.gif");
list[list.length] = new Array("timide","http://storage.canalblog.com/30/58/296517/15839677.gif");
list[list.length] = new Array("ouf","http://storage.canalblog.com/08/64/296517/15839674.gif");
list[list.length] = new Array("géné","http://storage.canalblog.com/42/10/296517/15839666.gif");
list[list.length] = new Array("moi","http://storage.canalblog.com/96/70/296517/15839661.gif");
list[list.length] = new Array("non","http://storage.canalblog.com/66/63/296517/15839671.gif");
list[list.length] = new Array("s'endors","http://storage.canalblog.com/33/58/296517/15839653.gif");
list[list.length] = new Array("wouhaou","http://storage.canalblog.com/84/74/296517/15839648.gif");
list[list.length] = new Array("jogging","http://storage.canalblog.com/55/00/296517/15839459.gif");
list[list.length] = new Array("bye","http://storage.canalblog.com/49/50/296517/15839411.gif"); return list;
}
// -->
</script>
cette ligne : <script src="http://storage.canalblog.com/10/99/287897/15839144.js" type="text/javascript" ></script>
permet de charger les fonctions d'affichage. Elle correspond à mon adresse url, vous devez mettre la votre pour que cela fonctionne.
Vous devez donc télécharger le fichier en cliquant dessus et le sauvegarder. Ensuite vous devez récuper l'adresse url de ce lien.
Pour cela créez un nouveau message sur votre blog en y insérant ce fichier. Mettez le en brouillon. Puis en faisant un clic droit sur le lien, faite propriété et vous aurez l'adresse url.
Copiez l'adresse, et collez là à la place de la mienne.
Si vous mettez ce code, vous aurez les émoticônes que j'ai choisi.
Pour mette les émoticônes de votre choix, il suffit de modifier ou d'ajouter cette ligne :
list[list.length] = new Array("Nom du gif","adresse url du gif");
Pas mal de sites proposent des gifs, je vous donnerez les adresses à la fin du tuto.
Troisième étape : Repérez le <div id="..."> qui permet l'affichage des commentaires, par défaut pour canalblog c'est "content". Repérer également la class <Div class="..."> dans lesquels sont affichés les commentaires, par défaut pour canalblog c'est "blogbody".
</head>
<body><div id="container"><div id="topbar-logo"><div class="logolink"><a href="<$BlogURL$>"></a></div></div><div id="topbar"><h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1><h2><$BlogDescription$></h2></div><div id="content"><div class="blogbody">
<Blogger> <BlogDateHeader>
puis repérez juste avant <Blogger> <BlogDateHeader> .
</CBComments> <CBControlForm>
<p><$CBControlForm$></p>
</CBControlForm>
<h2>Poster un commentaire</h2>
et insérer un code java juste après </CBControlForm>, comme ceci :
</CBControlForm> (<=== ça c'est l'existant, donc pas touche !!! On rajoute simplement ce qu'il y a en dessous en noir)
<script type="text/javascript">
<!--
SwapCodeEmoticon("content","blogbody");
// -->
</script>
<h2>Poster un commentaire</h2> (<=== ça c'est l'existant on y touche pas non plus !!)
dans la partie de saisie de commentaire juste en dessous du texte area, repérez ceci:
<textarea id="commentBody" name="commentBody" rows="10" cols="50"></textarea>
</p>
il faut y insérer :
<textarea id="commentBody" name="commentBody" rows="10" cols="50"></textarea> (<===à ne pas modifier)
</p><p>
<script type="text/javascript">
<!--
ListeEmoticon();
// -->
</script>
</p> (<=== ça aussi c'est l'existant à ne pas modifier)
Ce texte permet d'insérer les émoticons en bas de la zone de saisie
(et le cas échéant de mettre le code dans notre texte lorsqu'on clique dessus)
Vous pouvez maintenant valider et en principe vous devriez avoir de jolis
émoticônes à dispositon pour vos commentaires.
En cas de problème n'hésitez pas à nous contacter !
Adresses de smileys :
http://nesumi.free.fr/smiley/kaos/divers/index.html
http://perso.orange.fr/safran2b/kaos1.htm
http://www.stci.qc.ca/affiche_kaos.php
21 avril 2007
Des bannières rien que pour vous !!
Afin de faire connaître le Minzamin, voici des bannières pour votre blog !!
De plus, ayant nous-même longuement cherché comment mettre une image dans la colonne des liens, voici l'astuce pour ceux qui chercheraient encore !! ;)
ETAPE 1 : Prendre l'une des bannières ci-dessous, celle que vous aimez le plus !!^^
"Clic droit" - enregistrer sous.
ETAPE 2 : Redimensionner l'image, à l'aide d'un logiciel de retouche.
(environ 40X150 pour canalblog, mais un peu plus sa marche aussi et on voit mieux)
ETAPE 3 : Une fois l'image redimensionnée, et enregistrée de nouveau (au cas où !!)
Ouvrez votre compte canalblog et créez un nouveau message.
Inserer la bannière que vous venez de redimensionner.
Puis,
ETAPE 4 : "Clic droit" sur la bannière - "clic" sur Propriétés.
Sélectionner l'adresse url qui s'affiche.
"clic droit" - copier
ETAPE 5 : Toujours sur votre compte canal blog,
"cliquez" sur contenu
Puis sur "liens d'amis"
ETAPE 6 : Ici vous avez plusieurs cases
- Nom du site :
Collez-y l'adresse url que vous venez de copier et inscrivez ceci autour.
<img src=ADRESSE URL DE LA BANNIERE>
ETAPE 7 : Allez dans la case du dessous, c'est à dire - ADRESSE INTERNET (url)
Inscrivez-y l'adresse du blog correspondant à la bannière.
Par exemple pour notre blog mettez :
http://leblogminzamin.canalblog.com/
Cliquez sur ok et voilà c'est terminé !!!
Maintenant vous pouvez voir une jolie bannière dans la colonne de vos liens !!!
Voici les bannières, à vous de jouer !!!^^
Merci à vous de nous faire connaître !!!
MIIIIIIIIIIIINZAMIIIIIIIIIIN
