Personnaliser.canalblog.com

	Entrez les termes que vous recherchez. Envoyer un formulaire de recherche
	Web Personnaliser.canalblog.com

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&gt;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 = &quot;<data:label.name/>&quot;;
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] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; 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:500px;
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&amp;w=468&amp;h=60&amp;cb=66467712" type="text/javascript">
</script>
<noscript>
<a href="http://i2as.idregie.com/c.php?s=1595&amp;w=468&amp;h=60&amp;cb=66467712"><img src="http://i2as.idregie.com/i.php?s=&amp;w=&amp;h=&amp;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 http://test.yatooweb.com

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>

13 novembre 2007

Comment référencer son blog ou son site ? (1ère partie)

Pour promouvoir votre site sur le web, il faut passer par une étape primordiale : le référencement. Cette procédure indispensable permet aux moteurs de recherche d'indexer vos pages web et donc d'y accéder. Référencer son site peut se faire par le biais d'un professionnel, mais cela peut vous revenir très cher (au moins plusieurs centaines d'euros pour un référencement approfondi). C'est pour cela que je vous indique ici la manière de soumettre votre site manuellement et gratuitement.

Afin de vous faciliter la tâche, je vous indique ici les principaux moteurs de recherche et le lien direct vers leur page de soumission :
- Google / AOL / Free / Netscape : http://www.google.com/addurl/
- Microsoft Live Search (Msn Explorer) : http://search.msn.com.sg/docs/submit.aspx
- Yahoo / Altavista / AlltheWeb / Lycos / Hotbot : https://siteexplorer.search.yahoo.com/submit (il est nécessaire de créer un compte Yahoo pour pouvoir procéder à la soumission d'un site)
- Annuaire Dmoz : http://www.dmoz.org/add.html
- Alexa : http://www.alexa.com/site/help/webmasters
- Exalead : http://www.exalead.fr/search/submitYourSitePage
- Orange / Voila : http://referencement.ke.orange.fr/
- Anoox : http://www.anoox.com/add_for_indexing_free.jsp
- Mirago : http://www.mirago.fr/fr/region/ajout.asp
- Antisearch : https://admin.antidot.net/URL_SUBMITION/SubmitUrl?C=101
- Accoona: http://www.accoona.com/public/submit_website.jsp
- Theoma & Ask (+ 20 autres moteurs de recherche) : http://www.ineedhits.com/free-tools/submit-free.aspx

Si vous souhaitez être référencés automatiquement sur les 250 moteurs de recherche les plus importants du Web, je vous recommande de passer par le service Add and Boost, qui propose cette offre au prix de 29 euros. Ce service inclut bien sûr le référencement auprès de Google, Voila, Yahoo, MSN... Les avantages de ce service : le meilleur rapport qualité/prix du marché, de nombreuses références, une garantie satisfaction, soumission en 24 h, rapport de soumission. Jetez un oeil au site Add and Boost pour mieux comprendre l'intérêt de cette offre.

Par la méthode classique de soumission (manuelle), votre site devrait être référencé chez ces moteurs dans un délai de 2 semaines à plusieurs mois. Je vous indiquerai dans mon prochain message les étapes suivantes pour vous garantir un bon référencement.

12 novembre 2007

Personnaliser le design de son blog Canalblog

En mode avancé, vous vous demandez sans doute comment vous allez pouvoir modifier la couleur de vos colonnes, le style d'écriture... et bien d'autres choses que vous pouviez faire en mode normal. Et bien, ça n'est pas plus compliqué !

Pour commencer, rendez-vous dans l'onglet "Apparence", puis dans le menu déroulant. Dans ce dernier, vous allez sélectionner "Feuille de style générale". J'ai essayé de la décortiquer le plus précisément possible pour vous permettre de la personnaliser à votre guise.

Vous allez ensuite parcourir la "feuille de style" pour identifier les parties que vous souhaitez modifier :

body {
margin: 0px 0px 0px 0px;
text-align: center;
background-color: #000000; (couleur du fond)
}
#container {
width: 1000px; (largeur totale de la page web)
padding: 0px;
background-color: #000000; (couleur de fond)
border-top-style: solid; (style de la bordure du dessus : "solid" = ligne continue, peut être remplacé par "none" = pas de ligne - "dotted" = pointillés fins - "dashed" = pointillés épais - "double" = double ligne)
border-right-style: solid; (style de la bordure de droite)
border-bottom-style: solid; (style de la bordure du bas)
border-left-style: solid; (style de la bordure de gauche)
border-width: 1px; (largeur de la bordure - prévoyez 3px minimum si vous choisissez un "border-style" de type "double", pour que l'effet soit visible)
border-color: #000000; (couleur de la bordure)
margin-right: auto;
margin-left: auto;
}
#content { (colonne centrale)
float: left;
width: 590px; (largeur de la colonne centrale)
background-color: #000000;  (couleur de la colonne centrale)
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #996600; (couleur des bordures)
overflow: hidden;
}
#rightbar { (colonne de droite)
float: left;
width: 205px; (largeur de la colonne)
background-color: #000000; (couleur de la colonne)
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #996600;
overflow: hidden;
}
#leftbar { (colonne de gauche)
float: left;
width: 205px; (largeur de la colonne)
background-color: #000000; (couleur de la colonne)
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #996600;
overflow: hidden;
}
#topbar-logo { (la zone de titre de votre blog, qui peut être remplacée par une bannière personnalisée)
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #000000;
background: #000000 url(http://xxxxxxxxxxxxxxxxxxxxxxxxxx) no-repeat 0% 0%; (adresse url de la bannière/image de votre blog)
width: 1000px;
height: 150px;
display: block;
}
div .logolink a {
display: block;
text-decoration: none;
width: 100%;
height: 150px;
}
#topbar { (bannière)
background-color: #000000; (couleur de fond de la bannière)
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #000000;
padding: 10px;
display: none;
}
a {
text-decoration: none; (vous pouvez remplacer "none" par "underline", si vous désirez que le texte soit souligné)
}
a:link { (liens affichés sur votre site)
color: #CC9933;
text-decoration: underline;
}
a:visited { (liens visités, autrement dit ceux qui ont déjà été cliqués)
color: #CC9933;
text-decoration: underline;
}
a:active { (liens actifs)
color: #CC9933;
text-decoration: underline;
}
a:hover { (liens survolés = apparence des liens lorsqu'ils sont survolés par le curseur de votre souris)
color: #CC9933;
text-decoration: none;
}
h1 {
margin: 0px;
padding: 0px;
}
h2 {
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
}
#topbar h1 { (titre de votre blog, tant que ce dernier n'est pas remplacé par une bannière)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: xx-large;
font-weight: bold;
font-style: normal; (vous pouvez aussi choisir : "italic")
text-align: left; (position du texte : left = gauche - center = au centre - right = à droite)
}
#topbar a {
text-decoration: none; (pour souligner le titre du blog, remplacez "none" par "underline")
color: #CC9933;
}
#topbar h2 { (sous-titre de votre blog, tant que ce dernier n'est pas remplacé par une bannière)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #996600;
font-size: small;
font-weight: normal;
font-style: italic;
text-align: left;
}
.blogbody {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none; padding: 10px;
text-align: left;
line-height: 150%;
}
.blogbody h2 { (date de votre blog)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #996600;
font-size: xx-small;
font-weight: bold;
font-style: normal;
text-transform: none; (pour que votre texte apparaisse en majuscules, remplacez "none" par "uppercase")
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-width: 1px;
border-color: #996600;
margin-bottom: 10px;
padding: 3px;
}
.blogbody h3 { (titres des messages)
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: large;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: center;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #996600;
background-color: #FFCC66; (permet d'ajouter une couleur de fond à vos titres)
margin-bottom: 10px;
padding: 3px;
}
.blogbody p { (texte des messages)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
line-height: 150%; (définissez ici la taille de l'écart entre les lignes de texte)
margin-bottom: 10px;
}
.blogbody .itemfooter { (pied des messages : posté par, commentaires...)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #996600;
font-size: xx-small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
margin-bottom: 25px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-width: 2px;
border-color: #996600;
padding: 3px;
clear: both;
}
.navlinks {
padding: 10px;
}
.navlinks .title { (titre des catégories dans les colonnes)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #996600;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
text-align: left;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-width: 1px;
border-color: #996600;
padding: 3px;
}
.navlinks ul { (permet de modifier l'apparence de la zone des colonnes où se trouvent les différentes catégories)
padding: 0px;
margin: 0px 0px 20px 0px;
list-style-type: none;
margin: 0px 0px 20px 0px;
}
.navlinks li { (permet de modifier l'apparence des catégories dans les colonnes)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: x-small;
font-weight: normal;
font-style: normal;
text-align: left;
line-height: 150%;
margin-top: 10px;
}
.navlinks .item {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: x-small;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 150%;
margin-top: 10px;
margin-bottom: 10px;
}
#calendar { (numéros du calendrier)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: x-small;
line-height: 150%;
padding: 2px;
margin-bottom: 20px;
}
#calendar table {
width: 100%;
padding: 2px;
border-collapse: collapse;
border: 0px;
}
#calendar caption { (titre du calendrier)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: x-small;
font-weight: bold;
text-align: center;
text-transform: uppercase;
padding: 3px;
}
#calendar th {
font-weight: normal;
text-align: center;
}
#calendar td {
text-align: center;
}
.image {
text-align: center;
margin-bottom: 20px;
}
.navlinks img { (permet de modifier les bordures qui encadrent les images)
border-top-style: solid; (remplacez "solid" par "none" si vous ne souhaitez pas que vos images soient encadrées)
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #000000;
}
#album-container { (album photos - pour le personnaliser, inspirez-vous des explications indiquées jusqu''ici, car c'est exactement le même principe)
width: 956px;
padding: 0px;
background-color: #000000;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #99B2CC;
margin-right: auto;
margin-left: auto;
}
#album-content {
float: left;
width: 550px;
background-color: #000000;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#album-nav {
float: left;
width: 406px;
background-color: #000000;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
.albumcol table {
padding: 2px;
border-collapse: collapse;
border: 0px;
font-size: x-small;
}
.albumcol td {
text-align: center;
}
.albumbody {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
padding: 10px;
text-align: left;
line-height: 150%;
}
.albumcol {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
padding: 10px;
text-align: left;
line-height: 150%;
}
.albumcol h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-bottom: 10px;
padding: 0px;
}
.albumbody h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-bottom: 10px;
padding: 0px;
}
.albumbody img {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #000000;
}
.albumcol img {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #000000;
margin: 2px;
}
.albumbody p {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
line-height: 150%;
margin-bottom: 10px;
}
.albumcol p {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
line-height: 150%;
margin-bottom: 10px;
}
.clear {
clear: both;
height: 0px;
line-height: 0px;
}

Pourquoi et comment passer en mode avancé ?

Pourquoi passer en mode avancé

Bien que suffisant pour les webmasters débutants, le mode "normal" proposé par défaut sur Canalblog trouve vite ses limites lorsqu'il s'agit de personnaliser le design de son blog et d'ajouter des fonctionnalités plus sophistiquées.

En effet, le mode normal vous limite aux options de personnalisation suivantes :
- Mise en forme des pages : personnalisation de la couleur de fond et des bordures
- Barre de titre du blog : couleur de fond, insertion d'une bannière au format défini (901 x 150 max)
- Personnalisation des colonnes de gauche, du centre et de droite : largeur, couleur et style des bordures
- Personnalisation des liens : couleur et style.

Compte tenu de ce que vous pouvez déjà faire en mode normal, vous vous demandez donc ce que le mode avancé va vous apporter. Et bien c'est simple, ou plutôt c'est ENOOORME ! Le mode avancé va vous permettre, entre autres, d'ajouter à votre blog les éléments suivants :
- un moteur de recherche
- un compteur de visites
- des bannières publicitaires (utiles pour rentabiliser votre blog...)
- un fond d'écran personnalisé (une image de votre choix)
- une barre de menu horizontale (pour accéder facilement aux rubriques de votre blog)
- des fonctionnalités "Web 2.0" : liens RSS, nuages de tags...

Ne croyez pas que le mode avancé ne soit fait que pour les pros du language HTML, car on s'y fait vite ! En général, pour insérer de nouvelles fonctionnalités ou de nouveaux modules à votre blog, il suffit de copier-coller les lignes de codes que je vous indiquerai !


Avant de passer en mode avancé !!

Avant de passer en mode avancé, pour pouvoir revenir en arrière, je vous conseille fortement de sauvegarder le modèle actuel de votre blog en procédant de la manière suivante :

1. Dans l'onglet "Apparence" de votre blog, cliquez sur "nouveau modèle"
2. Donnez un nom à votre modèle : "Sauvegarde blog"
3. Choisissez une "Apparence générale" et un "thème" au hasard, puis cliquez sur "Valider".

Si vous aviez déjà personnalisé votre blog en mode "normal", vous perdrez l'ensemble de vos modifications (votre bannière, si vous en avez inséré une, et vos couleurs personnalisées, par exemple).


Comment passer en mode avancé

1. Cliquez sur l'onglet "Apparence" puis sur "Paramètres" :

2. Vous arrivez alors sur l'écran suivant :

Ici, il vous suffit alors de cocher la case située devant "Convertir ce modèle en type avancé". Voilà, vous êtes en mode avancé !! Bienvenue au club ;-)