Référencement :
conseils, outils, actualité, forum
tout ça gratuit !

        

Le Blog pour personnaliser son blog

Plein d'astuces pour personnaliser votre blog ou votre site web, et ameliorer son design et sa visibilite. Vous trouverez sur ce site toutes les informations dont vous avez besoin pour referencer votre blog, le personnaliser, ajouter des modules utiles a vos internautes. Une veritable boite a outils pour blogmasters.

Actualité du site

Dernières nouveautés du site Le Blog pour personnaliser son blog :

• Gagnez de l'argent avec votre site !
  C'est bien connu : le développement d'un site ou d'un blog prend du temps et vous oblige parfois à faire des sacrifices... Une manière de vous "consoler" ou de rentabiliser le temps investi dans la création de vos pages est donc de recourir à la publicité. Mais attention, pas n'importe quelle publicité ! Je vais vous donner ici quelques liens pour trouver et installer des bannières publicitaires sur votre site.Avant toute chose, sachez qu'il existe principalement deux manières de rentabiliser (gratuitement) votre site par la publicité :- s'inscrire auprès d'une plateforme d'affiliation, qui vous permet de choisir vous-même les annonceurs dont vous souhaitez diffuser les publicités (en fonction des sujets traités sur votre site) => Si je pouvais vous conseiller une excellente plateforme d'affiliation, je vous suggérerais volontiers NetAffiliation . En effet, il s'agit de la plateforme que j'utilise pour rentabiliser l'ensemble de mes sites : elle est très simple d'utilisation, regroupe de nombreux annonceurs répartis à travers un grand nombre de thèmes, les bannières publicitaires sont diversifiées (il y en a pour tous les goûts), et les rémunérations sont très attractives.- s'inscrire à un programme de diffusion de liens sponsorisés, dont les bannières sont générées automatiquement en fonction du contenu (articles et mots-clés) de vos pages => Pour ma part, j'utilise à la fois les programme Google Adsense et Oxado. Le premier est le plus utilisé à travers le monde entier, et a largement fait ses preuves. Le second est apparu plus récemment, mais offre une rémunération un peu plus attractive, et vous indique généralement sous 2 à 5 jours si votre site est éligible (contre parfois plus d'un mois pour Google Adsense !). L'avantage de ces deux programmes est qu'ils permettent de personnaliser l'apparence des annonces aux couleurs de votre site, de manière à ne pas dénaturer l'aspect graphique de votre site.Dans les deux cas, le principe est le même : une fois votre demande d'affiliation acceptée, la plateforme d'affiliation vous permet de choisir les formats publicitaires que vous souhaitez diffuser (vertical, horizontal, carré,...) et d'accéder aux codes qui vous permettront d'installer facilement les bannières publicitaires sur votre site. Il vous suffira ensuite de copier-coller ces codes au sein de vos pages (Pour les Canalblogueur : ceci est à réaliser en mode avancé, bien entendu).D'autres méthodes peuvent compléter les deux précédentes : - la diffusion de contenu en marque blanche- le micro paiement- les régies publicitaires- l'affiliation directe.
• Insérez une barre de menu horizontale sur votre blog !
  Pour installer un menu horizontal "moderne" comme celui figurant sur mon blog sur les biocarburants, il vous suffit de suivre à la lettre les étapes suivantes (il s'agit d'un menu de type CSS, pour les connaisseurs) :1. Rendez-vous sous l'onglet "Apparence"2. Cliquez sur "Editer les fichiers de ce modèle"3. Choisissez dans le menu déroulant la première page sur laquelle vous souhaitez installer le menu en question (par exemple, la page d'accueil)4. Pour que le menu s'affiche juste au-dessous de votre header (la bannière de titre de votre blog), copiez-collez l'ensemble du code suivant après la balise <div id="topbar"> (vous la trouverez 7 ou 8 lignes après </head>) :<!-- DEBUT Bloc BARRE DE MENU --> <div id="nav" align="center">    <ul>        <li><a href="http://VOTRESITE.canalblog.com">Accueil</a></li>        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE1/index.html">CATEGORIE1</a></li>        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE2/index.html">CATEGORIE2</a></li>        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE3/index.html">CATEGORIE3</a></li>        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE4/index.html">CATEGORIE4</a></li>        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE5/index.html">CATEGORIE5</a></li>        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE6/index.html">CATEGORIE6</a></li>        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE7/index.html">CATEGORIE7</a></li></ul></div> <style type="text/css"> #nav li, #nav ul {    margin: 0;     padding: 0;    display: inline;} #nav li a:link, #nav li a:visited {    display: block;    float: left;    height: 32px;    line-height: 32px;    font-family: verdana;    font-size: 12px;    text-decoration: none;    text-align: center;    background: #fff url(http://storage.canalblog.com/28/17/198194/17825892.gif) repeat-x;    padding: 0 23px;} #nav li a:hover, #nav li a:active {    background: #000 url(http://storage.canalblog.com/28/17/198194/17825892.gif) 0 -32px;    padding: 0 23px;} #nav  {  width: 1000px;  margin: 0 auto;} </style> <!-- FIN Bloc BARRE DE MENU -->5. Pour personnaliser ce menu :5.1. Les titres / liens de votre menu :a- Remplacez "http://VOTRESITE.canalblog.com" par l'adresse de votre blogb- Remplacez "http://VOTRESITE.canalblog.com/archives/CATEGORIE1/index.html" par l'adresse complète de la page menant aux articles postés dans votre 1ère catégorie. Pour obtenir cette adresse, cliquez sur le lien menant vers votre 1ère catégorie sous la rubrique "catégories" figurant dans l'une de vos colonnes. Ensuite, il vous suffit de copier l'adresse affichée dans la barre de navigation et de la copier directement à la place de "http://VOTRESITE.canalblog.com/archives/CATEGORIE1/index.html"c- Remplacez l'expression CATEGORIE1 située sur à la fin de la ligne .../index.html">CATEGORIE1</a></li> par le nom que vous souhaitez donner à votre 1ère catégoried- Il vous reste à effectuer la même démarche pour les catégories suivantes.5.2. Le design de votre menu :a- Choisissez le design de votre barre de menu parmi les images suivantes (la couleur du dessus sera celle de votre barre de menu, celle du dessous sera celle qui apparaitra lorsque vous survolerez ou cliquerez sur une rubrique du menu) :menu type 1 menu type 2 menu type 3 menu type 4b- Faîtes un clic droit sur le design de votre choix puis sélectionnez "Enregistrer la photo sous..." > choisissez "Bureau" pour que cette image soit enregistrée sur votre bureau, donc facilement accessible.c- Rendez-vous ensuite sous l'onglet "Nouveau message". Dans un message vierge, cliquez sur l'icône "Insertion d'un fichier" située à droite de la barre d'édition. Une fenêtre s'ouvre : cliquez sur "Parcourir" et sélectionnez sur votre bureau l'image enregistrée précédemment. d- Allez sous l'onglet "Outils" puis cliquez sur la rubrique "Gestion des fichiers". Cliquez ensuite sur le dossier "docs" et repérez le nom du design que vous venez d'ajouter. e- Sur le nom du design en question, faîtes un clic droit et sélectionnez "Propriétés". Sur la page qui s'ouvre, vous trouverez la ligne "Adresse (URL)" commençant par http://storage.canalblog.com/. Vous allez sélectionner l'ensemble de cette adresse et la copier.f- Dans les deux expressions suivantes, remplacez les deux adresses situées entre parenthèses par l'adresse URL que vous venez de copier : #nav li a:link, #nav li a:visited {    display: block;    float: left;    height: 32px;    line-height: 32px;    font-family: verdana;    font-size: 12px;    text-decoration: none;    text-align: center;    background: #fff url(http://storage.canalblog.com/XX/XX/XXXXX/XXXXXXX.gif) repeat-x;    padding: 0 23px;} #nav li a:hover, #nav li a:active {    background: #000 url(http://storage.canalblog.com/XX/XX/XXXXX/XXXXXXX.gif) 0 -32px;    padding: 0 23px;}5.3. Réglez la largeur de votre barre de menu en remplaçant la variable située après "width" par la largeur de votre bannière de titre : #nav  {  width: 1000px;  margin: 0 auto;}5.4. Remarque : il est conseillé de ne faire apparaître dans la barre de menu que les principales catégories de votre blog (5 ou 6), pour éviter les bugs d'affichage (le plus courant étant l'affichage de votre barre de menu sur 2 lignes).
• Comment insérer un compteur live et une bannière page rank
  Vous souhaitez savoir en temps réel combien de personnes sont connectées sur votre blog ou connaître votre page rank (indice de popularité de votre site, calculé selon un algorithme créé par Google) quand vous le souhaitez ? C'est très simple, il vous suffit de suivre les étapes suivantes :1. Pour un compteur live, rendez-vous à l'adresse : http://www.atoomic.com/alive.php2. Inscrivez votre site en remplissant l'ensemble des champs du formulaire3. Copiez le code correspondant au compteur live ou au page rank et collez-le dans l'une des colonnes de la page d'accueil de votre blog : pour cela, rendez-vous dans l'onglet "Apparence" > Editer les fichiers de ce modèle > dans le menu déroulant, choisissez "Page d'accueil" > collez le ou les code(s) après la balise <div id="rightbar"><div class="navlinks"> Voici ce que vous obtiendrez après avoir collé les codes : _ALIVE=0; if(_ALIVE==1){alive("27485");} Live compteur visiteurs _APR=0; if(_APR==1){apagerank("http://personnaliser.canalblog.com");} Afficher votre PageRank google PR
• Ajoutez une image de fond à votre blog !
  Pour insérer une image de fond à votre blog Canalblog, rien de plus simple ! Suivez les étapes suivantes :1. Choisissez une image au format 1020 x 600 px.2. Cliquez sur l'onglet "Nouveau message". Dans ce nouveau message, cliquez sur l'icône "Insertion d'un fichier" et parcourez votre PC pour sélectionner l'image à insérer sur votre blog.3. Rendez-vous directement sous l'onglet "Outils" puis allez dans "Gestion des fichiers" puis "docs". Dans ce dossier, cherchez l'image que vous venez d'insérer et faites un clic droit dessus puis choisissez "Propriétés". Dans la fenêtre qui s'ouvre, sélectionnez et copiez l'URL (adresse web) affichée.4. Allez ensuite dans l'onglet "Apparence" puis "Editer les fichiers de ce modèle". Dans le menu déroulant, choisissez "Feuille de style générale".5. Une fois sur la feuille de style, repérez le bloc de codes commençant par "body" et ajoutez la ligne de code suivante : background-image: url("ADRESSE URL DE VOTRE IMAGE");background-attachment : fixed;Attention : n'oubliez surtout pas le ";" à la fin de l'expression ! 6. Voici ce que vous devriez obtenir :body { margin: 0px 0px 0px 0px; text-align: center; background-color: #696969; background-image: url("ADRESSE URL DE VOTRE IMAGE");background-attachment : fixed; }7. Option : Vous pouvez rendre votre fond d'écran mobile (qui se déplace en même temps que votre page défile) en supprimant l'expression background-attachment : fixed;
• De nouveaux boutons RSS !
  Voici quelques jolis boutons RSS pour agrémenter votre site : Pour savoir comment installer l'une de ces icônes RSS sur votre blog, cliquez ICI.
• Installer un outil de traduction sur votre blog
  Vous souhaitez permettre à vos internautes non francophones de traduire vos pages dans leur langue ?Suite à la demande de plusieurs Canalbloggers, j'ai décidé de vous "divulguer" la méthode pour y parvenir.Pour installer un traducteur sur votre blog, la façon la plus simple est de copier-coller un code dans l'une des colonnes de votre blog, sur chacune des pages sur lesquelles vous souhaitez que l'outil apparaisse. Voici les étapes à suivre :1. Rendez-vous sous l'onglet "Apparence"2. Cliquez sur "Editer les fichiers de ce modèle"3. Choisissez dans le menu déroulant la première page dans laquelle vous souhaitez installer le fameux traducteur (par exemple, la page d'accueil)4. Ouvrez une autre fenêtre pour vous connecter sur la page Yahoo! Babel Fish où se trouve le code à insérer dans vos pages. Sur ce site, cliquez sur le deuxième "Je veux cet outil" (celui qui a pour titre "Traduire votre page")5. Il vous suffit ensuite de copier-coller le code affiché au sein de votre page Canalblog (par exemple, la page d'accueil), de préférence juste après le code <div id="rightbar"><div class="navlinks">Voili voilou !
• Installer un moteur de recherche sur son blog
  L'outil de recherche est devenu indispensable pour permettre aux internautes de s'y retrouver au sein d'un site web ou d'un blog. Je vous indique ci-dessous les étapes pour installer un moteur de recherche dans votre blog Canalblog :1. Rendez-vous sous l'onglet "Apparence"2. Cliquez sur "Editer les fichiers de ce modèle"3. Choisissez dans le menu déroulant la première page dans laquelle vous souhaitez installer le fameux moteur (part exemple, la page d'accueil)4. Dans une autre fenêtre, rendez-vous par exemple sur la page de Yahoo (Google est un peu plus compliqué à installer, mais si vous me le demandez, je me ferais un plaisir de vous détailler la démarche) donnant le code du moteur à installer : http://fr.search.yahoo.com/info/ysearchbox_instructions.html5. Choisissez la version "Choix 2" (si vous désirez installer le moteur dans la partie centrale de votre page web) ou "Choix 4" (si vous désirez insérer le moteur dans une de deux colonnes de la page)6. Il vous suffit alors de remplacer le texte "VOTRE DOMAINE" dans le code figurant sous la version du moteur que vous préférez par l'adresse complète de votre blog (par exemple "personnaliser.canalblog.com")7. Copiez ensuite le code ainsi modifié8. Retournez sur la page Canalblog où vous souhaitez afficher le moteur (page d'accueil, par exemple) puis collez le code à l'endroit souhaité :- pour le moteur "choix 2" : l'emplacement idéal se situe entre les balises <div class="blogbody"> et <Blogger>- pour le moteur "choix 4" : placez-le plutôt en haut de la colonne de droite, c'est-à-dire juste après les balises <div id="rightbar"><div class="navlinks">
• 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&eacute;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&eacute; par <$BlogItemAuthorNickname$> &agrave; <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette cat&eacute;gorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="R&eacute;troliens">R&eacute;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">&nbsp;</div></div></body>
• 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>

Retrouvez le flux de syndication associé en cliquant sur cette icône :