18 juin 2008
Parce que c'est criant de vérité, 10 conseils aux bloggeurs sur les erreurs à ne pas commettre
pour ceux qui ne le connaissent pas, Jakob Nielsen c'est lui, et je publie son article parce que souvent lors de nos relooking nous incitons Damouredo et moi même les bloggeurs dans cette démarche alors que nous ne la connaissions pas.
A lire attentivement!
- Vous n’avez pas de biographie de l’auteur. Les lecteurs aiment savoir qui leur parle...
- Pas de photo de l’auteur : mettre un visage sur un nom et de suite le blog est moins impersonnel. Pensez au blogs qui en ont et remarquez que c'est leur binette qui vous vient en premier quand vous pensez à eux. N'oublions pas que c'est cette "intimité" qui nous différencie de l'austérité des sites!
- Pas de titre descriptif. Les lecteurs doivent être en mesure de comprendre de quoi vous allez parler à partir du titre même de votre article. Des titres descriptifs sont spécialement importants pour la présentation de votre blog sur les moteurs de recherche, les flux (rss), etc. Dans ces environnements, l’internaute lit simplement les titres d’articles et cela lui permet de décider s’il cliquera ou pas pour lire tout l’article. Surtout évitez d’écrire tout le titre en majuscule. Cela réduit de 10 % la vitesse de lecture et les lecteurs ont l’impression que vous criez.
- Des liens qui ne disent pas où ils nous mènent. Certains bloggeurs trouvent cela ingénieux d’écrire " vous pouvez en savoir plus "ici" et "là ". L'être humain n'aime pas l'inconnu, à éviter donc. Dans la même remarque, Nielsen pointe les blogueurs qui citent seulement les prénoms des auteurs de blogs qu’ils référencent : à éviter à moins que vous n’écriviez que pour des amis ("Le Web n’est pas le lycée").
- Vos bons billets sont enterrés dans les archives. Très simple, on peut toujours créer des liens permanents dans son menu vers de vieux billets, même dans un blog. Regarder les mots clés qui génèrent des visitent sur votre blog!
- Le calendrier est votre seul moyen de navigation. Les blogs culinaires en général le savent. Les index explicites c'est drôlement mieux pour trouver ce que l'on est venu chercher
- Fréquence de publication irrégulière. Ne décevez pas votre public qui vous suit. Mais ne polluez pas le cyberespace si vous n’avez rien à dire, c’est un péché. Certain ont tellement compris qu'ils devaient publier pour augmenter ou au moins maintenir leur trafic que même quand ils n'ont rien à dire, ils publient tout et n'importe quoi... Genre les photos de fleurs ou du toutou sur un blog culinaire, on s'en fiche!
- Mélangez les sujets d’intérêt de votre blog. Vous attirerez peut-être des lecteurs, mais ceux qui lisent tout sont ceux qui ont du temps et pas forcément les plus intéressants. Spécialisez-vous dans votre niche et vous serez plus influents. Si vous voulez traiter deux thèmes différents, ouvrez deux blogs
- Oubliez que vous écrivez pour votre futur patron. Le Web est doté d’une longue mémoire. Dans dix ans, que pourra penser vos lecteurs (ou vos enfants) de vos propos naïfs ou puérils d’aujourd’hui ?
- Avoir un nom de domaine sur une plateforme mutualisée qui se termine par blogspot.com ou canalblog.com. Plus longtemps vous restez sur une plateforme mutualisée, plus élevé sera le coût du déménagement. D’autant qu’un nom de domaine a soi ce n’est pas si cher de l'ordre de 10 euros. Bientôt ce genre d'adresse ne fera plus très sérieux sur le web. Pensez y!
Enjoy!
Article original : ici
Phrase défilante
Pour faire défiler un texte les balises<marquee> </marquee>, sont vos copines!
Vous pouvez choisir de faire défiler dans un billet
Ou bien (pour les mode avancé) dans une colonne, en haut du blog, sur votre front, votre coude... bon j'arrête vous avez compris.
Exemple de ligne modulable
<marquee><p><font color="#cc99ff"><font size="4" face="cosmic sans Ms, sans-serif"><strong>Ici</strong></font> </font></p></marquee>
font color = pour le code couleur
font size = la taille du texte
face = la police de caractère
strong = gras
Etc...
Lire la suite
Pour insérer la fonction lire la suite à votre blog la manip' à faire est la suivante :
En bas de votre feuille de style ajoutez la ligne suivante :
1ère étape
#lirelasuite {
display:none;
}
2ème étape
Lors de la saisie du nouveau message cliquez sur :
<>
et rentrez le code suivant
<style type="text/css">
#lirelasuite {display:none;}
</style>
Recliquez sur <> et commencez à saisir normalement votre billet.
3ème étape
Au moment où vous voulez que votre texte s'arrête rebasculez en html en cliquant sur <> et ajoutez alors le code suivant :
<p><a href="#nogo" onclick="document.getElementById('lirelasuite').style.display = 'block';
this.style.display = 'none';">Lire la suite...</a></p>
<p id="lirelasuite">VOTRE TEXTE</p>
Votre texte ne devant pas comporter de <p> et de </p> en dehors de celui du code...
... pour lire la suite cliquez sur "lire la suite"!
Je vous conseille de rester en html pour saisir la suite de votre message.
Pour ceux en mode avancé, vous pouvez zapper la partie 2 en insérant le code directement en haut de votre page d'accueil avant la balise
Enjoy!
17 juin 2008
Ouvrir les liens dans une nouvelle fenêtre
La question du jour :
"Bonjour, voilà une question qui me "turlupine" : j'aimerais savoir s'il est possible, en mode normal, de faire en sorte que le lien inséré dans un message s'ouvre dans une nouvelle fenêtre, comme on peut le faire depuis les "liens amis". "
Mode normal ou avancé c'est pareil en fait.
En mode normal dans le message saisi il faudra passé en html en cliquant sur <> pour pouvoir insérer le code.
Il faut utiliser la balise target et son attribut blank pour obtenir ce résultat. Exemple :
<a href="http:// ton adresse.html" target=_blank>Ton Lien</a>
Exemple pratique :
Sur le mot BlogTuto, je clique sur 
Je rajoute mon adresse : http://blogtuto.canalblog.com/
Ce qui va me donner
BlogTuto
A ce stade de la compet' mon lien s'ouvre dans ma fenêtre.
Je clique alors sur <>, ce qui va me donner le code HTML suivant :
<p><a href="http://blogtuto.canalblog.com/">Blogtuto</a></p>
Avec ma mimine je rajoute : mon target blank ce qui donne :
<p><a href="http://blogtuto.canalblog.com/" target=_blank>Blogtuto</a></p>
Le résultat en image :
En recliquant sur <> je reviens sur mon texte que je peux continuer à écrire.
Pour le mode avancé si vous voulez que vos liens dans vos colonnes renvoient sur une nouvelle fenêtre il faudra faire la même chose
Voilou, c'est tout!
Enjoy!
Sur le mot BlogTuto, je clique sur 
Je rajoute mon adresse : http://blogtuto.canalblog.com/
Ce qui va me donner
BlogTuto
A ce stade de la compet' mon lien s'ouvre dans ma fenêtre.
Je clique alors sur <>, ce qui va me donner le code HTML suivant :
Le résultat en image :
Blogtuto
En recliquant sur <> je reviens sur mon texte que je peux continuer à écrire.
Pour le mode avancé si vous voulez que vos liens dans vos colonnes renvoient sur une nouvelle fenêtre il faudra faire la même chose
Voilou, c'est tout!
Enjoy!
Blogger / blogspot : Insérer un favicon
Peut-être avez-vous remarquez que certains sites ou blogs, comme ici sur BlogTuto, ont sur leur adresse dans la barre de navigation un petit logo à la place de celui de leur hébergeur, inutile certes, mais ô combien mimi!!!.
Vous pouvez échanger le gros B orange pas beau de Blogger... pour le personnaliser et mettre votre propre logo.
Un petit bémol avant de continuer : cette manip fonctionne sous
mozilla mais pas sous IE (Internet Explorer) parce que Blogger tout comme nos amis canalblog ne
prend pas le ".ico" et que du coup IE ne le reconnait pas. Donc, vive
firefox lol
1. Il vous faudra avoir une version miniature de votre logo de 16 x 16 pixels ou 32 x 32 pixels maximum. Pour la faire sous Windows, vous pouvez utiliser le logiciel Paint qui se trouve dans Démarrer - Tous les programmes - Accessoires
pour diminuer la taille de votre image, en prenant soin de la
sauvegarder sous un autre document pour ne pas perdre votre fichier
original. Sinon, vous pouvez, utiliser des
outils offerts en ligne et spécialement conçus pour créer ce genre
d'icône. Photofiltre est une bonne alternative...
2. Rendez-vous sur le site HTML Kit, à la page FavIcon from PICS. Suivez la procédure pour générer votre icône. C'est-à-dire, parcourez votre disque dur pour sélectionner votre image, puis cliquez sur Generate FavIcon.ico. L'outil en ligne se chargera d'en créer une version "icône". Vous aurez le choix entre une icône fixe (normale) et une icône animée à télécharger sur votre ordinateur.
3. Une fois votre icône sauvegardée dans votre ordinateur, changez son extension .ico pour l'extension .jpg OU .png
4. Chargez-la ensuite sur votre blog dans un message.
Une fois chargée cliquez sur "Modifier le code html" ce qui va faire apparaitre cela :
Ce qui nous intéresse c'est cette ligne en rouge dans le code qui est l'adresse de l'image :
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp2.blogger.com/_osNeObZ1rx8/SFe5HccYqGI/AAAAAAAAAGI/m7I2yK5r5_c/s1600-h/icone.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://bp2.blogger.com/_osNeObZ1rx8/SFe5HccYqGI/AAAAAAAAAGI/m7I2yK5r5_c/s200/icone.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5212838631250110562" /></a>
5. Vous êtes toujours là? Donc, cliquez sur Mise en page, puis Modifier le code HTML. Ensuite, avant la balise </head>
Insérez la ligne suivante:
<link href="url vers l'icone.png" type="image/png" rel="icon" />
Dans cette ligne, remplacez "url vers l'icône.png" par l'adresse de votre image, celle que vous avez copiée à l'étape 4 précédente. C'est l'adresse du chemin qui mène à votre image.
Comme j'ai mis une extension .jpg, mon code est le suivant
<link href="http://bp2.blogger.com/_osNeObZ1rx8/SFe5HccYqGI/AAAAAAAAAGI/m7I2yK5r5_c/s1600-h/icone.jpg" type="image/jpg" rel="icon" />
Voyez sur le modèle ci dessous juste avant </head>
7. Maintenant Valider et chargez la page de votre site pour voir si l'icône apparaît dans la barre d'adresse.
10 juin 2008
Recherche dans les blogs de cuisine, moteur de recherche spécialisé
Parce ce que quand on fait une recherche de recette de poireaux sur google, on a pas envie de tomber sur la "culture du poireaux" ou sur "Hercule", que l'on veut gagner du temps, voici cet outil génial proposé par une équipe encore plus géniale! Je laisse la parole à Gaëlle, une des mères fondatrices de ce projets...
"En
effet, un moteur de recherche personnalisé a été mis en place pour
effectuer des recherches uniquement sur les blogs de cuisine
francophones. A l'origine, Elise du blog Simply Recipes et le moteur de recherche Food Blog Search,
qui effectue des recherches sur les blogs de cuisine anglophones. J'ai
vraiment apprécié cette initiative, malheureusement réservée à ceux qui
lisent l'anglais couramment. Après un certain nombre d'allers-retours
par mail, je suis heureuse de vous annoncer la naissance du petit frère
francophone de Food Blog Search: Recherche dans les Blogs de Cuisine, dont l'interface est entièrement en français et qui effectue des recherches sur les blogs de cuisine francophones.
Envie
d'une tarte au citron meringuée, d'une recette au tofu ou d'une quiche
aux poireaux? Vous pouvez dès maintenant effectuer des recherches à
l'adresse www.foodblogsearch.com/fr.
Si
vous êtes auteur d'un blog de cuisine et que vous souhaitez que
celui-ci soit inclus dans la liste des blogs pris en compte par le
moteur Recherche dans les Blogs de Cuisine, je vous demande de
commencer par vérifier s'il n'est pas déjà inclus (à l'heure où
j'écris, 63 blogs sont référencés): pour savoir si votre blog est
inclus, tapez son nom ou son URL dans la barre de recherche; si votre
blog apparaît dans les résultats de recherche, c'est qu'il est inclus,
sinon envoyez-moi un mail à (fr-admin@foodblogsearch.com) pour que je
rajoute votre blog à la liste. Si je ne vous ai pas répondu au bout de
deux semaines, c'est sans doute que votre message n'a pas franchi mon
anti-spam: dans ce cas, renvoyez-moi un message avec dans le sujet du
mail les mots "recherche, blog, cuisine".
Les règles pour qu'un blog soit référencé dans Recherche dans les Blogs de Cuisine sont les suivantes:
- le blog doit être écrit en français
- il doit donner des recettes de cuisine
- les recettes doivent être accompagnées de leur histoire ou de commentaires
- le blog doit présenter de belles photos ou illustrations
- les techniques culinaires utilisées doivent être simples
- le site doit être présenté sous forme de blog, avec commentaires des lecteurs
- le blog doit être âgé d'au moins un mois, avec au moins 10 recettes
A bientôt sur Recherche dans les Blogs de Cuisine!"
09 juin 2008
Question du jour! Supprimer le permalien #
"Bonjour, En mode avancé, j'aimerais supprimer le # du permalien ou le permalien en entier. Quel code faut il utiliser? Car sur mon joli blog le # fait un peu tâche...SNIFF Merci d'avance pour ce précieux renseignement!! "
Pour le supprimer, il faut retire cette partie du code dans la partie texte en page d'accueil
Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]
Dans la pratique ça donne
<!-- ZONE TEXTE-->
<div id="content"><div class="blogbody">
<Blogger> <BlogDateHeader>
<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>
@ bientôt
un relooking culinaire
Avant
Après
08 juin 2008
Supprimer les bordures
"Bonjour
J'aimerai savoir comment supprimer les traits qu'il y a sur mon blog je ne sais pas comment cela ce fait !!"
Réponse
Dans la feuille de style, 2 possibilités : Sur chaque blocs concernés
- soit vous mettez "none" à la place de solid (ou dotted) sur la ligne border concernée
- soit vous mettez "0 px" au lieu de 1 (ou 2) sur la "border-width"
Exemple :
#content {
float: left;
width: 700px;
background-color: #FFFFFF;
border-top-style: solid; <----------- soit je mets "none" à la place de solid
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px; <-------------- soit je mets 0 px au lieu de 1
border-color: #;
overflow: hidden;
Bonne journée !
La question du jour : agrandir l'espace texte!
"Bonjour
J'aimerai savoir comment il fallait que je face pour agrandir la zone de texte du milieu ( ou colonne du milieu )"
La réponse de votre tutrice préférée ;-)
Dans la feuille de style :
#container {
width: 1100px; <------------ ici c'est la largeur total de votre blog : colonnes + texte
padding: 0px;
background-color: #FFFFFF;
background: url
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-right: auto;
margin-left: auto;
}
#content {
float: left;
width: 700px; <------------ ici c'est la largeur de la zone texte de votre blog
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
<!--
a : { text-decoration : none }
//-->;
}
#rightbar {
float: left;
width: 200px; <------------ ici c'est la largeur de la colonne de droite
height:1300px;
background-color: #C8E476;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #ffffff;
overflow: hidden;
}
#leftbar {
float: left;
width: 200px; <------------ ici c'est la largeur de la colonne de gauche
height:1300px;
background-color: #B6D2EA;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #FFFFFF;
overflow: hidden;
Notez que 200 px (rightbar col de droite) + 200 px (leftbar col de gauche) + 700 px (content) = 1100px pour le container.
Si vous avez des bordures d'une largeur de 1px il faut aussi les ajouter à la largeur totale