13 novembre 2010
Décryptage de la Page d'accueil
D'après
ce que j'ai cru comprendre depuis le temps que je réponds à vos nombreux
mails...par ce qu'il faut dire que j'en reçois un paquet...
Vous avez quelque problème à décrypter les codes de la page d'accueil et des autres pages d'ailleurs, même si ce sont exactement les mêmes...
Alors pour éviter que vous colliez vos scripts de compteur ou d'horloge n'importe où et surtout en plein milieu d'un bloc de code, j'ai pensé qu'une petite explication ne serait pas du luxe...
Dommage que Canalblog n'ai pas pris la peine de séparer les blocs de codes, plutôt que de tout balancer sur les pages, comme si ils avaient pris de l'élan et vite on referme tout ;)
Alors...je vous conseille fortement de faire comme sur le fichier joint ci-dessous et de séparer vos blocs avec des retours à la ligne.
Vous y verrez vraiment plus clair et ça évitera bien des soucis...
Page d'accueil décryptée (sept 2008)
Page d'accueil décryptée (Version Bloc-notes)
Vous pouvez noter dans vos pages Html à quoi correspondent les codes comme le l'ai fait dans le modèle, C'est un code invisible, c'est à dire qu'il ne se verra pas sur votre blog, mais seulement dans votre page de code html.
Vous pouvez écrire ce que vous voulez dedans, remplacez juste le texte en bleu.
<!-- Bloc des commentaires -->
Rendez-vous Ici pour le décryptage de la feuille de style !
Pour la Feuille de style, si vous voulez mettre au dessus des blocs à quoi ils correspondent vous devez mettre ce code là :
/*--------- Bloc de la colonne de droite -----------*/
Décryptage de la Feuille de style
La feuille de style c'est quoi d'abord !?
La feuille de style (.css) permet de spécifier des caractéristiques de mises en formes d'un document Htlm, qui sont rattachées à des balises.
Plus clairement, ça permet de définir pour chaque balise Html, une mise en forme spécifique.
Exemple :
Prenons la balise <H2> qui permet sur Canalblog de définir le style de la date dans les messages, On va pouvoir lui attribuer une police, une taille, un code couleur, centré, souligner, mettre en majuscule etc...
Chaque fois qu'on utilise la balise <H2> dans un document, tout le texte situé entre cette balise <H2>Le texte</H2> recevra cette mise en forme.
C'est pas facile au début de savoir à quoi correspondent tous ces blocs de codes dans la feuille de style...
Ce que j'appelle un bloc c'est ça :
#content {
float: left;
width: 600px;
background-color: #FDF7FB;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
Tous les blocs commencent par un # ou un . (point) sauf le premier bloc, celui du body.
Ensuite c'est le nom du bloc, (content dans cet exemple)
Suivi d'une parenthèse d'ouverture {
Puis au milieu les lignes de code qui définissent les spécificités
Le bloc se terminent par une parenthèse de fermeture }
Pour vous faciliter la tâche du décodage, j'ai noté au dessus de chaque bloc en rouge, à quoi ils correspondent et en bleu le détails des lignes de code.
Feuille de style générale décryptée
Feuille de style générale décryptée (version Bloc-notes)
Insérer un lien dans un article ou dans une colonne
Voici comment insérer un lien dans un texte sans que l'adresse apparaisse.
Comme ceci :
Allez visiter ce blog...
C'est tout bête, une fois que vous avez écrit votre phrase...
Sélectionnez avec votre curseur le ou les mots choisis...cliquez ensuite sur l'icône Lien hypertexte dans la barre d'outil :
Collez l'adresse de votre lien dans la fenêtre s'ouvre puis vous faites Ok.
Pour insérer un lien dans une colonne de votre blog sans passer par le formulaire Liens d'amis de Canalblog, vous devez cliquer sur l'icône Mode Html dans un nouveau message, pour récupérer le code et le coller dans une de vos colonnes en passant par vos page html (page d'accueil etc...) :
<p>Allez visiter <a href="http://unsimpleclic.canalblog.com/">ce blog</a>...</p>
Installer et utiliser le plugin Audio-Player avec WordPress
Vous avez remarqué que lorsqu’on importe un Mp3 dans un message, il s’affiche sous la forme d’un lien :
Pour afficher un petit Player aux couleurs de votre blog, il vous faut le plugin Audio-Player que vous pouvez télécharger ici.
Décompressez le fichier zip et mettez son contenu dans le dossier Plugins.
www / wp-content / plugins
Activez le plugin dans l’onglet Extensions de votre administration WordPress.
Pour changer la couleur du player allez dans Réglages et sélectionnez Audio player dans la liste.
Pour afficher le Player dans votre message importez votre mp3 en passant par Ajouter un son pour récupérer son adresse, Placez l’adresse du mp3 dans la balise [audio:] en mode Visuel comme ceci :
[audio:http://www.fileden.com/files/2009/10/3/2591997/Jamiroquai-Runaway.mp3]
Voilà…vous pouvez faire un aperçu de votre message pour vérifier que le player s’affiche et fonctionne correctement.
12 novembre 2010
Insérer des vidéos dans un article avec WordPress
Quelle a été ma surprise le jour où j’ai voulu insérer une vidéo dans un de mes articles…
A la place d’une vidéo : un lien tout bidon !
Car en passant par l’icône Ajouter une vidéo dans la barre d’outils sur Wordpress, oui…on obtient un lien…on ne peut pas visionner la vidéo sur l’article…ce qui à mon goût n’est pas terrible terrible, c’est une option qu’il doit y avoir bien sur pour ceux qui le veulent, mais une petite vidéo en direct c’est mieux quand même…
Pour ceux qui ne veulent pas installer de plugin, vous avez la solution de coller un lecteur exportable que vous trouvez maintenant sur un tas de site de vidéos comme Daylimotion, Youtube, Google vidéo etc…
Dans ce cas, il suffit de copier/coller le code du lecteur exportable que vous trouvez sous la vidéo en question, dans votre message en mode html et le tour est joué…
Oui, mais…
Cette méthode a ses limites ! c’est très pratique si vous avez l’habitude de prendre les vidéos sur le net, dans ce cas ne changez rien, mais si vous faites des vidéos chez vous et que vous voulez les mettre sur votre blog, vous devez obligatoirement les hébergées sur un de ces sites pour en récupérer le lecteur exportable.
Bien sur si vous savez un peu bidouiller, vous pouvez passez par votre client Ftp et héberger votre vidéo sur votre serveur, puis en récupérer l’adresse que vous insèrerez ensuite dans le code du lecteur exportable en collant l’adresse de votre vidéo dedans…
Oui…mais quelle galère…il y a plus simple quand même !
Alors si vous voulez mettre des vidéos dans vos articles sans vous prendre la tête, il y a vraiment plus simple…Je vous propose d’installer le plugin Embedded Video…
Vous pouvez le télécharger ici.
Comme pour n’importe quel plugin, décompressez le fichier zip puis placez le dossier embedded-video-with-link dans Plugins.
http://www.demolitetuto.fr/wp-content/plugins/embedded-video-with-link
Activez le plugin dans votre espace d’administration WordPress dans Extentions.
Lorsque vous ouvrez un nouvel article une icône apparait désormais…
Pour insérer une vidéo qui se trouve sur votre ordinateur, cliquez sur l’icône, une fenêtre va s’ouvrir avec plusieurs onglets.
Choisissez Upload vidéo, puis Parcourir pour importer votre vidéo, vous pouvez lui donner un titre et une description mais rien ne vous y oblige…
Cliquez sur Upload et patientez quelques secondes, lorsque la vidéo est importée la fenêtre se met sur l’onglet Local vidéo, vous devez sélectionner la vidéo dans la liste et faire Insert.
Évidement si c’est la première fois que vous importez une vidéo, il n’y a que la votre ;) mais pour les fois suivantes, vos anciennes vidéos s’affichent dans la liste, et vous pouvez les mettre dans un article sans avoir de nouveau à les importer, elles restent en mémoire.
Voyons maintenant l’onglet Vidéo URL…
Vous devez simplement coller l’adresse d’une vidéo dans la case Insert vidéo URL et faire Insert.
L’avantage de cette option, c’est que vous pouvez récupérer le Permalien de n’importe quelle vidéo et afficher cette vidéo avec le lecteur du plugin qui est tout de même plus sympa…
Mais surtout il permet un meilleurs affichage de certaines vidéos…
Par exemple dans mon cas, lorsque je fais des tuto en vidéo, il est impossible d’héberger mes vidéos sur des sites comme Daylimotion, Youtube, Google vidéo etc… mes vidéos sont floues, pas moyen de faire de réglages même dans le menu du lecteur, et le mode plein écran est une catastrophe.
En collant l’url de mes vidéos dans Vidéo URL, mes vidéos s’affichent correctement.
Pour récupérer l’adresse (url) d’une vidéo vous devez l’héberger sur votre serveur (ftp), voici comment faire :
Dans la partie de gauche, ouvrez le dossier qui contient votre vidéo et sélectionnez-la, dans la partie de droite ouvrez le dossier Upload (où sont tous les fichiers de votre blog) puis créer un dossier Vidéos, ça sera plus facile par la suite pour retrouver vos vidéos…
Sélectionner le dossier Vidéos puis cliquez sur la flèche pour envoyer votre vidéo dans la partie de droite.
Pour récupérer son adresse (url), cliquez droit sur votre vidéo qui se trouve maintenant dans la partie de droite (ce qui veut dire qu’elle est hébergée sur votre serveur) puis Copiez l’URL et sur HTTP.
Collez l’adresse dans Insert vidéo URL puis Insert et c’est tout !
Une ligne de code apparait dans votre article comme ceci :
[local / wp-content/ uploads / 2009 / 04/ leo-dance-1.mpg]
Si vous faites un aperçu de votre article, vous pourrez vérifier que votre vidéo s’affiche bien…
Ajouter un cadre personnalisé pour ses vidéos
Nous allons voir aujourd’hui comment ajouter un cadre personnalisé à vos vidéos…
Et par la même occasion, réviser la technique du roulage des Californias Rolls la plus simple et la plus rapide à mon avis.
Allez au boulot !
Faites comme d’hab, importez votre vidéo dans un nouveau message…
Repérez ensuite les dimensions de cette vidéo pour réaliser son habillage…dans cet exemple la vidéo fait 405x314 px je vais donc créer un cadre légèrement plus grand…logique.
Le voici :
Il fait 435x340 je l’ai fait un peu au pif, puisqu’ensuite nous allons centrer la vidéo sur ce cadre via la feuille de style.
Voici donc le bloc que vous devez ajouter dans votre feuille de style :
.vidéo {
background: url("http://www.Adressedevotrecadre.jpg") no-repeat;
width: 435px;
height: 340px;
text-align: center;
padding: 15px 0px 0px 0px;
margin: 0 auto;
}
Une fois que vous avez crée avec Photofiltre votre fond ou bien récupéré n’importe quelle image, vous devez l’héberger (importez-la dans un message et passez le en mode html) pour en récupérer l’adresse, puis collez cette adresse dans le bloc de code ci-dessus.
Il restera ensuite à faire quelques petits réglages pour centrer votre vidéo sur le fond de votre cadre en jouant avec la ligne : padding: 15px 0px 0px 0px;
Mais pour que cela soit possible il faut ajouter au script de la vidéo (dans votre message en mode html) une balise qui rendra tout cela possible, voici le script de notre vidéo avant modification :
<object width="405" height="314" data="http://www.youtube.com/v/qndZKzNHpwc&hl=en&fs=1" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/qndZKzNHpwc&hl=en&fs=1" /></object>
Nous allons ajouter cette balise :
<p class="vidéo"> au début du script et la balise </p> à la fin pour refermer le tout.
Ce qui donnera ceci :
<p class="vidéo"> <object width="405" height="314" data="http://www.youtube.com/v/qndZKzNHpwc&hl=en&fs=1" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/qndZKzNHpwc&hl=en&fs=1" /></object></p>
Voyez c’est tout bête…la balise <p class="vidéo"></p> permet d’appeler le cadre qui se trouve dans la feuille de style.
Désormais à chaque fois que vous voudrez insérer une vidéo dans un message vous n’aurez qu’à ajouter la balise au script de votre vidéo pour faire apparaitre son cadre.
Rien ne vous empêche de créer plusieurs cadres, il suffit d’ajouter un nouveau bloc dans votre feuille de style comme ceci :
.vidéo2 {
background: url("http://www.Adressedevotrecadre.jpg") no-repeat;
width: 435px;
height: 340px;
text-align: center;
padding: 15px 0px 0px 0px;
margin: 0 auto;
}
Et d’ajouter aussi le 2 à la balise comme ceci : <p class="vidéo2"></p>
11 novembre 2010
Remplir un album photo
Aujourd'hui grâce à une nouveauté sur Canalblog, en quelques clics vous pouvez charger 10 photos en même temps.
Allez dans l'onglet Contenu et dans Albums photos puis Ajouter un nouvel album ou liste des albums photos si vous voulez simplement ajouter de nouvelles photos à un album déjà existant.
Vous devez installer l'application java, puis faites Exécuter.
Un explorateur de fichier s'ouvre sur la gauche avec la liste de vos dossiers, il ne vous reste plus qu'à cliquer sur le dossier qui contient vos photos et de les sélectionner ensuite dans la partie droite où elles s'affichent.
Faites Envoyer (en haut à droite)
Patientez le temps du chargement, un message vous informe lorsque c'est terminé.
C'est tout, vos photos sont sur votre album.
Agrandir la police
Tout spécialement pour Sylpo...ma première fan
Pour agrandir la taille des caractères en mode Html...
Placez le texte entre ces balises : <font size="10">Voilà Sylpo j'ai répondu à ta question</font>
Changez le chiffre pour augmenter la taille du texte...
taille maxi =10
Changer la couleur du texte dans une colonne
C'est une question que vous me posez souvent...
Alors voici comment changer la couleur d'un texte ou seulement d'un
mot dans vos colonnes, car dans un message il suffit de cliquer sur le T et de choisir sa couleur...
Par contre lorsque vous collez un script dans une colonne et que le texte qui doit apparaitre est noir, comme le fond de votre blog...problème...et bien non, c'est n'est plus un problème...
Pour que le texte soit bleu vous devez ajoutez ces balises :
<font color="#00ffff">La balise font color permet de changer la couleur du texte</font>
Vous devez placer votre texte entre les balises <font color="#D4D4D4">Texte ici</font>
Vous pouvez mettre autant de balises que vous voulez avec des codes couleurs différents
C'est un peu le foutoir, mais ça donne ceci :
<font color="#ffff00">Vous</font> <font color="#ff9900">pouvez</font> <font color="#ff3333">mettre</font> <font color="#66ffff">autant</font> <font color="#6633ff">de</font> <font color="#00ff00">balises</font> <font color="#009900">que</font> <font color="#9900ff">vous</font> <font color="#ffffff">voulez</font> <font color="#cccccc">avec</font> <font color="#ff00ff">des codes</font> <font color="#ff66ff">couleurs</font> <font color="#ffffff">différents</font>
Ecrire à côté des images dans un article
Il faut penser aussi à ceux qui débutent...
Pour pouvoir écrire sur la droite de votre image comme ceci, au moment ou vous importez votre image, vous devez sélectionner Alignement à gauche.
Si vous avez plusieurs photos à mettre, c'est plus sympa qu'elles soient toute de la même dimension...
Alors cochez la case Créer une miniature de l'image et choisissez une taille pour votre image dans le petit menu déroulant.
Si votre image est aminée, n'oubliez pas de décochez les 2 cases.
Si au contraire vous préférez que votre image soit sur la droite et le texte à gauche, vous devez sélectionner Alignement à droite.
C'est aussi simple que ça...
Par défaut votre image sera sans alignement, c'est à dire à gauche et vous ne pourrez pas écrire à côté.
« Accueil 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
