18 mai 2008
NRJ Hits en live sur votre blog !
Un gadget sympa pour agrémenter votre blog : la chaîne NRJ Hits diffusée en direct sur votre blog ! Pour installer un lecteur media NRJ Hits sur votre blog, copiez-collez simplement le code suivant au sein du message de votre choix en cliquant sur l'icône "<>" (qui permet de passer en mode HTML au sein d'un message sur Canalblog) située dans la barre d'outils :
<!--DEBUT CODE NRJ-->
<p ><embed id="mediaPlayer" name="mediaPlayer" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" src="http://www.shadownet.ro/channels/nrjhits.asx" width="250" height="255" type="application/x-mplayer2" displaysize="4" autosize="-1" bgcolor="darkblue" showcontrols="true" showtracker="0" showdisplay="0" showstatusbar="1" videoborder3d="-1" autostart="true" designtimesp="5311" loop="true"></embed></p>
<!--FIN CODE NRJ-->
Ce qui donnera (la video est volontairement arrêtée pour ne pas vous déranger lors de votre navigation) :
Bien entendu, il est également possible d'installer le lecteur NRJ Hits au sein des colonnes de votre blog ,(uniquement si vous êtes en mode avancé, pour les Canalblogueurs).
04 mars 2008
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 blog
b- 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égorie
d- 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 2
menu type 3
menu type 4
b- 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).
19 février 2008
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.php
2. Inscrivez votre site en remplissant l'ensemble des champs du formulaire
3. 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 :
02 février 2008
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.
28 janvier 2008
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 !
14 janvier 2008
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.html
5. 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">
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>
