03 mai 2008 - Mettre une photo grand format
Par défaut, Canalblog redimensionne les photos à la taille maxi de 800 px (hauteur ou largeur). lorsque qu'une photo est plus grande ça pose quelques problèmes.
Comment faire?
dans un premier temps insérer la photo comme si c'était un fichier
ce qui donne la vue du nom du fichier IMG_0406 mais pas de l'image. Cependant elle est bien sauvegardée dans ses dimensions d'origines ;) donc le p'tit truc pour afficher la photo:
à ce stade il faut passer en mode HTML et modifier les balises - rappel le fichier s'appelle IMG_0406
09 mars 2008 - Aller, insérer une horloge gratuite?
pas trop compliquer, allez sur cette page,
choisissez une horloge, copier le code que j'y mets, et celui là vous pouvez le mettre en toute tranquilité dans le nom d'un lien d'ami (l'adresse, vous pouvez mettre celui de votre blog)
Garanti sans pub :)
16 février 2008 - comment placer une horloge ou autre dans ma colonne en mode normale
Aller, il y avait longtemps que je n'avais fait un truc pour aider les bloggueurs qui sont en non "avancé": Positionner mon compteur, horloge et autres... trucs dans ma colonne de gauche, et non dans celle centrale...
Alors, déjà deux restrictions:
- pour des raisons techniques indépendantes de ma volonté mais de la volonté de l'HTML, les codes seront toujours placés dans la colonne de gauche, inutile donc de me demander de les mettre à droite, ce n'est pas réalisable.
- Il faut avoir un message d'accueil, car en fait vos codes, à l'origine, seront placés dans un message (donc autant qu'il soient dans un message d'accueil)
Voilà, sinon, c'est très facile; il n'y a qu'à suivre....
Déjà on cherche un code pour avoir, je prends juste l'exemple d'une horloge (non, ne me demandez pas d'adresses, je ne fais pas de pub)
Ce code, je le place donc dans un message d'accueil parce qu'il est trop long pour tenir dans les liens
Pour l'occase je vais en créer 
et 
Je passe en code HTML en appuyant sur le bouton <>
Et y colle mon code
Devant et derrière j'y rajoute ce qui va permettre de l'identifier et de l'afficher
Devant
On peut le publier et regarder le résultat,
pour ceux qui ont déjà ces compteurs, horloge, suffit juste de rajouter au début des scripts l'identifiant
<h4 id="codecompteur">en dessous, on va ajouter ma petite contribution, 
Le publier, et voilà, c'est fini, s'il n'y a pas d'erreur d'identifiant, les codes se placent dans la colonne de gauche en entête.
(si vous êtes à la recherche d'une horloge gratuite et sans aucune publicité cachée go là )
23 décembre 2007 - Ma bannière et mon titre de blog,d'abord!!!
Restons dans le mode normal, pourquoi passer en avancé, là où on peut être en normal
J'ai un blog, que je créai en 3 colonnes, je fais ma mise en page
Et puis... un jour, je change, je mets une bannière à la place du titre du blog (bah oui, comme tout le monde hein)
Mais, quand je regarde, je ne vois plus mes titre et description... (mince)
tiens!! et puis elle est trop courte ma bannière!!!
alors je viens ici, parce que je le vau bien, et je découvre que dans mes liens d'amis (gare à tes fesses alérion si ça plante tout) je dois y mettre ce script:
ht est paramétrable selon l'hauteur à laquelle on veut mettre le titre sur la bannière.
Je regarde le résultat, adapte ht en éditant mon lien du script, et voilà, plus qu'à refaire ma bannière et en mettre une plus longue, moi.
je rajuste la valeur de ht=3 pour mieux le situer...
et voilà...
22 décembre 2007 - Le Calendrier en bannière
Changer de destination du calendrier, en mode normal, c'est possible
Voilà comment: Vous allez mettre un script dans les "liens d'amis"!
- Oui, c'est moi qui l'ai fait, et j'ai bien entendu pris en compte sa longueur pour ne pas planter bêtement notre blog...
Donc voilà un blog standard, en mode normal, la seule vérification importante, est de situer le bloc de lien en dessous du bloc du calendrier, sinon ça ne fonctionne pas. (En pratique il faut que le calendrier soit affiché sur le blog pour que je puisse le traiter et le changer de destination)
Ceci étant vérifié (et modifié le cas échéant) on va dans les liens d'amis (si si c'est possible puisque je le marque)
On saisie ce script:
a) pour ceux qui ont une bannière: (ht est pour préciser la hauteur de la bannière-55px)
b) pour ceux qui n'ont pas de bannière:
à la place du titre et on mets # à la place du lien
on valide et on regarde le résultat :)
04 septembre 2007 - Le mode avancé et ses avantages (inconvénients?).
Ce qui différencie fondamentalement le mode avancé du mode standard c'est l'automatisme.
En mode standard, tout ce qui "touche" aux styles de couleurs, bordures, bannière, les tailles de texte ou la présentation générale (une ou deux colonnes, colonne à gauche à droite...) est fait automatiquement par des cases que l'on remplit (ou pas). Le programme interne de canalblog s'occupe de lui même de mettre à jour les pages concernées après validation.
En mode Avancé, il n'y a pas de petit programme qui vous donne une sélection de choix, et il n'y a toujours pas de petit programme qui met à jour les pages concernées. Tout ça doit être fait manuellement, directement sur les pages et/ou la feuille de style générale. Et toute erreur peut pénaliser rudement la présentation du blog.
Ceci dit, les possibilités de style sont infinis car non limitées par un programme, d'où l'avantage sérieux du mode avancé.
Mais, pour "bidouiller" il faut, je pense, comprendre un peu comment ça fonctionne.
Lorsqu'on passe en mode avancé, on se retrouve non seulement dans la possibilité de modifier directement la feuille de style générale (couleur, images de fond, caractères etc) mais également le code Html des pages type. Ainsi, lorsque tout est modifié, il n'est plus possible de revenir en arrière et dire au petit programme de reprendre tout en main (sinon il ne s'y retrouverait pas). Donc en toute première action, si vous décidez de passer en mode avancé, est de créer un deuxième modèle standard copie exacte de celui en cours. Ainsi, si vous "cassez" le blog, vous pouvez toujours revenir sur un modèle standard.
Comment fonctionne le blog
Lorsque on va sur une adresse de Cblog, on arrive d'office sur une première page, nommée "page d'accueil" et e cette page on peut accéder à d'autres pages,
généralement pour la suite des messages les pages nommées "page d'archive",
pour voir et laisser un commentaire une page nommée "page de message" (oui je sais, il manque un sens du suivi de raisonnement mais bon, c'est comme ça),
ces trois pages sont les plus utilisées et les plus visitées. Viennent ensuite d'autres pages, pour l'indexe des archives, les album photos et la page du profile.
C'est dans ces pages que sont disposés les colonnes à afficher, les blocs (savez, les blocs des dix derniers messages, derniers commentaires, liens catégories...) et les éventuels petits gadgets que l'on trouve un peu partout et qui créaient de drôles de soucis à certains. Ces blocs sont tous constitués de codes types, propres à canalblog, et expliqués dans les aides de CB donc je ne les exposerai pas ici.
Ces codes sont remplacés par notre contenu (textes, catégories, liens...) par le moteur interne de CB avant l'affichage sur l'explorateur.
Les styles eux, (fond, couleur, type de caractère, grosseur, action des liens et j'en passe) sont définis dans une feuille nommée "Feuille de style générale".
D'une façon générale, chaque "chose" affichée dans une page est encadrée ont besoin de balises Html pour déterminer la nature même de l'affichage que je nomme moi perso pour la compréhension "boite",
ainsi on a une boite pour le texte, (<p></p>)
une boite pour l'image, (<img></img>)
une boite pour les titres, (<h1></h1>)
une boite pour les liens, (<a></a>)
une boite pour rassembler ces boites (<div></div>)
et encore une boite pour contenir tous les groupes de boites. (<body></body>)
Ainsi la boite des textes sera pour ainsi dire toujours "p" et le texte sera compris entre chaque balise commençant par <p> et finissant pour dire à l'explorateur que cette boite là est finie par </p> et le comment sera affiché le style de "p" est défini dans la "feuille de style générale" le font, la taille, le fond, la couleur, l'alignement...
C'est pas simple hein... Et... info quand même, ces balise, codes et définitions sont en anglais (rien que pour faciliter les choses, sisi) bon, vous voulez continuer quand même? Bon aller, je vais essayer d'être le plus "pédagogue" qu'il m'est possible de l'être.
Mais on change de blog on va là
30 août 2007 - Les émails, ou comment s'en passer
orsque les amis ou la famille, qui connaissent ou pas, écrivent un petit commentaire, certain savent qu'il faut mettre une adresse mail (même bidon) tandis que d'autres non.
Je vois beaucoup la question comment faire pour qu'on ait pas à écrire le mail: et bien c'est tout simple: En Mode Avancé Uniquement...
déjà il faut éditer la page des messages et repérer la ligne: <input id="authorEmail" name="authorEmail" value="" maxlength="64" onchange="handleChange(this)" />
et entrer une adresse par défaut à value="" genre courriel@defaut.fr
ce qui donne: <input id="authorEmail" name="authorEmail" value=" courriel@defaut.fr " maxlength="64" onchange="handleChange(this)" />
bien sûr ne pas oublier de valider
Personnellement je ne le préconise pas, car ça laisse libre cour à tous les excès et c'est pourquoi je ne m'en sers pas, donc si vous voulez laisser un message sur ce blog, et bien mettez-y une adresse mail, au moins si elle est bidon, ce n'est pas moi qui vous l'ai soufflée.
29 juillet 2007 - Un bouton à la place d'une "Catégories"
n préambule
J'ai essayé pas mal de choses, mais le plus important est de se souvenir que:
-1) Les Catégorie ne doivent comporter ni accent, ni espace
-2) Ne pas commencer par un chiffre... (dans les cas d'un ordre spécifique, si les catégories commencent par 01, 02 etc il faudra ajouter une lettre devant - genre C01, C02 etc)
dans le plupart des cas il suffit de renommer les catégories afin qu'elle corresponde plus à un objet Class
Ceci étant, tout est encore en mode avancé.
Donc la première des choses est d'avoir bien sûr des messages dans des catégories.
Pour la bonne forme et faciliter la compréhension de tous, j'ai créé un blog avec une colonne à gauche
j'y ai juste mis les blocs "Catégories" et "Liens"
et me suis dit que ce serait bien de mettre mon modèle en mode avancé
La dessus j'ai créé 3 messages et 3 catégories, il faut bien partir sur une bonne base
Comme je le disais en préambule les catégories ne doivent pas comporter d'accent, d'espace ou commencer par un chiffre. (Sinon la "Class" ne sera pas comprise)
Fort de nos trois messages, et de nos trois catégories, occupons donc de nos boutons :)
J'ai donc créé 3 boutons que j'ai chargés dans un post qui reste en mode brouillon
ainsi il n'est pas visible sur le blog et ça me permet de récupérer les adresses de stockage en appuyant sur le bouton <>
A partir de là, le plus gros a été effectué, il nous suffit de définir les class et modifier un peu l'html des pages.
Commençons par créer les Class dans la feuille de style générale, Une Class par Catégorie , ajoutant un point devant le nom de la catégorie là nous en avons trois
ensuite, repérons le bloc qui affiche les catégories dans la page d'accueil
on repère précisément la balise <$BlogCategoryName$>
et on va l'insérer dans <div class="<$BlogCategoryName$>"></div>
on supprime les balises <ul> et </ul> les <li> et </li> et on recopie tout notre bloc aunsi modifié
<CBCategories> <a href="<$BlogCategoryURL$>"><div class="<$BlogCategoryName$>"></div></a> </CBCategories>
sur toutes les pages
et on regarde le résultat
22 juin 2007 - Modifier le Calendrier
lors le calendrier est paramétrable en CSS.
on peut modifier sa présentation, changer les jours, afficher la date du jour et y mettre un fond, tout cela paramétrable directement par CSS, et cerise sur le gâteau, ajouter des images en entête, qui se changent toutes les 7 secondes.
Pour les besoins de l'exemple, j'ai donc créé un fond pour le calendrier (200*300 pixels) et deux images (190*110Pixels).
|
|
Le code: -il se décompose en trois parties:
Une première partie à mettre dans le <head> </head>
Une autre partie après le bloc d'affichage du calendrier
Et enfin une dernière grosse partie dans le CSS
Et commençons, par le CSS, car c'est en fait le plus important
nous avons:
#cadrecalendar qui définit la taille de l'encadrement du calendrier et le fond (N'en pas tenir compte si on ne veut pas de fond)
#imagecalendrier qui permet d'afficher les image en entête du calendrier (N'en pas tenir compte si on ne veut pas d'image)
.jourdicalendar, .jourlucalendar... .joursacalendar qui définissent les 7 jours. (N'en pas tenir compte si on ne veut pas de jours personalisés)
.circlecalendar qui permet de diférencier le jour courant sur le calendrier. (N'en pas tenir compte si on ne veut pas différencier le jour présent )
donc ce code est à recopier dans la feuille de style général, (et si on veut rester cohérent, avant ou après le #calendar, c'est plus facile de tout regrouper)
ensuite le CSS pour le calendrier étant défini...
passons à la déclaration des images (ici la variable imageducalendar) (Ne pas tenir compte si on ne veut pas d'image)
et chargeons le fichier javascript ----.js qui s'occupe de tout mettre en forme.
-Tout cela (le script en entier) est à mettre dans les pages avant </head>
Nota: le script et son fichier *****.js est le seul qui doit toujours être présent dans <head></head>
Maintenant, la partie qui change tout: à insérer juste après les commandes de bloc du calendrier
<CBCalendar><$BlogCalendar$></CBCalendar>
Sur la page d'accueil
Sur les autres pages
afficher_jours("calendar","v") ou afficher_mois("calendar","p") permettent de changer le calendrier et accepte des arguments:
(seul "calendar" n'est pas à modifier)
"" laisse en l'état (équivaut à ne rien faire)
"v" n'affiche que le style (permet de n'afficher que des images définies dans les styles .jourdicalendar...)
"p" affiche les jour (Dim Lun Mar Mer Jeu Ven Sam) avec un fond dans le style défini
"u" Affiche l'initiale (D L M m J V S D) avec un fond dans le style défini.
AfficherImagesCalendar() affiche les images définies dans la variable "imageducalendar" selon un cycle de 7 secondes
(Evidemment, ne pas mettre les commandes des choses que l'on ne veut pas)
donc....
en partant d'un calendrier standard comme
celui-ci en ajoutant dans la feuille de style le code
dans l'entête
et le code javaScript sous les blocs de calendrier
on se retrouve (magique) avec un calendar dans ce genre..
puis
voili, voilà, j'espère qu'il n'est pas trop compliqué.
NB: du 06/09/2007, mon moteur remplace également en date du jour tous les 1..9 des dizaines également... pb que je vais tâcher de régler. dès que j'en ai le temps...