16 mai 2006
POURQUOI PASSER EN MODE AVANCE ET COMMENT ?
Allez, c’est décidé, on passe en mode avancé,
et on a même pas peur !! Eh wai !!
Mais
pourquoi au fait ?? A quoi que ça sert le mode avancé ???? Et pis,
c’est quoi d’abord, la différence entre mode normal et mode avancé ????
Ben
c’est tout simple. Entre le mode normal et le mode avancé, pas
grand-chose ne va changer, hormis tout ce qui concerne les
modifications de l’apparence de votre blog.
Je m’essssplique !
En mode normal,
pour réaliser l’aspect visuel de votre blog, tout est formaté pour
vous…et vous n’avez accès qu’à des éléments prédéterminés pour vous :
pour le style, l’apparence générale, la disposition des blocs etc etc….
En mode avancé,
c’est vous qui décidez !!! Vous mettez ce que vous voulez dans vos
colonnes, avant vos messages, dans vos messages, ou encore en en t-ete
de votre blog, et ce…t comme vous voulez ! Vous pouvez insérer un
compteur de visites, la météo, un moteur de recherche, de la musique,
une radio (ça je sais pas encore faire mais ça va venir !), une
horloge, un post it express…etc etc….
Vous pouvez également mettre un fond d’écran qui vous ressemble (ou pas, c’est comme vous voulez !!)
Bref,
on est beaucoup plus libre en mode avancé, et beaucoup plus à même de
réaliser un blog en adéquation avec ce qu’on est…
Pour vous rassurer :
Pas
besoin d’être un pro du Java ou du HTML pour passer en mode avancé.
Vous verrez que pour insérer un compteur, un post it, une horloge…les
codes sont en général écrits pour vous ! Suffit de les copier et de les
coller au bon emplacement !
Vous avez un peu peur de faire la manip irrémédiable ? Faites tout d’abord une sauvegarde du contenu de votre blog actuel :
Comment ?
Et bien vous allez créer un nouveau modèle de votre blog :
Vous allez dans Apparence.
Vous cliquez sur « nouveau modèle »
Vous lui donnez un nom, exemple « sauvegarde »
Vous cochez une apparence générale (nombre de colonnes) et un thème (on s’en fout du thème en fait), et vous validez.
En image ça donne ça:
Cette
sauvegarde va garder tout le contenu de votre blog actuel : les
messages, les commentaires, les liens, les fichiers, les photos, les
albums etc etc.
Par contre, vous ne retrouverez plus votre
bannière si vous en avez une, ni la configuration de votre blog actuel,
donc exit le joli bleu, le joli rose que vous aviez mis enplace….mais
c’est pas grave, on garde le plus important ! Après, le relooking, c’est vite fait ! Vous verrez !
Voilà, maintenant pour passer votre blog actuel en mode avancé : (je suis sûre que vous tremblez plus à présent, hin?!).
vous
allez sélectionner votre modèle actuel de votre blog, vous cliquez sur
Paramètres, et vous cochez la case convertir ce modèle en type avancé
(attention, opération irréversible).
En image, ça donne ça :
Et voilà le travail ! 
Maintenant,
si vous voulez ajouter un nouveau post à votre blog, vous faites comme
d’habitude ! Message, nouveau message, etc etc, ça vous savez faire,
vous le faites tous les jours… Promenez vous dans les coulisses de
votre blog, histoire de découvrir un peu tout ce qui n’a pas changé !!!
Pour le reste…attendez le tuto n°3 !
17 mai 2006
A QUOI CA RESSEMBLE, LE MODE AVANCE ?
Pour mettre à jour votre blog, pas grand-chose ne va changer.
Pour poster un nouveau message, rien ne change :
Au niveau du contenu, rien ne change, c’est tout pareil :
A savoir, pour tout ce qui concerne vos commentaires, vos rétroliens, liens d’amis et albums photos, tout marche comme en mode normal.
Essayez si vous me croyez pas !
Ici non plus, rien ne change
Et…Ici non plus, rien ne change
Par contre, là où il y a sacrément du changement, c’est dans le second onglet, celui appelé Apparence.
Regardez voir :
Avant, 4 sous parties vous permettaient de modifier votre blog :
- paramètres
- style
- apparence générale
- blocs
Et ces parties étaient préfigurées pour vous. Dans chacune des parties, il vous suffisait de choisir ce que vous vouliez.
Comme cela :
A présent, c’est différent. Il n’y a plus de choix possible. Car TOUT est possible !
Mais pour ce faire, il faut l’écrire…
Quand on clique sur «éditer les fichiers de ce modèle », on rentre dans la rubrique :
S’ouvre cette nouvelle fenêtre :
Non non, ne partez pas en courant !!!! Pas d’affolement ! Ca a l’air compliqué comme ça, mais c’est juste fait pour vous impressionner !!
Observons cette nouvelle page.
Où est on exactement ?? Tout simplement sur ce qui configure la page d’accueil de votre blog.
Regardez de plus près :
Vous avez possibilité de sélectionner tout plein d’autres choses :
…et donc de faire des modifications aussi bien au niveau de la page d’accueil, des archives, de l’index des archives, d’un message, du profil de l ‘auteur,…de la feuille de style générale.
Mais nous, on va pas s’amuser à triffouiller tout partout.
Nous, ce qui nous intéresse, c’est de pouvoir mettre un post-it, un compteur, une horloge, une bannière, du texte défilant, une image de fond, changer la taille des colonnes, la couleur des colonnes, du texte, etc etc…
Et ça, ça se fait dans la page d’accueil, ou au niveau de la feuille de style générale.
Et grâce à quoi ???
Grâce à ça :
Non, ce n’est pas du martien ! C’est du code html. Pas de panique, pas besoin d’être bilingue ! Nous, on va se contenter de choses simples ! Les codes pour toutes les choses qui nous intéressent existent déjà…il nous suffira de les copier et de les coller au on endroit.
Prochain tuto, on attaque pour de bon !
On commencera par se mettre une belle image de fond ? Qu’en pensez-vous ?!
01 juin 2006
MES COLONNES SONT DE DIFFERENTES LONGUEURS
Dans le cas de colonnes qui ne sont pas de la même longueur que celle du milieu (qui s'arrêtent sous leur contenu, alors que celle du milieu allait jusqu'en bas...)
Il faut aller dans "feuille de style générale"
et dans les parties : #rightbar et #leftbar il faut rajouter en dessous de la ligne "width: 200px"
> une nouvelle ligne que l'on nomme : height : ...px; en définissant le nombre de pixels que l'on souhaite (4950 par exemple)
21 août 2006
UN JOLI FOND D'ECRAN
Un beau fond d'écran à la place de vos couleurs pourquoi pas!!
1) Allez sur l'onglet APPARENCES ensuite cliquer sur EDITER LES FICHIERS DE CE MODELE
2) Là apparait un menu déroulant cliquer sur page d'acceuil
ensuite
donc ça nous fait body à remplacer par <BODY BACKGROUND="
après vous avez http://www.mezimages.com/image/scarpeta/ballet.jpg.
Comment trouvez cette info ?
Tout simplement sur http://www.mezimages.com ( un site pour héberger vos photos)
Si celui-ci ne fonctionne pas, tu peux aussi aller ici :
http://www.servimg.com/upload.php
ou celui-ci
Voici la page d'accueil du site
ensuite 
voici les liens codes : vous selectionner image direct (http://......)
Donc vous avez votre lien http://mezimages......
donc au final celà nous fait < BODY BACKGROUND =" http://www.mezimages.com/image/ votre pseudo/le nom de l'image .jpg ">
Pour termier soit vous cliquez sur prévisualiser et donc vous voyez votre chef d'oeuvre ( attention vous perdez votre phrase BODY BACKGROUND= donc copier-là!!) et ensuite waouh que c'est beau eh bien cliquer sur valider.
J'espère avoir été un peu plus clair !!
Merci à Fleur de Vanille pour son super tuto !
13 octobre 2006
COMMENT INSERER VOTRE BANNIERE
Si vous avez été vigilant et prévoyant vous avez gardé un modèle de votre blog en mode normal. C'est sur ce modèle en mode normal que vous allez télécharger votre bannière dans l'onglet "style" en utilisant "parcourir". Une fois validée, vous avez une adresse "storage" qui s'affiche. C'est cette adresse que vous allez copier et insérer dans votre feuille style sur le mode avancé. C'est la meilleur façon pour avoir une bannière AJUSTEE! Et de cette façon aucun pb d'hébergement sur un autre site qui conditionnerai l'apparition de la bannière....
Voici la méthode pour l'insérez:
Précisions :
1 -dans la feuille de style repérer la section "#topbar-logo" et insérer
le lien vers l'image de la bannière de cette manière (rajout en gras) :
background: #CC0000 url("http://storage.canalblog.com/66/80/358100/22627863.jpg") no-repeat 0% 0%;
height: 150px; <==== mettre la valeur à 150 px alors qu'elle etait à 0 px
display: block; <==== changer "none" pour "block"
2 - établir le lien de la bannière vers l'url principale du blog dans la section "div. logolink" (juste en dessous) :
div .logolink a {
display: block;
text-decoration: none;
width: 100%;
height: 150px; <==== mettre la valeur à 150px au lieu de 0 px
3 - éliminer la bannière par défaut canalblog dans la section #topbar
#topbar {
background-color: #CC0000;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-width: 1px;
border-color: #99B2CC;
padding: 10px;
display: none; <==== changer "block" pour "none"
Merci à Florence pour ces précisions.
Vous validez et hop vous avez votre bannière. Si cela ne vous convient pas vous pouvez toujours effacer et en faire une autre. J'espère avoir été claire ?
09 janvier 2007
COMMENT INSERER UN PODCAST
Voilà un petit tuto qui en aidera plus d'une. Vous allez apprendre comment faire cela :
Voici donc une petite aide pour tous pour insérer un Dew Player sur vos blog.
Mais avant tous faut avoir accès a l’edition html de vos article.
----- facultatif ----
Attention : Vous devez installer votre propre Dew player car si je supprime mon compte, cela ne marchera pas.
Vous pouvez donc installer préalablement le dew player sur VOTRE compte.
Pour cela, faites un clic droit sur le lien suivante dewplayer puis "Enregistrer la cible sous..."
Connectez vous ensuite sur votre compte de votre blog puis allez pour écrire un nouveaux message. Envoyez votre dewplayer.swf comme un fichier (Faite comme expliquer au dessous avec votre fichier .mp3 pour le déroulement). Copier l'URL de votre dewplayer quelque part (notepad ou la bloc-note par exemple).
----- fin du facultatif ----
1- Pour insérer une musique sur votre blog, il faut que vous ayez ce fichier sur votre disque dur au format MP3.
2- Connectez vous sur votre compte blog puis cliquez sur nouveaux message
3- Cliquez sur l'onglet "Editer le HTML" (<>) puis dessous, sur la petite icône blanc (à gauche de <>)
4- Cliquez pour envoyer un fichier "Parcourir...", puis sélectionner le MP3 sur votre disque dur. Cliquez ensuite sur "Envoyer le fichier"
NB: Attention Canalblog ne prends en charge que des fichier en dessous de 1Mo. Si votre fichier est plus gros, hegerger le sur un hebergeur spécialisé.
NB: Si vous publiez votre note à ce stade, vos visiteurs pourront télécharger votre musique. Les étapes suivantes vous expliquent comme insérer un petit lecteur directement dans votre note.
5- Sur votre éditeur de note, vous avez maintenant du code qui ressemble à :
<a href="http://storage.canalblog.com/00/29/225409/8990206.mp3">Download sawyer.mp3</a>
Ce qui se trouve entre guillemets (ici en couleur bleu) est l'adresse à laquelle se trouve votre MP3.
6- Pour insérer un petit lecteur sur votre message, sélectionnez le code suivant :
<p>
<br /><object type="application/x-shockwave-flash" data="http://storage.canalblog.com/31/31/215118/8442028.swf?son=http://storage.canalblog.com/00/29/225409/8990206.mp3" width="200" height="20"><param name="movie" value="http://storage.canalblog.com/31/31/215118/8442028.swf?son=http://storage.canalblog.com/00/29/225409/8990206.mp3&bgcolor=#FFFFFF" /></object>
</p>
Puis cliquez sur le bouton droit de votre souris et sélectionnez "Copier". Retournez, dans votre éditeur de note puis cliquez dessous votre première ligne de code. Faites alors bouton droit et sélectionnez "Coller".
7- Sélectionnez ensuite l'adresse de votre mp3 puis bouton droit "Copier". Puis vous le mettez à la place de : http://storage.canalblog.com/00/29/225409/8990206.mp3 puis bouton droit > Copier. Votre adresse de votre mp3 et désormais à sa place.
N.B: Faite de même pour tous les textes en bleu.
8- Pour ceux qui ont installé le Dew player sur leur blog, replacez ce qui est en rouge par l'URL vers votre propre DewPlayer.
9- Publiez votre note.
10- Regardez votre blog, vous avez un magnifique lecteur dans votre note.
J'espère que cette petite formation vous aura aidé à faire votre premier podcast.
Laissez vos commentaires.
Merci
29 janvier 2007
Une bannière personnalisée sans ouvrir d'autre compte
... ou une autre façon de mettre une bannière personnalisée
Comment
changer une bannière pour le logo de son blog en conservant la même grandeur et
en n'ouvrant pas un compte d'album photo ailleurs.
J'ai
essayé de mettre une bannière en partant de mon site principal mais il ne
voulait pas charger l'image. :-(
J'ai aussi
essayé d'utiliser la gestion de fichier, dossier image en écrivant un message
brouillon en y mettant une image mais quand l'image est très grande,
Quand on fait son premier modèle on peut insérer une image à nous à la place de la bannière ou du titre ici
et à chaque fois qu’on insère une nouvelle bannière l’image va se retrouver ici
Donc, vous allez dans vos outils, ensuite gestions des fichiers, vous choisissez l’option image et vous cliquez sur l’image voulu pour avoir l’adresse url de votre image
maintenant si vous êtes comme moi et que vous aimez changer de bannière régulièrement, vous retournez dans le style d’un modèle quelconque ( je m’en suis créer un nommé brouillon justement) et vous retirer la bannière que vous venez d’ajouter et vous parcourez vos fichiers pour en mettre une autre. Vous VALIDEZ. Vous remontez, vous retirez l’image et vous remettez une autre bannière et vous VALIDEZ… ainsi de suite pour le nombre de bannière désirés . Moi j’en ai mis 4 pour le mois de janvier février jusqu’à la st-valentin par exemple. Ensuite, vous allez dans votre thème sur lequel est utilisez votre blog actuel.
vous allez chercher la section « topbar-logo » et
vous mettez l’URL de l’image que vous avez décidé d’utiliser. Pour la couleur
de background, vous pouvez ne pas en mettre du tout ou si jamais l’image ne
s’affiche pas, indiquez une couleur près de celle de votre bannière. Ce qu’il y a de bien dans cette méthode, en
voulant garder les images à la même place que votre blog, c’est que votre
bannière devrait toujours apparaître tandis que si l’hébergeur de vos photos ne
fonctionne pas, la bannière n’apparaîtra pas.
Changer l'aspect de son blog 1- les colonnes
Comment faire pour faire un blog plus large ou moins symétrique... Lorsqu'on s'inscrit avec canalblog, en mode ordinaire, il nous formate le blog à 800 pixel par défaut ( soit 600 et 200 si à deux colonnes). Mais voilà, si on veut toute la largeur de la page, ou si on veut une colonne plus petite que l'autre ( à 3 colonnes), bref, si on veut le personnaliser dans le mode avancé, que faire.
Premièrement, nous allons toujours dans notre feuille de style.
Ensuite, on repère les bons indicateurs.
Ici, body c'est la couleur de notre page, on peut aussi y insérer une image de fond, une tuile si vous préférer.
Ensuite on a container, ça c'est pour la page centrale de notre blog qui comprend tout ( le titre, les colonnes et l'espace texte). Par exemple, j'ai mis à 850 au lieu de 800 pour me laisser un peu plus de place pour écrire mon blog perso. Mais attention, vous remarquerez par la suite, que mes deux colonnes ne font pas un total de 850, il faut bien sûr tenir compte des bordures plus ou moins épaisses... Vous pouvez voir aussi que j'ai mis un "padding" ... c'est comme une bordure mais pas tout à fait. Ça ressemble plus à une marge mais extérieure.
Nous avons aussi content. Ça c'est la partie du texte. Si vous voulez changer des choses dans votre colonne centrale ou la grande partie texte, c'est là. Moi je l'ai mise plus large un peu pour un texte plus "imposant"
ET là, vous avez le right et le leftbar. Tout simplement la colonne de droite et de gauche. Dans mon cas, il n'y a qu'une colonne, l'autre se met automatiquement à 0 quand on fait la première mise en page dans le mode régulier.
Si vous mettez plus de pixel que le container, la colonne ira se placer sous l'autre. Il faut donc bien calculer avec les bordures. Si vous êtes pas certain, fait un prévisualiser et ajuster au besoin. N'oubliez de validez à chaque fois sinon vous perdez votre mise en forme. Dans les prochains tuts, on continuera à décortiquer la feuille de style CSS pour pouvoir jouer un peu avec les effets, et autre petits bidules.
Ce tut est une gracieuseté de Frenchgirl
01 février 2007
Premier tuto : le passage au mode avancé.
Comme je ne suis pas égoïste, je vais partager mon savoir tout nouvellement acquis en matière de blog/html et autres langages ésotériques...
Premier tuto : le passage au mode avancé.
Déjà il faut avoir en tête qu’il est possible de faire un blog en
mode avancé sans l’utiliser, puisque Canalblog permet d’avoir plusieurs
modèles du même blog, et de n’en utiliser concrètement qu’un seul.
On
peut donc tout à fait bidouiller son blog en mode avancé, faire plein
de bêtises, et continuer à avoir son blog en mode normal qui fonctionne
très bien. Ca rassure non ?
Donc pas de panique, vous pouvez vous
familiariser avec le mode avancé sans quitter le mode normal (et ça
c’est la classe internationale…)
Comme c’est quand même rigolo de
pouvoir personnaliser un peu son bloug, je m’en vais vous expliquer
comment faire pour vous familiariser avec le mode avancé sans pour
autant perdre tout votre blog chéri.
- Première étape :
Copier/coller
dans un document Word (ou bloc notes) toutes les informations relatives
à votre blog en mode normal : dans Style, copier coller toutes les
rubriques : Style général-Messages-Colonne de liens- Titre du
blog-Albums centre-Albums navigation et aussi, sauvegarder le
classement de vos blocs.
- 2ème étape :
Créer un nouveau modèle de blog en cliquant sur ‘Apparence’ puis ’Nouveau Modèle’
- 3ème étape :
choisissez
le modèle de blog qui vous convient avec le nombre de colonnes et le
thème qui vous va. Recopiez scrupuleusement toutes les indications que
vous avez copié/collé dans votre document word, afin que votre nouveau
modèle de blog soit exactement le même que votre modèle normal : on
recommence : Style –Apparence générale – Blocs…
- 4ème étape :
convertissez
ce nouveau blog -qui est donc scrupuleusement identique à votre blog
chouchou puisque vous avez tout bien copié collé- en mode avancé (et
n’ayez pas peur de Mr Canalblog qui vous dit que c’est irréversible,
c’est pas grave). Pour cela dans votre nouveau modèle de blog cliquer
sur: Paramètres - Apparence puis cocher la case ‘Convertir ce modèle en
type avancé (attention, opération irréversible)’
- 5ème étape :
vous
allez me prendre pour une folle furieuse du copié/collé, mais là, vous
devez sauvegarder ce modèle pour le cas où vous feriez des bêtises avec
le langage html très bizarre… Donc vous reprenez un petit doc Word
vierge, que vous intitulez ‘codes’ ‘sauvegarde’ ou autre et vous allez
dans « Editez les fichiers de ce modèle ». Là vous avez très peur
devant ces signes fort peu glamour, mais vous y allez quand même ! Hop,
on copie et on colle toutes les rubriques ‘Page d’accueil -Page des
archives -Page de l’index des archives- Page d’un message- Page du
profil d’un auteur- Page de présentation d’un album- Page de photo d’un
album- Feuille de style générale’
- Ca y est, vous avez un modèle de blog avancé !!! C’est la classe internationale, mais vous ne savez pas bien ce que vous allez pouvoir en faire…
Vous ne croyez pas que je vous tout vous expliquer tout de suite…(surtout que je patauge moi-même!)
La suite au prochain numéro !
Merci à Delphine pour ce tuto
Petit tuto : Lien pour "Lire la suite"
Après moults tatonnements et rageages divers, j'ai ENFIN réussi à vaincre le CSS et le HTML réunis en coalition pour me faire perdre mon sang froid :
J'ai fait un lien pour LIRE LA SUITE!
Merci à cepamoi pour son tuto qui m'a permis de comprendre 2/3 trucs par ci par là, mais quelques détails manquaient dans son billet pour des novices comme moi...
Voilà donc le tuto pour lire la suite, spécial cyberquiche pas encore bilingue en html...
NB : il faut être en mode avancé, sinon ça marche pas of course!
Merci à Delphine pour ce tuto
Haut de Page
