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>
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 ;-)
Bonjour tout le monde !
Chers visiteurs,
Si vous avez un peu d'expérience sur Canalblog, et que vous commencez à voir les limites du mode "normal", ce blog va vous permettre d'exploiter à fond les capacités de Canalblog !
Etant moi-même blogueur depuis octobre 2006, je sais à quel point il est difficile au début de s'y retrouver dans le charabia de la blogosphère lorsqu'il s'agit tout simplement de personnaliser son blog. C'est pourquoi je vais vous divulguer la plupart de mes tuyaux pour construire un blog "design" et unique.
Malgré le peu de temps dont je disposerai pour vous répondre, vos commentaires (remarques ou suggestions) seront toujours les bienvenus. En revanche, je ne pourrai pas vous répondre s'il s'agit de vous aider dans la réalisation de votre blog ou la résolution d'un problème quelconque. De nombreux blogs Canalblog sont entièrement consacrés à cela.
Bon surf !
François
