27 novembre 2010
Mettre vos Albums photos dans un article
Voici comment afficher vos albums photos dans un message en page centrale et supprimer l'affichage dans les colonnes.
J'ai d'abord pensé qu'il suffisait de coller le bloc de code qui correspond à l'album photo dans un message pour qu'il s'affiche, mais non...c'est pas drôle quand c'est trop simple.
Alors il faut bidouiller un peu...
Commençons par préparer les boutons liens vers vos albums...
Ouvrez un Nouveau message et passez en mode Html
Mettez un titre comme Mes Albums photos par exemple et collez le code suivant :
<p><a href="Adresse album photo 1" target="_blank"><img src="Adresse image album photo 1 " /></a> <br />Titre album photo 1</p>
Vous devez copier l'Adresse de l'album photo 1 en l'ouvrant comme sur la capture et la coller dans le code ci-dessus.
Récupérez maintenant l'adresse de l'image de présentation de votre album, celle qui se trouve sur la page d'accueil en faisant un clic droit dessus puis copiez l'adresse de l'image.
Collez l'adresse dans le même code à la place de Adresse image album photo 1
Il ne reste plus qu'à donner un titre à ce premier album... ici : Titre album photo 1
Ce qui donnera ceci dans votre message lorsque vous repassez en Mode texte :
Vous devez répéter cette opération autant de fois que vous avez d'album bien sur...
Une fois fait, cochez la case en bas de votre message Modifier la date et mettez une date antérieure comme 01/01/2000 de façon à ce que votre message ne s'affiche pas sur la première page, vous pouvez y revenir en passant pas les archives ou par la liste de vos messages ou encore avec les tags.
Une fois votre message posté, allez dessus et copiez le [#] Permalien, car maintenant il faut faire un lien vers vos albums photos que vous devrez coller sur la page d'accueil et les autres pages si vous le désirez...
Autant faire un bouton c'est plus sympa, Collez le code suivant dans votre page d'accueil en ajoutant les adresses :
<p><center><a href="Adresse du permalien" target="_blank"><img src="Adresse de l'image " /></a></center></p>
Et pour finir, il faut enlever l'affichage de vos anciens albums photos...repérez dans la page d'accueil le bloc de code suivant :
<div class="title">Albums photos</div>
<ul>
<CBAlbum>
<li><a href="<$BlogAlbumURL$>"><img src="<$BlogAlbumCoverURL$>" width="40" height="40" alt="<$BlogAlbumTitle$>" /></a><br /><a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>
Supprimer ce code, ça aura pour effet de ne plus afficher vos albums, mais pas d'inquiétude, ça ne va pas les supprimer.
Vous pouvez réduire les images de présentation de vos albums photos si vous en avez beaucoup et aussi ne pas mettre de titre, c'est une question de goût...
Vous pouvez aussi choisir une autre photo que celle que vous propose Canalblog en premier...il suffit de collez l'adresse d'une autre image, c'est tout...
25 novembre 2010
Mettre une barre de défilement (Scrollbar) sur votre blog
Si vous voulez que votre fond d'écran ainsi que votre bannière reste fixe et donc toujours à l'écran lors de la navigation sur votre blog, c'est le tuto qu'il vous faut.
Je m'explique...
Cette barre de défilement installée dans votre colonne de droite, permet de faire défiler le contenu de votre blog, c'est à dire la page centrale le #Content + les 2 colonnes...
Comme ceci :
Ouvrez votre page d'accueil, sur la ligne <body> collez la ligne de code suivante juste avant la balise <div id="leftbar"> :
<div style="width:799px;height:500px;overflow:auto;">
Comme ceci :
Dans cet exemple, #Container est égal à 800px...(dans la ligne de code j'ai mis le width à 799px pour que ma barre de défilement soit bien dans le prolongement de la bannière...)
Donc, le width doit être équivalent ou légèrement en dessous du width de Container, pour laisser la place aux bordures, à vous de faire des tests pour voir quelle valeur est idéale sur votre blog...
Le height c'est la hauteur de la page en défilement, même chose...vous pouvez modifier cette valeur.
Changer la couleur des liens et des Tags de façon ponctuelle
Dernièrement j'ai fait un tuto pour changer la couleur des Tags, mais je viens de m'apercevoir...(mieux vaut tard...) que ce n'était pas compatible avec ce satané Internet Explorer !
Oui toujours le même...
Voici une autre méthode pour changer la couleur des liens de façon ponctuelle et aussi par la même occasion la couleur des Tags.
Cette fois c'est compatible sur les deux navigateurs...Firefox et Explorer.
Commençons par les Tags :
Collez le script suivant dans votre page d'accueil, la page des archives et aussi la page des messages entre la balise <head> et </head> (rien ne vous empêche de le mettre aussi dans votre profil ou encore les pages des albums photos...).
<style type="text/css">
<!--
a.type1 { color: #00FFFF; }
a.type1:hover { color: #C4C4C4;}
a.type2 { color: #CC0000; }
a.type2:hover { color: #FF0000; }
-->
</style>
Ne validez pas tout de suite...
Repérez sur cette même page le bloc des Tags qui ressemble à ça :
<div class="title">LES TAGS</div>
<ul class="tagcloud">
<CBTags>
<a href="<$BlogTagURL$>" style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag"><$BlogTagName$></a>
</CBTags>
</ul>
Pour attribuer aux tags la couleur qui se trouve dans le script plus haut, vous devez ajoutez le code suivant :
class="type1";
Dans cette ligne de codes, comme ceci :
<a href="<$BlogTagURL$>" class="type1"; style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag">
Au final votre bloc des Tags sera comme ça :
<div class="title">LES TAGS</div>
<ul class="tagcloud">
<CBTags>
<a href="<$BlogTagURL$>" class="type1"; style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag"><$BlogTagName$></a>
</CBTags>
</ul>
Voilà pour les tags...
Maintenant pour les liens dont vous voulez changer la couleur par ci par là...on va ajouter dans le code de notre lien ceci :
class="type2"
Si vous voulez mettre les même couleurs pour vos liens que pour vos Tags, vous devez ajouter le même code que pour vos tags : class="type1"
Voilà ce que ça donne :
<a class="type1" href="http://lestuto2demolite.canalblog.com/">Les tuto 2 Demolite</a>
Ce lien sera de la même couleur que les tags.
<a class="type2" href="http://lestuto2demolite.canalblog.com/">Les tuto 2 Demolite</a>
Ce lien sera différent, il aura les couleurs du a.type2 dans script :
<style type="text/css">
<!--
a.type1 { color: #C4C4C4; }
a.type1:hover { color: #CC0000;}
a.type2 { color: #CC0000; }
a.type2:hover { color: #FF0000; }
-->
</style>
Il suffit donc d'ajouter à vos liens le code class="type1" pour qu'ils prennent les couleurs du a.type1.
Le hover correspond à la couleur du lien au passage de la souris.
Vous pouvez ajoutez au script des lignes comme ceci :
a.type3 { color: #ffffff; }
a.type3:hover { color: #000000; }
Pour donner à d'autres liens des couleurs encore différentes...sans oublier d'ajouter class="type3" dans le code de vos liens.
Changer le mot "Commentaires" dans le pied des articles
Voici comment changer le mot "Commentaires" dans le pied des message...dans la ligne du Posté par.
Ouvrez votre page d'accueil puis repérez la balise suivante : <div class="itemfooter">
Pour changer le mot Commentaires mettez un autre mot à la place comme indiqué en bleu :
<div class="itemfooter"> Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]<BlogItemTags><br />Tags : <$BlogItemTagsList$></BlogItemTags></div>
Vous devez faire cette manip sur les autres pages html.
Changer la police et la couleur des Tags
Je ne sais pas si vous avez remarquez, mais les Tags sont des liens...(si si).
Donc, ils sont gérés par le bloc des liens dans votre feuille de style (logique non).
Si vous avez le code couleur #FFFFFF pour vos liens, vos Tags sont blanc !
Mais si vous changez ce code couleur...tous les liens de votre blog seront changés (c'est bête ça...).
Il faut donc créer 2 nouveaux blocs, rien que pour vos Tags...le premier gère les liens et le second gère les liens au passage de la souris (c'est le hover).
Ouvrez votre votre feuille de style et collez les blocs suivants :
a1 {
font-family: georgia;
font-size: small;
color: #909090;
text-decoration: none;
}
a1:hover {
color: #FFFFFF;
text-decoration: none;
}
Vous n'avez plus qu'à changer la police et les codes couleurs...
Mais c'est pas fini !
Allez maintenant dans votre page d'accueil et sur toute les pages où apparaissent les Tags et faites cette modif :
Repérez le bloc des Tags, puis cette ligne :
<a href="<$BlogTagURL$>" style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag"><$BlogTagName$></a>
Ajoutez un 1 comme ceci pour que les bloc que nous venons de mettre dans la feuille de style commandent ces liens.
<a1 href="<$BlogTagURL$>" style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag"><$BlogTagName$></a1>
Et voilà...vos Tags ont changé de couleur !
Le principe est le même si vous voulez changer d'autre liens dans votre page par ci par là...vous devez créer autant de bloc dans la feuille de style que vous voulez de couleur différentes...
a1 a2 a3 etc...
Et ne pas oublier d'ajouter le chiffre correspondant dans les liens de votre page d'accueil :
<a1 href="http://lestuto2demolite.canalblog.com/">Les tuto 2 Demolite</a1>
24 novembre 2010
Ajouter une troisième colonne à votre blog
Voici comment ajouter une troisième colonne à votre blog !
Bin oui après tout ça peut servir...
Si vous avez des colonnes qui n'en finissent plus de s'allonger, ça va leur tailler un short pour cet été...
Commençons pas ouvrir la feuille de style pour y ajouter un bloc, ou plutôt faire un copier coller d'un bloc existant auquel nous allons juste ajouter un petit 1 pour le différencier de l'autre...(l'autre colonne de droite bien sur).
Dans cet exemple nous allons ajouter une deuxième colonne sur la droite, personnellement je trouve plus pratique de naviguer dans une colonne à droite de mon écran, mais c'est une question de goût...
Comme nous venons d'ajouter une colonne de 200px, pour quelle puisse s'afficher correctement sur le blog, il faut rajouter 200px au bloc #Container (car tout ce beau petit monde loge chez Mr Container, sympa le type).
Donc si avant d'ajouter votre colonne le #Container était à 900px...je vous le donne en mille ?
Bravo il passe à 1100px !
Trop dur le calcul, j'ai mal au crâne..
Vous pouvez donc valider et ouvrir votre Page d'accueil.
Vous devez descendre sur la ligne qui annonce le début de votre colonne de droite, c'est à dire cette ligne :
<$CBControlNavLinks$></div></div><div id="rightbar"><div class="navlinks">
Copiez cette ligne et collez la en dessous des blocs de codes quelle contient comme ceci, puis ajoutez le 1 à rightbar :
Vous devez placez les blocs (albums photo, les flux rss etc...) que vous voulez voir apparaitre dans cette nouvelle colonne de droite, sous la ligne de code que nous venons de coller, puis ajoutez 2 balises </div> comme ceci :
Voilà...c'est tout !
Enfin non, pas tout à fait...comme nous avons agrandit notre #Container de 200px, du coup notre bannière n'est plus à la bonne taille...
Il faut donc la passer à 1100px elle aussi et ne pas oublier d'augmenter la valeur height dans les blocs #topbar-logo et div.logolink dans la feuille de style.
Car le fait d'augmenter la largeur à 1100px la hauteur augmente aussi, pour garder les proportions de votre bannière.
Avec une bannière qui faisait auparavant 900x150 elle fait maintenant 1100x183 !
Voilà, c'est fois c'est tout...
Pour ceux qui ne savent pas comment agrandir leur bannière :
Importez votre bannière dans Photofiltre :
Cliquez droit sur l'image, puis sur Taille de l'image, ensuite changez la largeur (ce doit être la même que celle de votre #container)
Retenez la hauteur de votre nouvelle bannière...
Enregistrer sous au format Jpeg de préférence pour les photos et en Png pour les écritures...
Mettre vos colonnes côte à côte
Vous en avez marre d'avoir une colonne à droite et une autre à gauche ?
Alors pourquoi pas les réunir et les passer à droite...ou à gauche, après c'est vous qui voyez...
Il y a 2 façons de procéder, mais la façon la plus simple offre seulement la possibilité de passer la colonne de gauche sur la droite et non l'inverse, si vous voulez mettre vos 2 colonnes à gauche passez à l'autre méthode plus bas.
Ouvrez votre feuille de style...descendez sur le bloc #Leftbar et modifier le float, mettez right à la place de left.
Votre colonne de gauche passe à droite.
Voici la deuxième méthode :
On va commencer par modifier la feuille de style...
Copiez le bloc rightbar et collez-le en dessous de celui-ci en ajoutant un "1" à la suite de rightbar comme ceci :
#rightbar1 {
float: left;
width: 200px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
Ce qui va nous permettre de créer une nouvelle colonne à droite à côté de l'existante.
Maintenant il faut empêcher l'affichage de la leftbar, toujours dans la feuille de style descendez sur le bloc suivant et passez le width à 0px.
#leftbar {
float: left;
width: 200px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
Vous pouvez maintenant Valider et ouvrir la page d'accueil.
Nous allons maintenant déplacer la page centrale #content pour qu'elle s'affiche sur la gauche...
Sélectionnez le bloc de code du content et placez le sous la ligne du body comme sur la capture.
Collez à la suite de ces même codes, (sous la balise </blogger>) la ligne suivante :
</div></div><div id="rightbar1"><div class="navlinks">
Ce qui va permettre l'affichage de votre ancienne colonne de gauche...mais cette fois à droite.
Ensuite, libre à vous d'inverser dans la page d'accueil rightbar1 et rightbar pour choisir quelle colonne vous mettez à droite ou à gauche...vous me suivez ?
A répéter sur toutes les pages, sinon seule votre page d'accueil aura ses colonnes à droite...
Pour passer les colonnes à gauche, il faut faire la même manip mais en modifiant #leftbar au lieu de #rightbar.
Mettre un curseur personnalisé
Compatible avec Firefox et Google Chrome
Incompatible avec Internet Explorer
Commencez par trouver ou créer un curseur, avec Photofiltre c'est un jeu d'enfant.
Voici le script :
<style type="text/css">
body {
cursor: url('http://adresse du curseur.png'), auto;
}
a {
cursor: url('http://Adresse du curseurhover.png'), auto;
}
</style>
Coller l'adresse de vos images dans le code, choisissez une petite image 15x15 px c'est parfait et enregistrez la en png ou en gif (png de préférence).
La première adresse, c'est le curseur classique, la deuxième adresse c'est le curseur au passage sur un lien.
Ensuite, il ne vous reste plus qu'à coller le script dans votre page d'accueil et dans les autres pages Html juste avant la balise </body>
Supprimer le titre et la description du blog
Si vous êtes sur ce post c'est que vous êtes passé en Mode avancé tête baissée sans prendre le temps de mettre votre bannière...
Du coup, après l'avoir installé en mode avancé, vous vous retrouvez avec la barre de titre de votre blog et sa description juste en dessous !
C'est pas jojo...je vous l'accorde.
J'ai mis pas mal de temps pour trouver la solution...il a fallu que je fasse quelques tests, mais j'ai fini par trouver !
Ouvrez votre page d'accueil et repérez la ligne <body>
Repérez ensuite les codes suivants :
</div><div id="topbar"> <h1><ahref="<$BlogURL$>"><$BlogTitle$></a></h1> <h2><$BlogDescription$></h2>
Ces codes correspondent à l'affichage de la vilaine barre, du titre et de la description de votre blog.
Supprimez-les !
Vous devez maintenant repérer ce code, toujours dans la même ligne :
Et le remplacer par le code ci-dessous contenant l'adresse de votre blog :
<a href="http://lestuto2demolite.canalblog.com/"></a>
Validez.
Vous devez répéter cette opération sur toutes les pages de vote blog.
Ouvrez maintenant votre Feuille de style.
Descendez sur le bloc div .logolink a { et changez la valeur de height
div .logolink a {
display: block;
text-decoration: none;
width: 100%;
height: 0px;
}
Si votre bannière fait 150px de hauteur, vous devez mettre height: 150px;
Pour le savoir, regardez dans le bloc de votre bannière #topbar-logo qui se trouve juste au dessus du bloc précédent :
#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 la bannière.jpg") no-repeat 0% 0%;
height: 150px;
display: block;
}
Voilà...c'est fini !
Changer la taille des colonnes
Avant de commencer à bidouiller, faites donc une copie de la feuille de style...
Vous voulez changer la taille de vos colonnes, agrandir la partie centrale...ça peut se faire...
Apparence/Editer les fichiers de ce modèle/Feuilles de style générale
On doit intervenir sur 4 blocs...
#container = page de fond
#content = page centrale
#rightbar= colonne de droite
#leftbar= colonne de gauche
Lorsqu'on additionne "content" "rightbar" et "leftbar" la somme doit être égale à "container"
Donc 500+200+200=900
#container est égal à 901 dans le modèle par défaut, ça doit être pour la bordure...
Donc si vous voulez réduire vos 2 colonnes pour agrandir la partie centrale, vous pouvez faire par exemple :
150+150 pour les colonnes et 600 pour le centre, le tout étant bien égale à 900.
Si vous voulez agrandir la page de fond, pour utiliser l'espace au maximum, il faut agrandir "container" par exemple à 1000, mais attention, il faudra refaire une bannière à 1000x150 (si l'ancienne était à 900x150), car sinon votre bannière sera décalée...il en manque un bout quoi !
Ensuite même calcul, pour avoir un total de 1000 vous devrez repartir 200+200+600 par exemple...
« 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
