mercredi 1 juillet 2009
Vos pages Web disponibles instantanément dans d’autres langues en mode avancé
Vos pages Web disponibles instantanément dans d’autres langues
Ajoutez le gadget Traduction à vos pages Web afin que les internautes puissent traduire automatiquement leur contenu.
L’ajout du gadget est rapide et facile.
Allez sur le site google -> http://translate.google.be/translate_tools?hl=fr
Sélectionnez la langue de votre page Web
Copiez le code HTML
collez le code HTML pour inclure ce gadget dans votre page Web en mode avancé pour canalblog, là où vous désirez le voir apparaître.
Validez et voilà, ce n'est pas plus compliqué que ça!
vendredi 8 mai 2009
Retirer la pub dans canalblog -> Mit à jour le 8/05/2009
Il est possible de retirer la publicité de canalblog mais uniquement en mode avancé
Il suffit de remplacer le "o" par un "p" dans <body> qui se trouve en haut en mode avancé dans apprence. Ce qui vous donnera cela à la place <bpdy>
Exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><$BlogPageTitle$></title>
<meta http-equiv="Content-Type" content="text/html; charset=<$BlogEncoding$>" />
<meta http-equiv="content-language" content="<$BlogLanguage$>" />
<meta name="Description" content="<$BlogDescription$>" />
<meta name="Keywords" content="<$BlogKeywords$>" />
<meta name="generator" content="CanalBlog - http://www.canalblog.com" />
<BlogSiteFeed>
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$BlogSiteFeedURL$>" />
</BlogSiteFeed>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$BlogEditURIURL$>" />
<link rel="stylesheet" href="<$BlogCSSURL$>" type="text/css" />
</head>
<bpdy>
<br>
<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>
Je tiens à préciser que vous êtes entièrement responsable de ce changement.
mardi 14 avril 2009
Mettre une flèche ou autre image, devant vos liens au choix
Mettre une flèche ou autre image, devant vos liens au choix
Ce n'est pas compliqué, vous verrez
Aujourd'hui je vous propose de mettre une image au choix devant certains liens précis. Ici je vais vous montrer comment mettre tel ou tel image devant les liens de chaque menu. Pas évident d'expliquer tout ça par écrit, mais vous verrez, à l'aide de mes captures d'écran vous comprendrez
Voilà mon exemple, cliquez dessus :
Avant de commencer il vous faut une/des flèches ou toutes autres images, soit vous les créez vous-même, soit vous en trouvez sur le net.
Conseil : Choisisez des images pas trop grandes, voilà les miennes en exemple, n'hésitez pas à les utiliser 
Maintenant allez dans votre blog en mode avancé, dans le menu "Page d'accueil"
Sélectionnez tout le contenu et collez-le dans votre bloc notes, word ou autre
Puis repérez les codes commençant par http://storage.canalblog.com/71/10/210777/32435941.gif"> comme sur mes captures ci-dessous
1.
2.
3.
Maintenant allez chercher le lien de votre image et collez le à la place de mon lien entre les guillemets ("). Faites comme sur mes captures d'écran (Sur ma capture ce n'est pas le bon bouton bien sûr, c'est juste à titre d'exemple)
1.
2.
3.
Maintenant, sélectionnez à nouveau la totalité des codes et allez le recoller en mode avancé, dans le menu "Page d'accueil" à la place de l'autre et cliquez sur "visualiser" pour vérifier et si cela vous convient, cliquez sur "Valider"
Vous pouvez de cette façon mettre toutes les images que vous désirez, sur votre blog. N'ayez pas peur d'essayer, il suffit toujours de visualiser avant de valider. Et un conseil que je vous donne, enregistrer toujours tout sur votre PC.
Bon amusement ! 
jeudi 9 avril 2009
Mettre une flèche ou autre image, devant les liens dans les colonnes
Mettre une flèche ou autre image, devant tous vos liens
Ce n'est pas compliqué, vous verrez
Il y a 2 façons de procéder, aujourd'hui je vous propose la façon la plus simple. Aussi, sachez que ainsi fait, votre flèche ou toute autre image à votre goût, se mettra d'office devant tout vos liens de votre blog.
Voilà mon exemple, cliquez dessus :
Avant de commencer il vous faut une flèche ou toute autre image, soit vous le créez vous-même, soit vous en trouvez sur le net.
Conseil : Choisisez un bouton pas trop grand, le mien fait 13x13 pixels 
Une fois votre bouton fait, enregistrez-le dans un nouveau message que vous laisserez comme brouillon.
Maintenant allez dans votre blog en mode avancé, dans le menu "Feuille de style générale"
Sélectionnez le tout et collez-le dans votre bloc notes, word ou autre
Puis repérez le code .navlinks li { et Sélectionnez tout le code entre .navlinks li { et } comme sur ma capture ci-dessous
Puis copiez mon code ci-dessous et allez le coller à la place de ce que vous venez de sélectionner
list-style-image: url("http://storage.canalblog.com/01/62/144645/31961483.gif");
font-family: 'Trebuchet MS', Verdana, sans-serif;
color: #FFFFFF;
font-size: small;
font-weight: normal;
font-style: normal;
text-align: left;
line-height: 150%;
margin-top: 10px;
margin-left: 25px;
Maintenant allez chercher le lien de votre bouton, faites comme sur mes captures d'écran (Sur ma capture ce n'est pas le bon bouton bien sûr, c'est juste à titre d'exemple)
Et allez le coller à la place du miens comme ceci
Puis mettez les bonnes tailles pour le height: 13px; et width: 13px; Ces tailles vous les trouverez également là où vous avez enregistré le bouton
Pour modifier la couleur de la police, remplacez color: #FFFFFF; par votre couleur en mettant le bon code couleur après le #
Vous trouverez la liste des codes couleurs par là -> Cliquez ici
Maintenant, sélectionnez à nouveau la totalité des codes et allez le recoller en mode avancé, dans le menu "Feuille de style générale" à la place de l'autre et cliquez sur "Valider"
Visualisez votre blog, vous y verrez votre image à gauche de chaque lien, comme ceci !
Bon amusement !
lundi 6 avril 2009
Mettre un fond derrière les menus de canalblog en mode avancé
J'ai mis beaucoup de temps à rédiger ce tuto, pour vous expliquer avec le plus de simplicité possible, afin de vous offrir la possibilité de mettre des fonds derrière vos menus et ce de façon assez facile et j'espère avoir été assez claire
Voilà mon exemple dans la colonne de gauche du blog, cliquez dessus :
Avant de commencer il vous faut un bouton, soit vous le créez vous-même, soit vous en trouvez sur le net. Vous en trouverez également dans mes différents kits/Fonds que je propose par là -> http://joelladesignblog.canalblog.com/
Conseil : Choisisez un bouton de minimum 180 pixels de largeur(width) et en hauteur(height) au minimum de 28 pixels.
Une fois votre bouton fait, enregistrez-le dans un nouveau message que vous laisserez comme brouillon.
Maintenant allez dans votre blog en mode avancé, dans le menu "Feuille de style générale"
Sélectionnez le tout et collez-le dans votre bloc notes, word ou autre
Puis repérez le code .navlinks .title { et Sélectionnez tout le code entre .navlinks .title { et } comme sur ma capture ci-dessous
Puis copiez mon code ci-dessous et allez le coller à la place de ce que vous venez de sélectionner
background: transparent url(http://storage.canalblog.com/22/57/512558/37345348.png) no-repeat;
height: 28px;
width: 180px;
line-height:26px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
margin-bottom: 5px;
display:block;
border: none;
white-space:nowrap;
font-family: 'Trebuchet MS', Verdana, sans-serif;
color: #FFFFFF;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 0px;
Maintenant allez chercher le lien de votre bouton, faites comme sur mes captures d'écran
Et allez le coller à la place du miens comme ceci
Puis mettez les bonnes tailles pour le height: 28px; et width: 180px; Ces tailles vous les trouverez également là où vous avez enregistré le bouton
Repérez le code line-height:26px; juste en-dessous et là mettez la même taille que le height:28px; mais moins 2, ce qui fera line-height:26px; (pour mon bouton ici).
Pour modifier la couleur de la police de vos boutons, remplacez color: #FFFFFF; par votre couleur en mettant le bon code couleur après le #
Vous trouverez la liste des codes couleurs par là -> Cliquez ici
Maintenant, sélectionnez à nouveau la totalité des codes et allez le recoller en mode avancé, dans le menu "Feuille de style générale" à la place de l'autre et cliquez sur "Valider"
Visualisez votre blog, vous y verrez le fond sous chaque menu comme ceci !
Bon amusement !
vendredi 19 décembre 2008
Installer un menu horizontal où on veux sur demande de Tsubaki-chin. (Ne fonctionne pas dans spaces msn)
Voici un petit script simple, afin d'ajouter un menu horizontal sur votre page
Exemple : Cliquez sur l'image
Voici le script à ajouter dans la page d'accueil en mode avancé, sélectionnez-le, copiez et allez le coller dans "Page d'accueil"
Vous pouvez le placer comme sur mon exemple, en haut de page juste avant
<div id="leftbar">
<div class="navlinks">
Ou à tout autre endroit, à vous de jouer un peu !
<p><center>
<script>
menuhz = 1 //1:horizontal 0:vertical
bgcolor ='#7E1C66'; //Couleur du fond
bgcolor2='#D792EF'; //Couleur au passage de la souris
bgcolor3='#FFFFFF'; //Couleur des bords
bgcolor4='#FFFFFF'; //Couleur du texte
largeur = 180
hauteur = 22
i = 0
menup = new Array;
menup[i++]='Titre1'; //<- Nom du lien
menup[i++]='http://mangafanz.canalblog.com/'; //<- Adresse du lien
menup[i++]='Titre2'; //<- Nom du lien
menup[i++]='http://mangafanz.canalblog.com/'; //<- Adresse du lien
menup[i++]='Titre3'; //<- Nom du lien
menup[i++]='http://mangafanz.canalblog.com/'; //<- Adresse du lien
menup[i++]='Titre4'; //<- Nom du lien
menup[i++]='http://mangafanz.canalblog.com/'; //<- Adresse du lien
menup[i++]='Titre5'; //<- Nom du lien
menup[i++]='http://mangafanz.canalblog.com/'; //<- Adresse du lien
menup[i++]='Titre6'; //<- Nom du lien
menup[i++]='http://mangafanz.canalblog.com/'; //<- Adresse du lien
document.write('<style>');
document.write('.ejsmenu {color:'+bgcolor4+'; cursor:hand;}') //default
document.write('</style>')
document.write('<DIV ID=top><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='+bgcolor3+' WIDTH='+(menuhz?largeur*menup.length/2:largeur) +' HEIGHT='+hauteur+'><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=100%>'+(menuhz?'<tr>':''))
for(pass=0;pass<menup.length;pass+=2)
document.write((menuhz?"":"<tr>")+"<TD WIDTH="+largeur+" ALIGN=center BGCOLOR="+bgcolor+" onMouseDown='location.href=\""+menup[pass+1]+"\"' onMouseOver='this.style.background=\""+bgcolor2+"\"' onMouseOut='this.style.background=\""+bgcolor+"\"' CLASS=ejsmenu><FONT SIZE=1 FACE=Verdana><B>"+menup[pass]+"</B></FONT></TD>")
document.write('</tr></TABLE></TD></TR></TABLE></DIV>')
</script>
</p>
Ensuite, il vous suffit de modifier les couleurs si désiré, et d'y mettre vos titres avec vos liens.
Bon amusement !
mercredi 12 novembre 2008
Mettre une icône personnalisée
Vous voulez mettre une icône personnalisée devant votre URL dans la barre d'adresse et remplacer l'icône du raccourci de votre blog ? Alors suivez les instructions.
Compatible pour Internet explorer et Firefox.
EN MODE AVANCE ET IMPOSSIBLE DANS LES BLOGS SPACES MSN
1. Vous devez d'abord créer une icône au format 16*16 pixels.
Pour cela rien de plus simple, allez sur ce site et créer votre icône depuis n'importe quelle image sur votre PC.
2. Enregistrez votre icône sur un site hébergeur, ou pour canalblog dans un message en brouillon dans "insertion d'un fichier".
3. Récupérer le lien et collez le dans le code ci-dessous, à la place du mien (en rouge).
Le code :
<LINK REL="SHORTCUT ICON" href="http://storage.canalblog.com/61/91/210777/22351784.ico">
4. Ensuite allez coller ce code Dans "apparence" "Page d'accueil" et collez le code juste avant </head>,
cliquez "Valider" et aller sur votre blog ;-)
Si vous voulez avoir le même effet sur tout vos message du blog, il vous suffit de refaire la même chose dans "Page des archives", "Page de l'index des archives" et dans "Page d'un message" ;-)
Voili, voilà !
Mettre une image ANIMEE à la place du curseur sous Internet explorer et une autre mais NON animée sous firefox
Mettre une image ANIMEE à la place du curseur sous Internet explorer et une autre mais NON animée sous firefox.
Info : Sous firefox il est impossible de mettre des curseurs animés.
Compatible pour Internet explorer et Firefox.
EN MODE AVANCE ET IMPOSSIBLE DANS LES BLOGS SPACES MSN
Mettez vos curseurs à la place des miens en rouge et vert, le rouge est le curseur lorsqu'on survole la page et en vert est le curseur qui change au passage sur un lien.
Explications pour les nom du type des images :
Les images avec l'extention .ani à la fin sont les curseurs animées qui fonctionnent dans Internet explorer et les images avec l'extention .gif (ou .png et .cur fonctionnent aussi) sont les curseurs qui fonctionnent dans firefox.
Elles ne doivent pas être obligatoirement les mêmes pour IE et firefox.
(Vous pouvez aussi bien utiliser les miens).
Pour le code :
Allez dans "apparence" puis dans "Feuille de style générale" et collez le code ci-dessous en haut de page et validez.
Allez voir votre accueil sous Internet explorer et/ou firefox.
LE CODE A INSERER :
hmtl, html
{
cursor: url("http://patmax.info/curseurs/dragon.ani"),
url(http://storage.canalblog.com/19/56/144645/32393720.gif), auto;
}
a[href]{
cursor : url("http://patmax.info/curseurs/flechette.ani"),
url(http://storage.canalblog.com/78/81/144645/32339899.png), auto;
}
Et voilà, bon amusement !
mardi 11 novembre 2008
Mettre une image à la place du curseur
Comment mettre une image à la place du curseur comme dans ce message ?
Compatible pour Internet explorer et Firefox.
EN MODE AVANCE ET IMPOSSIBLE DANS LES BLOGS SPACES MSN
Dans "apparence" allez dans "Page d'accueil" et collez le code ci-dessous juste avant </head>
Mettez vos curseurs (uniquement des images avec l'extension .cur) à la place des miens en rouge et vert, le rouge est le curseur lorsqu'on survole la page et en vert est le curseur qui change au passage sur un lien. (Vous pouvez aussi bien utiliser les miens)
"Validez" et allez voir votre accueil. Si vous voulez avoir le même effet sur tout vos message du blog, il vous suffit de refaire la même chose dans "Page des archives", "Page de l'index des archives" et dans "Page d'un message" ;-)
LE CODE A INSERER :
<style>
<!--BODY{ cursor:url("http://storage.canalblog.com/03/66/144645/32359151.cur"),default; }a{ cursor: url(http://storage.canalblog.com/93/53/144645/32359174.cur),default;}-->
</style>
Et voilà, bon amusement !
lundi 10 novembre 2008
Mettre une image qui suit et regarde le curseur : Sur demande de plusieurs bloggeurs
Comment mettre une image qui suit et regarde le curseur comme dans ce message ?
EN MODE AVANCE ET IMPOSSIBLE DANS LES BLOGS SPACES MSN
Dans "apparence" allez dans "Page d'accueil" et collez le code ci-dessous, tout en bas juste avant </body></html>
Mettez vos gifs animés à la place des miens en rouge et vert, le rouge est le gif qui regarde vers la droite et en vert est le gif qui regarde vers la gauche. (Ici c'est Titi, vous pouvez aussi bien utiliser les miens)
"Validez" et allez voir votre accueil. Si vous voulez avoir le même effet sur tout vos message du blog, il vous suffit de refaire la même chose dans "Page des archives", "Page de l'index des archives" et dans "Page d'un message" ;-)
LE CODE A INSERER :
<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
/*
Image qui suit et regarde la souris
http://www.editeurjavascript.com/scripts/scripts_images_1_66.php
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
var x = 0;
var y = 0;
if (document.getElementById)
{
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Pos_Souris;
window.onload = Bouge_Image;
}
function Pos_Souris(e)
{
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
}
posX = 0;
posY = 0;
anim = true;
oldpos = "http://storage.canalblog.com/83/23/144645/32318848.gif";
function Bouge_Image()
{
if (document.getElementById && anim)
{
posX = posX+(((x-posX)+20)/15);
posY = posY+(((y-posY)+20)/15);
if(posX<x)
newpos='http://storage.canalblog.com/49/69/144645/32318813.gif';
else
newpos='http://storage.canalblog.com/83/23/144645/32318848.gif';
if(newpos!=oldpos)
{
document.tete.src=newpos;
oldpos=newpos;
}
document.getElementById("teteronde").style.top = posY+"px";
document.getElementById("teteronde").style.left = posX+"px";
tempo = setTimeout("Bouge_Image()", 15)
}
}
if(document.getElementById)
{
document.write('<div id="teteronde" style="position: absolute">');
document.write('<a href="#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
document.write('<img src="http://storage.canalblog.com/49/69/144645/32318813.gif" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
document.write('</a>');
document.write('</div>');
}
</script>
<!-- FIN DU SCRIPT -->
Bon amusement !