08 janvier 2008
Structure générale d'une page sur Canalblog
Vous trouverez ci-dessous les principaux éléments structurant les pages de votre blog Canalblog. Il est possible que ces éléments apparaissent dans un ordre différent, selon la structure que vous avez choisie lors de la création de votre blog. J'ai indiqué en rouge ce à quoi correspondent les balises mises en valeur.
<body>
<div id="container"> => début de la zone occupée par le site sur l'écran
<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="leftbar"> => début de la zone de la colonne de gauche
<div class="navlinks">
<div class="title">Catégories</div> => bloc "Catégories"
<ul>
<CBCategories>
<li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
</CBCategories>
</ul>
<div class="title">Archives</div> => bloc "Archives"
<ul>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<li><a href="<$BlogArchiveFileName$>">Toutes les archives</a></li>
</ul>
</div></div><div id="content"> => début de la zone centrale de la page (contenant l'ensemble des messages)
<div class="blogbody"> => début de la zone contenant les messages
<Blogger> <BlogDateHeader> => structure d'un message
<h2><$BlogDateHeaderDate$></h2>
</BlogDateHeader><a name="<$BlogItemNumber$>"></a> <BlogItemTitle>
<h3><$BlogItemTitle$></h3>
</BlogItemTitle>
<p><$BlogItemBody$></p>
<div class="itemfooter">Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
</Blogger>
<$CBControlNavLinks$></div></div>
<div id="rightbar"> => début de la zone de la colonne de droite
<div class="navlinks">
<div class="title">Derniers messages</div> => bloc "Derniers messages"
<ul>
<CBLastPosts>
<li><a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastPosts>
</ul>
<BloggerFriendLinks><BlogFriendLinkHeader> => liens vers les sites de vos amis ou vos sites préférés
<div class="title"><$BlogFriendLinkCategoryName$></div>
<ul>
</BlogFriendLinkHeader>
<li><a href="<$BlogFriendLinkURL$>"><$BlogFriendLinkName$></a></li>
<BlogFriendLinkFooter>
</ul>
</BlogFriendLinkFooter> </BloggerFriendLinks>
<BlogSiteFeed> => lien RSS nommé par défaut "Version XML"
<div class="item"><a href="<$BlogSiteFeedURL$>" title="Syndiquez ce blog">Version XML</a></div>
</BlogSiteFeed>
</div></div><div class="clear"> </div></div></body>
07 janvier 2008
Personnaliser le pied de page
Sur Canalblog, pour personnaliser le pied de vos pages, c'est-à-dire ajouter une expression du genre "© Votreblog.canalblog.com | 2007 - 2008 | Tous droits réservés" en bas de vos pages, il vous suffit d'ajouter sur les pages (en mode avancé, puis sous l'onglet "Apparence") de votre choix le code suivant juste avant la balise </body> :
<hr><center><font color="black" face="arial" size="2">© <b>Votreblog.canalblog.com</b> | 2007 | Tous droits réservés<font/><center/>
Personnaliser la catégorie "Derniers commentaires"
Si vous avez un blog Canalblog, vous avez la possibilité de modifier l'aspect de la rubrique "Derniers commentaires".
Si vous souhaitez obtenir la structure "Pseudo d'un internaute" sur "titre de l'article commenté" au lieu de "Début du commentaire" sur "titre de l'article commenté", rendez-vous dans l'onglet "Apparence" puis "éditez les fichiers de ce modèle" (accessible en mode avancé uniquement).
Choisissez ensuite dans le menu déroulant les pages où vous souhaitez installer le bouton.
Dans le code HTML de chacune des pages, pour obtenir la structure , il vous suffira de remplacer le code figurant de <div class="title">Derniers commentaires</div> à </CBLastComments></ul> par le code suivant :
<div class="title">Derniers commentaires</div>
<ul>
<CBLastComments>
<li><$BlogCommentAuthorNickName$> sur <a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastComments>
</ul>
05 janvier 2008
Insérez vos propres vidéos sur votre blog
Je vais vous expliquer ici comment ajouter une vidéo provenant sur votre blog ou votre site web en utilisant le site Dailymotion. Voici les différentes étapes à suivre :
1. Inscrivez-vous sur le site Dailymotion ou connectez-vous, si vous possédez déjà un compte.
2. Envoyez votre vidéo sur le serveur via cette page après vous être identifié. Cette opération peut prendre un certain temps.
3. Une page s'affiche alors vous proposant de partager, ou de bloguer cette vidéo. Selectionnez l'option "passer cette étape".
4. Vous arrivez alors sur la page qui diffuse votre vidéo sur DailyMotion. Dans le cadre bleu en dessous de la description de votre vidéo, copiez le code se trouvant dans la case Lecteur Exportable.
5. Recopiez simplement ce code, sur un site, ou sur un post de votre blog, et la vidéo s'affichera et sera lu directement sur votre blog par les visiteurs.
La procédure est similaire avec YouTube et la plupart des sites de partage de vidéos.
13 décembre 2007
Les caractères spéciaux en HTML
Vous vous êtes sans doute aperçu que les caractères spéciaux ne s'affichaient pas toujours correctement sur certains sites web. Pour palier à ce problème courant, qui se produit notamment dans les flux RSS et les descriptions de sites (dans les résultats des moteurs de recherche et des annuaires), je vous indique ci-dessous la liste des caractères spéciaux adaptés au langage HTML :
12 décembre 2007
Blogger : astuce pour créer un nuage de tags
1. Pour afficher les libellés en forme de nuage sur Blogger (fonctionne uniquement sur la nouvelle version de Blogger !) il faut s'assurer qu'ils soient activés. Pour cela, aller dans l'onglet "paramètres" > "modèle" > "éléments de la page" > ajouter un élément > choisir "libellés" et les ajouter au blog.
2. N'oubliez pas ensuite de sauvegarder votre modèle actuel. Pour y parvenir, rendez-vous sous l'onglet "modèle" > "modifier le code HTML". Sous la rubrique "Sauvegarder/Restaurer un modèle", cliquez sur "télécharger le modèle dans son intégralité".
3. Sous la rubrique "Modifier le modèle", insérez les codes permettant l'affichage du "nuage de tags" :
a) Tout d'abord, cochez la case "Développer des modèles de gadget". Ensuite, recherchez dans les lignes de codes les balises ]]></b:skin> et copiez-collez avant ces balises le code suivant :
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
b) Recherchez et placez entre les balises ]]></b:skin> ....et ...</head> le code suivant :
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://VOTREBLOG.blogspot.com';
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
N'oubliez pas de modifier dans la troisième ligne « VOTREBLOG » par le nom de votre blog.
c) Recherchez et remplacez l'ensemble du code à partir de <b:widget id='Label1' locked='false' title='Labels' type='Label'/> et jusqu'à </b:widget> par :
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
4. Personnalisez votre nuage de tags :
var cloudMin= 1; 1 affiche tout les labels
remplacer par 10 pour avoir 10 labels affichés dans le nuage de tags
var maxFontSize = 20; taille de police la plus grande
var maxColor = [0,0,255]; couleur de la police la plus grande
var minFontSize = 10; taille de la police la plus petite
var minColor = [0,0,0]; couleur de la police la plus petite.
Les codes des couleurs en langage HTML
Difficile de changer les couleurs de son site, sans connaître les "codes couleurs" propres au langage HTML ! Pour vous aider, voici un tableau reprenant les principales couleurs utilisables sur les sites web :
Tableau de concordance des codes et des couleurs | |||
|---|---|---|---|
| résultat | codage significatif | codage hexadécimal | résultat |
|
white |
FFFFFF |
|
|
ghostwhite |
F8F8FF |
|
|
whitesmoke |
F5F5F5 |
|
|
snow |
FFFAFA |
|
|
azure |
F0FFFF |
|
|
honeydew |
F0FFF0 |
|
|
mintcream |
F5FFFA |
|
|
lightyellow |
FFFFE0 |
|
|
floralwhite |
FFFAF0 |
|
|
ivory |
FFFFF0 |
|
|
linen |
FAF0E6 |
|
|
oldlace |
FDF5E6 |
|
|
seashell |
FFF5EE |
|
|
lavenderblush |
FFF0F5 |
|
|
lavender |
E6E6FA |
|
|
gainsboro |
DCDCDC |
|
|
lightgrey |
D3D3D3 |
|
|
silver |
C0C0C0 |
|
|
darkgray |
A9A9A9 |
|
|
lightslategray |
778899 |
|
|
slategray |
708090 |
|
|
gray |
808080 |
|
|
dimgray |
696969 |
|
|
black |
000000 |
|
|
bisque |
FFE4C4 |
|
|
wheat |
F5DEB3 |
|
|
moccasin |
FFE4B5 |
|
|
peachpuff |
FFDAB9 |
|
|
mistyrose |
FFE4E1 |
|
|
pink |
FFC0CB |
|
|
lightpink |
FFB6C1 |
|
|
rosybrown |
BC8F8F |
|
|
coral |
FF7F50 |
|
|
tomato |
FF6347 |
|
|
orangered |
FF3300 |
|
|
red |
FF0000 |
|
|
crimson |
DC143C |
|
|
indianred |
CD5C5C |
|
|
firebrick |
B22222 |
|
|
darkred |
8B0000 |
|
|
maroon |
800000 |
|
|
brown |
A52A2A |
|
|
saddlebrown |
8B4513 |
|
|
sienna |
A0522D |
|
|
chocolate |
D2691E |
|
|
darkorange |
FF8C00 |
|
|
orange |
FFA500 |
|
|
lightsalmon |
FFA07A |
|
|
darksalmon |
E9967A |
|
|
salmon |
FA8072 |
|
|
sandybrown |
F4A460 |
|
|
navajowhite |
FFDEAD |
|
|
blanchedalmond |
FFEBCD |
|
|
papayawhip |
FFEFD5 |
|
|
antiquewhite |
FAEBD7 |
|
|
beige |
F5F5DC |
|
|
cornsilk |
FFF8DC |
|
|
palegoldenrod |
EEE8AA |
|
|
khaki |
F0E68C |
|
|
yellow |
FFFF00 |
|
|
gold |
FFD700 |
|
|
darkgoldenrod |
B8860B |
|
|
peru |
CD853F |
|
|
goldenrod |
DAA520 |
|
|
tan |
D2B48C |
|
|
burlywood |
DEB887 |
|
|
darkkhaki |
BDB76B |
|
|
chartreuse |
7FFF00 |
|
|
greenyellow |
ADFF2F |
|
|
lawngreen |
7CFC00 |
|
|
lime |
00FF00 |
|
|
springgreen |
00FF7F |
|
|
palegreen |
98FB98 |
|
|
mediumspringgreen |
00FA9A |
|
|
limegreen |
32CD32 |
|
|
mediumseagreen |
3CB371 |
|
|
yellowgreen |
9ACD32 |
|
|
aliceblue |
9ACD32 |
|
|
mediumaquamarine |
66CDAA |
|
|
darkseagreen |
8FBC8F |
|
|
forestgreen |
228B22 |
|
|
green |
008000 |
|
|
seagreen |
2E8B57 |
|
|
olive |
808000 |
|
|
olivedrab |
6B8E23 |
|
|
darkgreen |
006400 |
|
|
darkslategray |
2F4F4F |
|
|
darkolivegreen |
556B2F |
|
|
aquamarine |
7FFFD4 |
|
|
aqua |
00FFFF |
|
|
cyan |
00FFFF |
|
|
paleturquoise |
AFEEEE |
|
|
turquoise |
40E0D0 |
|
|
mediumturquoise |
48D1CC |
|
|
darkturquoise |
00CED1 |
|
|
lightseagreen |
20B2AA |
|
|
cadetblue |
5F9EA0 |
|
|
teal |
008080 |
|
|
darkcyan |
008B8B |
|
|
steelblue |
4682B4 |
|
|
deepskyblue |
00BFFF |
|
|
lightskyblue |
87CEFA |
|
|
lightsteelblue |
B0C4DE |
|
|
powderblue |
B0E0E6 |
|
|
skyblue |
87CEEB |
|
|
cornflowerblue |
6495ED |
|
|
dodgerblue |
1E90FF |
|
|
mediumslateblue |
7B68EE |
|
|
slateblue |
6A5ACD |
|
|
royalblue |
4169E1 |
|
|
blue |
0000FF |
|
|
mediumblue |
0000CD |
|
|
darkslateblue |
483D8B |
|
|
navy |
000080 |
|
|
darkblue |
00008B |
|
|
midnightblue |
191970 |
|
|
indigo |
4B0082 |
|
|
blueviolet |
8A2BE2 |
|
|
darkorchid |
9932CC |
|
|
darkviolet |
9400D3 |
|
|
mediumpurple |
9370DB |
|
|
orchid |
DA70D6 |
|
|
mediumorchid |
BA55D3 |
|
|
fuchsia |
FF00FF |
|
|
magenta |
FF00FF |
|
|
hotpink |
FF69B4 |
|
|
violet |
EE82EE |
|
|
thistle |
D8BFD8 |
|
|
plum |
DDA0DD |
|
|
palevioletred |
DB7093 |
|
|
deeppink |
FF1493 |
|
|
mediumvioletred |
C71585 |
|
|
purple |
800080 |
|
|
darkmagenta |
8B008B |
|
Que vous utilisiez le mot figurant dans la colonne de gauche, ou le code présenté dans celle de droite, le résultat sur votre page devrait être le même. Il est toutefois conseillé d'utiliser les codes hexadécimaux, jugés plus fiables et lisibles par l'ensemble des navigateurs Web. De plus, les noms de couleurs sont en nombre limité, tandis qu'il existe un nombre quasi illimité de nuances lorsque l'on utilise le codage hexadécimal.
D'autres palettes de couleurs sont disponibles sur les sites suivants :
- http://www.ficml.org/jemimap/style/color/couleur.html
- http://www.henri-ruch.ch/HTML/Couleurs/nom_couleur.asp
27 novembre 2007
Comment déplacer la bannière publicitaire ?
AVIS aux Canalblogueurs : Canalblog ayant récemment modifié le codage de ses bannières Google, le code indiqué ci-dessous est devenu obsolète. L'utilisation de ce dernier peut créer des bugs d'affichage (déplacement de la colonne de gauche...) sur votre blog. Si quelqu'un connaît le nouveau code permettant de déplacer cette bannière publicitaire, merci de m'en faire part ;-)
Pour déplacer l'imposante bannière publicitaire qui figure par défaut en en-tête de votre blog Canalblog, il suffit de suivre la procédure suivante :
1. Rendez-vous dans la feuille de style de votre blog et copiez-collez le code suivant avant la balise {body...} :
#pub{
position:absolute;
top:4500px;
left:-500px;}
2. Sur chacune des pages où vous souhaitez déplacer la bannière, remplacez la balise <body> par le code suivant :
<!--<body onload="mymessage()">-->
<div id="pub"><script language="javascript" src="http://i2as.idregie.com/i-j.j?s=1595&w=468&h=60&cb=66467712" type="text/javascript">
</script>
<noscript>
<a href="http://i2as.idregie.com/c.php?s=1595&w=468&h=60&cb=66467712"><img src="http://i2as.idregie.com/i.php?s=&w=&h=&cb=" width="468" height="60" border="0" alt="" /></a>
</noscript></div>
3. Ensuite, retournez dans la feuille de style et faites varier les chiffres (ceux du code que vous avez copié-collé à l'étape 1) situés après "top" et "left" pour positionner la bannière où vous le souhaitez dans la page.
Faites un aperçu des différentes pages et constatez le résultat ! Seul petit inconvénient : vous verrez apparaître un petit bout de code juste au-dessus du titre de votre blog (du genre "--> ")... Mais bon, à choisir, moi je préfère ça !
Comment référencer son blog ou son site ? (2ème partie)
Suite à la première étape, vous pouvez (après plusieurs semaines, bien sûr) vérifier le nombre de pages de votre site indexées sur les différents moteurs de recherche, le nombre de "backlinks" (liens des sites pointant vers le vôtre), ainsi que le pagerank de votre site. Pour cela, rendez-vous sur Yatooweb Référencement
La seconde étape du référencement consiste à enregistrer votre site sur les principaux annuaires généralistes, ainsi que ceux qui correspondent spécifiquement au thème du site. L'idéal est ensuite de s'enregistrer auprès des principaux "digg-like" et d'y promouvoir régulièrement des articles, car ces plateformes permettent de générer du trafic ciblé vers votre site. Mais au fait, qu'est-ce qu'un digg-like ? Il s'agit d'une plateforme communautaire sur laquelle les membres envoient leurs articles favoris et votent pour ceux des autres, dans le but d'établir un classement des meilleurs articles du moment. Le nom de "digg-like" provient du site Digg.com, le pionnier en la matière.
Quelques annuaires généralistes :
- Bonweb.com
- Lebest.fr
- Francite.fr
- Hit-parade.com
- Top-blog.org
- Netnoo.com
- Hebdotop.com
- Wedoo.com
- Ousurfer.com
- Vitavous.com
- Meilleursliens.be
- Francetop.com
- Liensutiles.org
- WebRankInfo.com/annuaire
- Annuaire-francophone.net
- Mirti.com
- Toutlemondeenblogue.com
- TV5.org/Blogosphere
- Caledoscope.com/Blogotop
- Sites-internationaux.com
- Noogle.fr
- Yakavoir.com
- Indexweb.info
Les principaux "digg-like" francophones :
- Wikio.fr
- Scoopeo.com
- Fuzz.fr
- Tapemoi.com
- Blogmemes.fr
- Blogasty.com
- Nuouz.com
- Pioche.fr
- Reporter.fr.be.msn.com
- Linkertop.com
Vous trouverez d'autres Digg-like sur le site Conseilsmarketing.fr
Pour en savoir davantage sur le référencement, je vous invite à télécharger gratuitement le Guide du référencement, un guide très complet sur l'art du référencement.
20 novembre 2007
Plein de boutons RSS très design pour votre blog !
Aujourd'hui, je vous propose de choisir ou de changer votre bouton RSS ! Parmi tous ces beaux boutons (50 au total !), je suis certain que vous trouverez celui qui vous convient le mieux ;-)
Pour les novices, un bouton RSS permet aux visiteurs de votre site de se tenir informés des nouveaux articles diffusés sur votre page web via un "lecteur RSS" (ex : Google Reader). Ils recevront sur leur lecteur soit les titres des derniers articles publiés, soit le début de ces articles (pour lire la suite, ils seront donc obligés de se connecter sur votre site web), soit l'intégralité des articles, selon les paramètres définis par votre hébergeur.
Pour installer un de ces boutons sur votre blog Canalblog et le rendre "fonctionnel" :
1. Uploadez (téléchargez sur le serveur Canalblog) le bouton RSS de votre choix :
- enregistrez l'image du bouton sur votre bureau et ouvrez un nouveau message sur votre blog, puis cliquez sur l'icône "insertion d'une image", recherchez l'image sur votre bureau, et validez.
- dans l'interface Canalblog, allez ensuite sous l'onglet "Outils" > "gestion des fichiers" > "images" > faites un clic droit sur le nom de l'image qui vous intéresse (celle du bouton RSS, bien sûr) > sélectionnez "propriétés" > puis sélectionnez et copiez l'adresse URL affichée.
2. Rendez-vous ensuite dans l'onglet "Apparence" puis "éditez les fichiers de ce modèle" (accessible en mode avancé uniquement). Il vous reste à choisir dans le menu déroulant les pages où vous souhaitez installer le bouton.
3. Dans chaque page, repérez les balises suivantes dans le code HTML : <BlogSiteFeed> et </BlogSiteFeed>
4. Remplacez le contenu allant de la balise <BlogSiteFeed> à la balise </BlogSiteFeed> par le code suivant (les balises <br> vous permettent de laisser un espace au-dessus et au-dessous du logo RSS) :
<br>
<BlogSiteFeed>
<div class="item"><a href="<$BlogSiteFeedURL$>" title="Abonnez-vous à nos articles"><center><IMG SRC="URL DE VOTRE IMAGE"></center></a></div>
</BlogSiteFeed>
<br>
