Attention !
Ce blog a déménagé et n'est plus mis à jour. Rendez vous sur le nouveau blog :
http://www.blogtuto.org/
mardi 29 juillet
Un passage en mode avancé
Silo, star dans sa blogo, avait envie de faire un peu de rangement sur son blog. Elle voulait un menu déroulant sous la bannière, déplacer ses albums, mais surtout rester dans ses marques, ses teintes et la sobriété de son blog. Donc pas de relooking à proprement parlé, mais une réorganisation pour un blog plus fonctionnel.
AVANT
APRES
Cliquez sur l'image pour aller voir de près ce menu déroulant sous la bannière et ce joli blog!
Merci à elle de m'avoir accordé sa confiance.
Tags : mode avancé, Relooking
vendredi 25 juillet
Le logo des parrains BlogTuto enfin disponible!
Je vous en ai parlé hier, Damouredo a foncé et le voici, le voilà, dans sa version bling bling ou dans sa version sobre.
<p ><a href="http://blogtuto.canalblog.com/"><img width="120" height="90" border="0" src="http://storage.canalblog.com/92/21/302457/28253249_p.gif" alt="Dor_animationrond02" /></a></p>
<p ><a href="http://blogtuto.canalblog.com/"><strong><img width="120" height="90" border="0" alt="Dor_04B" src="http://storage.canalblog.com/22/85/302457/28252985_p.gif" /></a></p>
J'invite
Clochette
cocktail
Cojocano
Damouredo
flow
Karipuce
Makanai
Nanounette
P'tit bout d'
Silo
Subjectif
Usako
Virginie
Si elles le souhaitent à le mettre sur leur blog.
Encore merci à elles!
Tags : logo, marraine, parrain
jeudi 24 juillet
Créer une troisième colonne
Rajouter une colonne de plus à son script en mode avancé!
Parce que vous êtes too much...
Parce que 2 c'est pas assez que 3 c'est mieux...
Voici en image ce que ça donne chez Damouredo...
L'installation se passe en deux temps
1- dans la feuille de style
Si c'est une colonne à droite appelez la rightbar si elle va aller à gauche ce sera une leftbar.
Pour la distinguer donnez lui le chiffre 1.
Ce qui donnera lefbar1 ou rightbar1
Ensuite vous mettez les caractéristiques d'une colonne de cette façon :
#leftbar1 {
float: left;
width: 200px; <---- largeur de la colonne
height: 5000px; <---- longueur de la colonne
background-color: #FFFFFF;
border-top-style: none; <---- si vous voulez une bordure
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px; <---- l'épaisseur de la bordure
border-color: #669900; <--- couleur du fond de la colonne
overflow: hidden;
}
Copier votre code à la suite de vos colonnes ou si vous avez peur de vous tromper tout en bas
! attention aux }
Ceci étant fait, validez.
2 - dans le script sur toutes les pages (accueil, page des archives, index des archives, message, auteur)
ajoutez le script suivant par exemple ma colonne va être à droite de ma colonne de gauche :
<div id="leftbar1"> <div class="navlinks">
</div></div>
cliquez sur l'image pour voir l'exemple
<div id="leftbar1"> <div class="navlinks">
mettez ici les blocs que vous souhaitez insérer dans cette nouvelle colonne
</div></div>
Ce tuto vous est offert par cocktail. Merci à elle!
Tags : colonne, mode avancé
mercredi 23 juillet
Tags de canalblog et complément d'info pour l'installer
Si vous avez saisi un nouveau message vous avez remarqué ou pas que vous pouviez (enfin!) disposer de la fonction tag dans vos messages. Mais si juste en dessous de la zone de saisie d'un message...
Alors soit vous êtes en mode normal et vous allez dans "apparence", puis "blocs" et tout en bas vous ajouter le bloc concerné...
Soit vous êtes en mode avancé et dans ce cas
1- il vous faut ajouter dans vos pages le code suivant :
<!-- tags-->
<div class="title">Tags</div>
<ul class="tagcloud">
<CBTags>
<li><a href="<$BlogTagURL$>" style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag"><$BlogTagName$></a></li>
</CBTags>
</ul>
en image voilà ce que ça donne
Ma chère Damouredo s'est exprimé : "ciel mais c'est quoi ce truc tout en longueur ça ne ressemble pas à un nuage". Voici la suite du tuto (avec mes remerciements à Webbricolo)
Pour que cela ressemble à une nuage vous devez ajouter ceci
2 - dans la feuille de style (mode avancé), tout en bas :
ul.tagcloud {
text-align: left;
margin-top: 10px;
}
ul.tagcloud li {
line-height: 200%;
display: inline;
margin-right: 0.5em;
}
ce qui va conduire à ce résultat ( c'est mieux non?)
3 - Si vous voulez avoir la liste des tags d'un message sous le dit message, cherchez cette ligne dans la parie texte :
<div class="itemfooter"> Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$>
et avant cette ajoutez cette ligne dans la page d'accueil, la page d'une message, page de l'index des archives
<BlogItemTags><br/>Tags : <$BlogItemTagsList$></BlogItemTags>
Comme sur l'image ci dessous
ce qui en image va donner :
4 - Pour gérer les tags et compléter vos anciens billets
allez dans contenu et la présentation est désormais la suivante :
Désormais vous pouvez
- afficher 200 messages sur une seule page,
- vous pouvez ajouter les tags à la chaine ou les retirer
- gérer l'affichage des tags par recherche avec le filtre
Les - :
- à chaque tag ajouté si vous êtes en page 2 vous retournez à la page 1
- c'est du coup un peu longuet...
- sur les pages autres que les archives la liste des tags est limités aux 30 plus importants du blog, en revanche ils sont tous affichés dans l'index des archives, à savoir quand vous cliquez sur "toutes les archives"
Le tuto est désormais complet!
***
Remerciez Clochette et Usako qui par leurs mécénats vous offre ce billet ;-)
Tags : tag
lundi 21 juillet
On arrête pas le progrès...
Avez vous remarquez? Ce petit détail dans ma bannière... résultat du travail de Damouredo qui chaque jour est meilleure que le précédent?
ça fait une bout de temps que je la bassine pour qu'elle fasse de petits effets... Petits parce que trop d'effets tuent l'effet! Mais là, mon petit girophare qui clignote... Avouez que c'est trop trop mimi, non?
Bravo ma Do!
Et vous qui trouvez cela hype, courez chez ban@nière split et suppliez là de vous faire votre prochaine bannière!
A noter sur son autre blog, l'effet papillon....
Tags : bannière, effet
dimanche 20 juillet
Bonnes adresses
Mise à jour des bonnes adresses
ça se passe à cette adresse : http://wigflip.com/
- Pour générer des images à la Warhol http://bighugelabs.com/flickr/warholizer.php
- Pour générer des images puzzle http://bighugelabs.com/flickr/jigsaw.php
Vous trouverez pas mal d'autres joujou, je vous laisse fouiner... L'adresse du site est la suivante : http://bighugelabs.com/flickr/
- Portail de générateur du web http://www.generateur35.com
Tags : adresses
samedi 19 juillet
Utiliser les flux rss de vos blogs préférés
Ce billet fait suite à celui intitulé : Flux RSS kézako?
Principaux agrégateurs RSS
- RSS Owl est un lecteur RSS multi-plateformes (Windows, Linux, Mac et Solaris) en Java. Il permet notamment l'import et l'export au format OPML :
- RSS Reader est un lecteur pour Windows, nécessitant l'installation du Framework .NET :
- FeedReader est un lecteur RSS supportant les formats RSS et Atom :
- Le client de messagerie Mozilla Thunderbird permet nativement d'exploiter les fils RSS et de les afficher comme du courrier :
- Le navigateur Mozilla Firefox permet de s'abonner à un fil RSS et d'afficher les actualités via ses menus déroulants :
- Il existe également des extensions pour Firefox (lecteurs RSS améliorés):
- Le navigateur Opera supporte également les flux RSS:
Agrégateurs RSS online
Il est possible d'opter pour une solution "online" pour consulter ses flux RSS. L'avantage est surtout si vous utilisez ce lecteur depuis plusieurs ordis. Ainsi, les articles lus sur votre lieu de travail par exemple apparaitront déjà lus lorsque vous les consulterez également le week-end.
- Plusieurs sites permettant de composer sa page d'accueil servent d'agrégateurs RSS. On peut entre autres citer netvibes, Google, Eskobo Beta, Goowy,Windows Live
- Gregarius est un agrégateur en ligne que vous installez sur votre site perso. Un des avantages est que vous pouvez en plus le partager avec d'autres internautes.
- Newser est un agrégateur en ligne, faisant également office d'annuaire de fils RSS :
Source : http://www.commentcamarche.net
***
Je vous propose de regarder su netvibes comment créer sa page de flux.
Après vous vous soyez connectés, vous devez vous inscrire avec adresse mail et mot de passe.
Vous pouvez en passant sur les onglets affichés par défaut voir apparaitre en haut de chaque widget la possibilité de supprimer ou pas.
Pour ajouter un flux sur votre page : en cliquant sur "ajouter un flux" une case à remplir apparait (en haut dans la partie noire sur l'exemple ci dessous)
Ajouter l'adresse de votre chouchou :
Une petite icone apparait en dessous, cliquez sur "Feed"
Une pop up va s'ouvrir comme ci dessous, cliquez sur "ajouter à ma page"
Et désormais dans le bas de votre page s'affiche le flux de votre blog chouchou. Faites de même avec tous ceux dont vous ne voulez rien rater!
Je sais pas vous, mais moi j'ai une page à mettre à jour ;-)
Tags : Flux, RSS
Flux RSS kézako?
ça fait un bout de temps que cette question revient sans cesse :
"bonjour, voila, on me demande parfois le Flux RSS de mon blog, et je ne sais pas du tout à quoi ca correspond ??? est-ce qu'on en a un automatiquement, est-ce qu'on doit le créer ??? merci de m'aide"
Le standard RSS représente un moyen simple d'être tenu informé des nouveaux contenus d'un site web, sans avoir à le consulter.
Le format « RSS » (traduisez « Really Simple Syndication ») permet ainsi de décrire de façon synthétique le contenu d'un site web, dans un fichier format XML, afin de permettre son exploitation par des tiers. Le fichier RSS, appelé également flux RSS, canal RSS ou fil RSS, contenant les informations à diffuser, est maintenu à jour afin de constamment contenir les dernières informations à publier.
Basiquement, un fil RSS est un fichier contenant le titre de l'information, une courte description et un lien vers une page décrivant plus en détail l'information. Cela permet à un site web de diffuser largement ses actualités tout en récupérant un grand nombre de visiteurs grâce au lien hypertexte permettant au lecteur de lire la suite de l'actualité en ligne.
Les sites proposant un ou plusieurs fils d'actualités au format RSS arborent parfois un des logos suivants :
Les blogs proposent ainsi généralement des outils natifs
permettant de créer ou d'utiliser des fils RSS.
Source : http://www.commentcamarche.net
Pour savoir si votre blog présente l'option Flux Rss à vos lecteurs, vous devez voir ces lignes dans vos colonnes :
Si ce n'est pas le cas, si vous êtes en mode normal il vous suffit d'aller dans "apparence", puis "bloc", et d'ajouter "Syndication du blog (RSS)".
Si vous êtes en mode avancé, c'est ce bloc qu'il vous faudra ajouter dans vos colonnes :
<!-- Flux RSS-->
<BlogSiteFeed>
<div
class="item"><a href="<$BlogSiteFeedURL$>" title="S'abonner
à ce blog (messages)">Flux RSS des messages</a></div>
<div
class="item"><a href="<$BlogCommentsFeedURL$>"
title="S'abonner à ce blog (commentaires)">Flux RSS des
commentaires</a></div>
</BlogSiteFeed>
Maintenant que vous savez ce qu'est le flux rss et que vous l'avez installé, dans un prochain billet je vais vous expliquer comment utiliser les plateformes qui gèrent vos flux.
Tags : Flux, RSS
vendredi 18 juillet
Comparatif des plateformes de blog
Cela m'a semblé pertinent d'autant plus que dans la plupart des cas toutes les infos sont encore valables.
Je vous invite à y jeter un oeil : bloger, overblog, canalblog, wordpress, dotclear... Pour se faire une idée de tout le monde par ceux qui ont testé...
http://www.clubic.com/article-67515-1-comparatif-plateformes-blog-gratuites.html
Tags : bloginfo, plateforme
jeudi 10 juillet
Un relooking tout doux!
Nanounette est une copine! Alors on a été heureuse qu'elle nous confie le relooking de son blog!
Beaucoup de douceur pour ce blog. Une tendance un peu déco pour ce blog qui parle de la vie, de cuisine, de voyages... Un relooking et un passage en mode avancé pour bien aménager l'intérieur de ce blog.
AVANT
APRES
Un blog plus aéré, mieux organisé, une petite colonne pour les nombreux albums, des boutons pour illustrer les catégories, un menu sous la bannière, une bannière toute neuve...
Nanounette, bienvenu chez toi!
Pour aller chez Nanounette c'est par ici!
Tags : Relooking