29 novembre 2010
Mettre une bannière différente sur les pages de votre blog
Commencez par ouvrir votre Feuille de style et descendez sur le bloc de votre bannière :
#topbar-logo {
border-top-style: none;
border-right-style: none;
border-bottom-style: none
border-left-style: none;
border-width: 1px;
border-color: #910000;
background: url("http://p1.storage.canalblog.com/12/44/255038/19315550.jpg") no-repeat 0% 0%;
height: 150px;
display: block;
}
Copiez ce bloc et collez-le juste en dessous de celui-ci, comme sur la capture :
Ajoutez un "1" à #topbar-logo pour différencier les bannières :
#topbar-logo1
Puis coller l'adresse de la nouvelle bannière à la place de l'autre, si vous changez sa taille en hauteur, pensez à modifier le height: 150px;
Valider.
Ouvrez maintenant la page où vous voulez mettre cette nouvelle bannière, on va choisir Page d'un message pour cet exemple :
Repérez la ligne du <body> et ajoutez le "1" au code <div id="topbar-logo"> ce qui va permettre d'afficher votre nouvelle bannière à la place de l'autre.
Voilà...
Pour mettre une autre bannière sur la Page de votre profil par exemple, faites la même opération, en créant un autre bloc #topbar-logo dans votre feuille de style, mais cette fois mettez ajoutez un "2" :
#topbar-logo2 {
border-top-style: none;
border-right-style: none;
border-bottom-style: none
border-left-style: none;
border-width: 1px;
border-color: #910000;
background: url("Adresse de votre nouvelle bannière") no-repeat 0% 0%;
height: 150px;
display: block;
}
et même chose dans la Page d'un profil sur la ligne du <body> ajoutez le "2" dans le code <div id="topbar-logo"> :
<div id="topbar-logo2">
Mettre une bannière sur son blog en mode avancé
Commencez par redimensionner une image, votre bannière doit être de la même largeur que #Container
800px ou 900px ou encore 1000px ça dépend des modèles...
Ouvrez votre Feuille de style :
Apparence/Editer les fichiers de ce modèle/feuille de style générale
Notez que Container fait 900px (dans cet exemple)
Donc, si votre Container fait 900px, votre image doit faire 900px...par la hauteur que vous voulez.
Ensuite ouvrez un Nouveau message
Puis Insertion d'un fichier !
(Ne passez pas par : Insertion d'une image !!!! sinon les dimensions de votre bannière ne seront pas respectées.)
Passez en Mode Html en cliquant sur l'icône :
Copier l'adresse de l'image
Ensuite allez dans la Feuille de style générale
Repérez le bloc #topbar-logo et rajouter la ligne ci-dessous dans le bloc, en collant L'adresse de votre image.
background: url("http://Adresse de votre image.jpg") no-repeat 0% 0%;
Comme ceci :
#topbar-logo {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
background: url("http://Adresse de votre image.jpg") no-repeat 0% 0%;
height: 300px;
display: block;
}
Dans cet exemple, la bannière fait 900x300, il faut donc que le "height" soit à 300px sinon votre bannière ne s'affichera pas !
Ajoutez aussi la ligne display: block; si elle n'y est pas.
Votre bloc doit maintenant être comme celui là :
Mettre un fond d'écran sur votre blog
Choisissez une belle image au format 1020 x 600
Si votre image est trop petite elle va se répéter sur l'écran, et c'est pas très Zoli...à moins que vous vouliez mettre une petite fleur par exemple de 30x30 qui se répètera sur toute la page comme un papier peint, ça fait sympa aussi...
Ouvrez un Nouveau message et importez votre image avec l'icône Insertion d'un fichier.
Récupérez l'adresse de votre image en passant votre message en mode Html.
Ouvrez votre feuille de style et tout en haut, dans le bloc Body, rajoutez la ligne ci-dessous comme sur la capture et collez l'adresse de votre image dedans :
background-image: url("http://Adresse de votre image.gif");background-attachment : fixed;
N'oubliez pas le point virgule à la fin de la ligne !
En ajoutant background-attachment : fixed; votre fond d'écran restera fixe.
Pour que votre fond d'écran défile avec la page, n'ajoutez rien :
background-image: url("Adresse de votre image");
Il y a une autre façon de mettre un fond d'écran, mais vous devrez répéter l'opération sur toutes les pages de votre blog :
Ouvrez la page d'accueil et remplacez la balise <body> par :
<body background="http://Adresse de votre image">
Changer l'apparence des albums photos
Je ne sais pas ce que vous en pensez, mais perso...je la trouve pas terrible la page des albums photos.
Ça va encore au début lorsque vous avez 3 photos qui se battent en duel, mais ensuite quand l'album prend de l'épaisseur, vous vous retrouvez avec une colonne grande comme la tour Effeil sur la droite et c'est vraiment pas tip top !
Puis ensuite lorsque vous cliquez sur une miniature vous obtenez ça :
Un titre, du bla bla envoyé par...tel jour... à telle heure...bouh, c'est Big Brother !!!
Ce qui m'intéresse vraiment, c'est les photos...le Diaporama...le permalien (Lien permanent de cette page) et c'est tout !
Je ne vous propose pas un très grand changement, mais tout même...
Un design un peu différent et surtout faire le ménage !
Voilà ce que ça va donner ensuite, pour la page de présentation d'un album :
Ou encore ça, si vous avez plus de photo, c'est quand même sympa de pouvoir visionner toutes les photos d'un coup...
On s'est débarrassé de cette grande photo sur la gauche qui ne servait à rien, puisque de toute façon on l'obtient en cliquant sur n'importe quelle photo...
Et puis exit, cette colonne de miniatures qui n'en finissait plus de grandir...vous avez toutes vos photos à l'écran et en plus la miniature s'est agrandit ! (que demande le peuple !?)
Maintenant lorsque vous cliquez sur une photo, voila ce que vous obtenez :
L'image est centrée...vous gardez le Permalien de chaque photo, le Diaporama est toujours là, et la possibilité de faire défiler les miniatures aussi...
J'ai également ajouté un retour à l'accueil qui renvoie vers la page d'accueil du blog, si comme moi vous préférez des albums sans bannière...
Vous remarquerez également que le pavé de pub Google n'est plus à l'écran...(non, je ne l'ai pas supprimé...) Il est allé voir plus bas si j'y suis...en fait avec la balise <br> il est tout en bas de la page...Exit la pub !
Passons maintenant à la pratique !
Commencez par ouvrir la Page de présentation d'un album.
Voici à quoi ressemble la page avant la modif :
Le code avant modif de la balise <body> à la balise </html> j'ai mis en bleu les balises à supprimer:
<body> <div id="album-container"><div id="topbar-logo"><div class="logolink"><a href="<$BlogURL$>"></a></div></div> <div id="topbar"> <h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1> <h2><$BlogDescription$></h2> </div>
<div id="album-content"><div class="albumbody"><CBAlbum>
<h2><$BlogAlbumTitle$></h2><img src="<$BlogAlbumCoverURL$>" width="<$BlogAlbumCoverWidth$>" height="<$BlogAlbumCoverHeight$>" /><BlogAlbumDescription><p><$BlogAlbumDescription$></p></BlogAlbumDescription>
</div></div>
<div id="album-nav"><div class="albumcol">
<h3><$BlogAlbumPhotosCount$> photo(s)
<BlogAlbumSlideShowURL> - <a href="<$BlogAlbumSlideShowURL$>" onclick="window.open(this.href, 'diaporama', 'width=500, height=375, location=0, resizable=0, scrollbars=0, status=0, toolbar=0, directories=0'); return(false);" title="Visionnez un diaporama de cet album">Diaporama</a></BlogAlbumSlideShowURL></h3>
<CBPhoto>
<a href="<$BlogPhotoPageURL$>" title="<$BlogPhotoTitle$>"><img src="<$BlogPhotoThumbNailURL$>" alt="<$BlogPhotoTitle$>" width="75" height="75" /></a>
</CBPhoto>
</div></div>
</CBAlbum>
<div class="clear"> </div></div> </body></html>
Vous n'êtes pas obligés de supprimer cette balise : <h2><$BlogAlbumTitle$></h2> c'est celle du titre des photos.
Je l'ai supprimé car lorsque je charge mes photos dans les albums, elles s'appellent "IMGP6145" "IMGP6146" "IMGP6147" je ne vois donc pas l'intérêt de faire apparaitre le titre.
Ensuite, après le grand ménage ça donne ça :
Une fois que vous avez supprimé les balises en bleus.
Vous pouvez copier puis coller le code suivant à la place de vos codes si vous avez peur de faire une bêtise, ça revient au même.
<body> <div id="album-container"><div id="topbar-logo"><div class="logolink"><a href="<$BlogURL$>"></a></div></div> <div id="topbar"><h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1> <h2><$BlogDescription$></h2> </div>
<CBAlbum>
<h3><$BlogAlbumPhotosCount$> photo(s) <BlogAlbumSlideShowURL> - <a href="<$BlogAlbumSlideShowURL$>" onclick="window.open(this.href, 'diaporama', 'width=500, height=375, location=0, resizable=0, scrollbars=0, status=0, toolbar=0, directories=0'); return(false);" title="Visionnez un diaporama de cet album">Diaporama</a></BlogAlbumSlideShowURL></h3>
<center>
<CBPhoto>
<a href="<$BlogPhotoPageURL$>" title="<$BlogPhotoTitle$>"><img src="<$BlogPhotoThumbNailURL$>"
alt="<$BlogPhotoTitle$>" width="125" height="125" /></a>
</CBPhoto>
</center>
</div>
</CBAlbum>
<div class="clear"> </div></div> </body></html>
La balise <center></center> permet de centrer les miniatures dans la page.
Maintenant on va s'occuper de la Page d'une photo d'un album.
Voilà ce qui doit rester : (de la balise <body> à </html>)
<body> <div id="album-container"> <div id="topbar"> </div> <CBAlbum><CBPhoto>
<a href="http://Adresse de votre blog.canalblog.com/">Retour à l'accueil</a>
<br>
<img
src="<$BlogPhotoMediumURL$>"
width="<$BlogPhotoMediumWidth$>"
height="<$BlogPhotoMediumHeight$>" alt="<$BlogPhotoTitle$>"
/>
<p><BlogPhotoDateTime>Date de cette
photo : <$BlogPhotoDate$> - <$BlogPhotoTime$><br
/></BlogPhotoDateTime><BlogPhotoAuthorNickName>Envoyé par
: <$BlogPhotoAuthorNickName$><br
/></BlogPhotoAuthorNickName><a href="<$BlogPhotoPageURL$>">Permalien</a></p></div></div>
<center>
<table>
<BlogAlbumSlideShowURL><tr><td colspan="2"><a
href="<$BlogAlbumSlideShowURL$>" onclick="window.open(this.href,
'diaporama', 'width=500, height=375, location=0, resizable=0,
scrollbars=0, status=0, toolbar=0, directories=0'); return(false);"
title="Visionnez un diaporama de cet
album"><center>Diaporama</center></a></BlogAlbumSlideShowURL></td></tr>
<tr>
<td><CBPreviousPhoto><a
href="<$BlogPhotoPageURL$>"
title="<$BlogPhotoTitle$>"><img
src="<$BlogPhotoThumbNailURL$>" alt="<$BlogPhotoTitle$>"
width="75" height="75" /></a><br /><a
href="<$BlogPhotoPageURL$>" title="Photo
précédente"><center><<</center></a></CBPreviousPhoto></td>
<td><CBNextPhoto><a href="<$BlogPhotoPageURL$>"
title="<$BlogPhotoTitle$>"><img
src="<$BlogPhotoThumbNailURL$>" alt="<$BlogPhotoTitle$>"
width="75" height="75" /></a><br /><a
href="<$BlogPhotoPageURL$>" title="Photo
suivante"><center>>></center></a></CBNextPhoto></td>
</tr>
</table>
</center>
<BlogPhotoDescription><p><$BlogPhotoDescription$></p></BlogPhotoDescription>
</div></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</CBPhoto></CBAlbum>
<div class="clear"> </div></div> </body> </html>
Vous pouvez supprimer les lignes en bleues, c'est tout le blabla sous la grande photo...
Voilà, c'est tout :o)
Mettre ses albums photos dans une seule et même page
Voici comment rassembler tous vos albums photos dans une seule et même page, avec la possibilité de faire des catégories en regroupant des albums de même style...
Libre à vous ensuite de faire plusieurs pages...
Par exemple vous voulez organiser les photos de votre enfant, avec une miniature nommé : La première année d'Olivia
Ensuite dans cette page, tous les albums photo classés par mois... (La naissance d'Olivia, Olivia a 1 mois, 2 mois etc...)
Vous me suivez ?
La première chose à faire, c'est vos albums...mais si vous voulez les organiser, logiquement ils sont déjà fait...
Alors passons à la suite...
Il faut commencer par créer un nouveau blog...oui, car ce blog servira uniquement à l'affichage de vos nouvelles pages d'albums où nous allons rassembler dedans tous vos albums.
(A moins que vous soyez un peu branché Html et dans ce cas, libre à vous de créer votre propre page...)
Une fois votre nouveau blog crée, il faut l'épurer un peu pour en faire une grande page, sans colonnes et sans bannière. (sauf si vous voulez en mettre une, c'est vous qui voyez...)
Allez dans l'espace d'administration de votre compte pour créer ce nouveau blog.
Passez le en mode avancé en cliquant sur Paramètres.
Allez ensuite dans Editer les fichiers de ce modèle et ouvrez la feuille de style.
Passez le width de #Container et de #Content à 1000px.
Vous pouvez également changer la couleur du fond en changeant le code couleur des background-color.
Ensuite pour empêcher l'affichage des colonnes il faut passer les width de vos colonnes à 0px.
Si vous ne mettez pas de bannière, supprimer ces blocs :
#topbar-logo {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
background: #333;
height: Opx;
display: none;
}
div .logolink a {
display: block;
text-decoration: none;
width: 100%;
height: 0px;
}
#topbar {
background-color: #333;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 10px;
display: block;
}
Voilà...vous pouvez visualiser votre nouveau blog, c'est une grande page vide.
Enfin presque...si vous n'avez pas mis de bannière vous avez encore le titre du blog qui se balade...
On va se charger de son cas à celui là !
Ouvrez la page d'accueil et sur la ligne du <body> supprimez ces balises :
<h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1> <h2><$BlogDescription$></h2>
Elles se trouvent entre et <div id="topbar"> et </div>
Voilà...plus de titre ni de description du blog !
Maintenant il faut faire un peu de ménage dans la barre du Posté par qui se trouve sous les messages postés.
Nous n'avons pas besoin de tout ça...nous allons seulement garder le Permalien [#] qui nous servira bien, pour récupérer l'adresse de ces pages d'albums par la suite...
Dans la page d'accueil descendez sur la ligne <div class="itemfooter"> qui gère la barre du Posté par.
Copiez et collez la ligne suivante à la place de la votre :
<div class="itemfooter"><center> Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</center></div>
Une fois que vous aurez posté votre premier message avec les albums dedans, la date s'affichera en haut du message, pour l'enlever, toujours dans la page d'accueil repérez cette balise <h2><$BlogDateHeaderDate$></h2> et supprimez là.
Pendant qu'on y est...pour harmoniser un peu l'ensemble du blog (de vote page d'albums), rajoutez la balise <br> et <center> comme sur la capture.
Ouf...c'est tout pour ce qui est de la mise en page de notre nouvelle page d'album !
Oui mais seulement pour l'affichage en page d'accueil, car notre nouvelle page d'albums va s'ouvrir dans la page d'un message, alors il faut tout simplement copier le contenu intégral de votre page d'accueil et le coller dans la page d'un message à la place des codes en place dont nous n'avons pas besoin...
Vous suivez toujours ?
Maintenant il faut rassembler vos albums dans un message.
Allez donc sur Nouveau message, donnez un titre à votre album où pas d'ailleurs...
Allez sur votre blog et sélectionnez la miniature de l'album photo que vous voulez mettre dans cette page, et faites un clic droit puis copier.
Collez la miniature de votre album dans le message en mode texte comme ceci :
Faites la même chose avec tous les autres albums que vous voulez mettre dans cette page.
Pour agrandir la miniature cliquez dessus puis sans relâcher et faites glisser le carré de l'angle droit inférieur jusqu'à la taille désirée...
Pour mettre du texte sous vos albums revenez tout simplement à la ligne et écrivez votre texte.
Une fois tous vos albums collés dans ce message, il ne vous reste plus qu'à le Poster.
Voilà le travail...bon c'est vrai je suis suis pas trop foulée dans cet exemple, mais je suis sure que vous avez pigé.
Maintenant que vous avez votre page d'albums il faut enlever les miniatures qui se trouvent sur votre blog en page d'accueil et les remplacer par une nouvelle miniature...celle de votre nouvel album tout beau tout neuf !
Déjà on va empêcher l'affichage de vos anciens albums sur la page d'accueil (avant de faire cette manip vous devez avoir collé tous vos albums dans votre page).
Ouvrez votre page d'accueil et repérez le bloc suivant :
<div class="title">Albums photos</div>
<ul>
<CBAlbum>
<li><a
href="<$BlogAlbumURL$>"><img
src="<$BlogAlbumCoverURL$>" width="75" height="75"
alt="<$BlogAlbumTitle$>" /></a><br /><a
href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>
Supprimez le !
Pas de panique, ces codes permettent seulement à l'affichage des albums, en aucun cas ils ne les supprime de votre blog...
Et puis pour récupérer ce bloc il suffit tout simplement de créer un nouveau modèle et de récupérer n'importe quel bloc en passant le modèle en mode avancé, sans le mettre en ligne bien sur.
Vous devez maintenant choisir une image pour illustrer ce nouvel album...
Copiez collez ce code dans votre page d'accueil à l'endroit où vous voulez que votre l'album s'affiche (à la place de l'ancien par exemple...)
<p><a href="http://Adresse du permalien"><img src="http://Adresse de la miniature de l'album.jpg" style="width: 100px; height: 100px;" /></a></p>
Faites un clic droit sur le Permalien, copiez l'adresse du lien et collez la dans la ligne de code ci-dessus.
Collez ensuite l'adresse de la miniature (100x100) que vous avez décidez de mettre en page d'accueil pour illustrer votre album.
Et hop votre blog (en page d'accueil) a désormais son nouvel album !
Vous pouvez ajouter du texte au dessus ou en dessous de la miniature...avec la balise <div class="title">Album 1</div> par exemple...puis <div class="title">Album 2</div> etc...(à placer dans la page d'accueil, au dessus ou en dessous de la ligne de codes qui affiche votre miniature).
Comme je vous l'ai dis plus haut, je ne me suis pas cassée la tête dans cet exemple ( je n'ai pas d'album à vous présenter...) mais vous pouvez tout faire...ajouter du texte, des images, des vidéos, de la musique...vraiment tout...comme dans un article ! car c'est un article :o)
Mettre de la musique dans le diaporama de vos albums photos
Une fois que vous avez déniché l'adresse de votre mp3 allez dans Contenu / Albums photos / Configurer puis sélectionnez l'album photo.
Collez l'adresse de votre mp3 dans la case tout en bas.
Comme ceci :
Validez et c'est tout...
28 novembre 2010
Mettre un player dans un album photo
Pour mettre un Player comme ci-dessus, récupérez un script sur le site Deezer ou Myspace, et collez-le dans la page de présentation d'un album ou encore dans dans la page d'une photo d'un album.
Pour éviter d'avoir les pavés de pub sous le Player, gardez uniquement cette partie du script :
<embed src="http://assets.myflashfetish.com/swf/mp3/mff-stick.swf" quality="high" wmode="transparent" flashvars="myid=14274044&path=2008/10/22&mycolor=000000&mycolor2=000000&mycolor3=333333&autoplay=false&rand=0&f=4&vol=100&pat=12&grad=false" width="219" height="35" name="myflashfetish" align="middle"type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" style="visibility:visible;width:219px;height:35px;" />
En général, peu importe le site qui vous donne le script, l'essentiel se trouve entre les balises <embed> </embed>
Pour placer le Player au dessus du titre des photos, collez le script comme ceci :
Mettre le diaporama de vos albums photos dans un article
Vous ne le savez peut être pas encore, mais vous pouvez créer un Album Photo Fantôme...
C'est à dire, qu'il ne sera pas visible sur votre blog...
Pourquoi faire me direz-vous !?
Ben,
imaginez que vous avez des photos que vous voulez seulement diffuser
dans un article et non pas dans une colonne de votre blog...
Et bien, c'est possible...
Il faut rendre l'album invisible sur votre blog, récupérer le code source du Diaporama puis l'insérer dans un article, ni vu ni connu...
Pour cela, au moment où vous créez cet album, allez dans Configurer et mettez Non, dans la case comme ci-dessous :
Dans ce cas l'album ne sera pas affiché avec les autres sur les pages de vos blogs...
Par contre, pour récupérer l'adresse de votre Diaporama, qui lui sera diffuser dans un message, il vous suffit de cliquez sur Voir l'album pour récupérer le code source.
Une fois sur la page de l'album invisible...
Sélectionnez le Diaporama et choisissez Code source de la sélection, si vous n'avez pas cette option dans le clic droit, affichez le code source de la page et repérez la ligne de code du Diaporama.
Copiez la ligne de code suivante :
Il ne vous reste plus qu'à coller cette ligne de code dans votre article en Mode Html.
Lorsque vous repassez votre message en Mode texte vous obtenez ceci :
Il est également possible de copier les vignettes de votre album photo et de faire la même manip qu'avec le Diaporama, pour les afficher dans un message...
Changer l'ordre des albums photos
Vous avez surement remarqué que les albums photos sont classés par ordre alphabétique...
Ça peut être pratique pour classer des produits pharmaceutiques...mais c'est tout !
Alors si vous voulez que vos albums apparaissent dans l'ordre que vous avez choisi pour eux, c'est par ici :
Allez dans Contenu / Albums photos choisissez l'album que vous voulez mettre en premier et cliquez sur Configurer.
Ajoutez le numéro 1 devant le titre et validez (Vous pouvez écrire les numéros de plusieurs façons : 1 ou 1. ou 1/ ou 1- ou 1: etc...)
Voilà, c'est tout !
Même chose pour les autres albums...le numéro 2 en deuxième position etc...
Changer la taille des albums photos
Pour changer la taille des albums photos qui apparaissent dans vos colonnes, ouvrez votre page d'accueil et repérez le bloc de codes qui correspond aux albums photos :
<div class="title">Albums photos</div>
<ul>
<CBAlbum>
<li><a href="<$BlogAlbumURL$>"><img src="<$BlogAlbumCoverURL$>" width="75" height="75" alt="<$BlogAlbumTitle$>" /></a><br /><a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>
Il suffit de changer les valeur de width et de height...
Si vous voulez que les photos soient plus grandes, mettez width="190" height="190"
Vous pouvez aussi centrer les albums dans la colonne, en ajoutant la balise <center></center>
comme ceci :
<div class="title">Albums photos</div>
<ul>
<CBAlbum>
<li><a href="<$BlogAlbumURL$>"><center><img src="<$BlogAlbumCoverURL$>" width="100" height="100" alt="<$BlogAlbumTitle$>" /></center></a><br /><a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>
Si vous voulez supprimer le titre de l'album en dessous, enlevez cette ligne de code :
<a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a>
« 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
