Attention !
Ce blog a déménagé et n'est plus mis à jour. Rendez vous sur le nouveau blog :
http://www.blogtuto.org/
jeudi 24 juillet
Créer une troisième colonne
Rajouter une colonne de plus à son script en mode avancé!
Parce que vous êtes too much...
Parce que 2 c'est pas assez que 3 c'est mieux...
Voici en image ce que ça donne chez Damouredo...
L'installation se passe en deux temps
1- dans la feuille de style
Si c'est une colonne à droite appelez la rightbar si elle va aller à gauche ce sera une leftbar.
Pour la distinguer donnez lui le chiffre 1.
Ce qui donnera lefbar1 ou rightbar1
Ensuite vous mettez les caractéristiques d'une colonne de cette façon :
#leftbar1 {
float: left;
width: 200px; <---- largeur de la colonne
height: 5000px; <---- longueur de la colonne
background-color: #FFFFFF;
border-top-style: none; <---- si vous voulez une bordure
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px; <---- l'épaisseur de la bordure
border-color: #669900; <--- couleur du fond de la colonne
overflow: hidden;
}
Copier votre code à la suite de vos colonnes ou si vous avez peur de vous tromper tout en bas
! attention aux }
Ceci étant fait, validez.
2 - dans le script sur toutes les pages (accueil, page des archives, index des archives, message, auteur)
ajoutez le script suivant par exemple ma colonne va être à droite de ma colonne de gauche :
<div id="leftbar1"> <div class="navlinks">
</div></div>
cliquez sur l'image pour voir l'exemple
<div id="leftbar1"> <div class="navlinks">
mettez ici les blocs que vous souhaitez insérer dans cette nouvelle colonne
</div></div>
Ce tuto vous est offert par cocktail. Merci à elle!
Tags : colonne, mode avancé
dimanche 08 juin
Supprimer les bordures
"Bonjour
J'aimerai savoir comment supprimer les traits qu'il y a sur mon blog je ne sais pas comment cela ce fait !!"
Réponse
Dans la feuille de style, 2 possibilités : Sur chaque blocs concernés
- soit vous mettez "none" à la place de solid (ou dotted) sur la ligne border concernée
- soit vous mettez "0 px" au lieu de 1 (ou 2) sur la "border-width"
Exemple :
#content {
float: left;
width: 700px;
background-color: #FFFFFF;
border-top-style: solid; <----------- soit je mets "none" à la place de solid
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px; <-------------- soit je mets 0 px au lieu de 1
border-color: #;
overflow: hidden;
Bonne journée !
Tags : brdures, colonne, FAQ, images, mode avancé
vendredi 16 mai
Changer la taille de la colonne et de la zone texte sur blogspot/blogger
c'est simple on va dans :
>Mise en page
>modifier le code html
#outer-wrapper {
width: 800px;<-------------- largeur totale
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 580px; <-------------- largeur zone texte
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px; <-------------- largeur colonne
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Bien sûr largeur de texte + de colonne doit être = à la largeur totale!
Tags : colonne, mode avancé
dimanche 20 avril
Insérer un lien-bouton dans une colonne
Mode normal ou mode avancé...ça marche !
En
général, les boutons sont mis à disposition sur les blogs par leurs
auteurs.
Il
vous suffira de cliquer dessus avec le bouton droit de la souris, et de
faire "enregistrer l'image sous"...et donc d'enregister le fichier
du bouton où vous voulez chez vous sur votre ordinateur, pourvu que vous le
retrouviez ensuite !
Pour
la taille du bouton, il vous faudra tester ce qui vous convient le
mieux par rapport à la largeur de vos colonnes. Il suffit de remplacer
les valeurs de hauteur et largeur (height et width). Chaque fois, que
vous aurez entré ces deux valeurs, n'oubliez pas de valider et de
visualiser votre blog pour voir si ça vous convient. Dans la négative,
changer à nouveau les valeurs....
Exemple de "Lien-Bouton" ! :
Tu ouvres ton bloc notes de Windows, ou alors une page Word, cela va aussi. Ca va te servir à y coller des choses que tu devras recopier ailleurs.
D'abord, il faut mettre sur le serveur de Canalblog, l'image du Lien-bouton.
Pour ce faire, il faut que tu ailles dans "nouveau message".
Tu te places comme si tu voulais écrire un message, mais tu cliques sur "insertion d'une image"
Là, tu insères en fait le fichier qui correspond au logo que tu as rangé quelque part dans ton ordinateur. Puis tu cliques sur "poster et publier"
(Clique sur l'image pour la voir en grand)
Puis tu sélectionnes sélectionner dans cette même fenêtre ton Lien-bouton et tu vas cliquer sur l'icône "liens".
En fait, ça t'ouvre une petite fenêtre, avec le chemin d'accès sur le serveur de ton image.
Tu vas sélectionner ce lien, le copier et le coller dans ton bloc-notes.
Ouf...une bonne chose de faite
Tu vas dans ton bloc note ou ta page Word et tu copies et colles ceci :
<img src="http://storage.canalblog.com/86/11/446950/24178395_p.jpg" border="0" height="90" width="120">
Et tu vas remplacer ce que j'ai souligné et mis en gras,
par ce que tu as précédemment collé dans ton bloc notes, à savoir, le
chemin d'accès de ton image de logo sur le serveur de Canalblog.
Puis tu sélectionnes la phrase en entier, et tu fais copier.
Tu vas ensuite aller dans l'onglet "contenu" de Canalblog, puis choisir "liens d'amis".
Dans la case "nom de site" tu vas coller ce que tu as copié précédemment....ça va toujours ?
En dessous dans la case "adresse internet", tu mets l'acccès vers BLOGTUTO, à savoir : http://blogtuto.canalblog.com/
Puis dans la case "ou ajoutez une nouvelle catégorie" tu peux taper par ex, "Aide pour mon blog" puis tu n'oublies surtout pas de "VALIDER" et le tour est joué !
Tags : bouton, colonne, logo
vendredi 11 avril
Enlever le cadre autour des image dans les colonnes
Il arrive parfois que lorsque vous insérer une image dans vos colonnes, elle soit entourée d'un disgracieux cadre noir ou (autre couleur d'ailleurs) qui met en péril l'esthétique ô combien recherché de votre blog.
Deux cas de figure pour retirer ce fameux cadre :
- Soit votre code comporte un chiffre autre "0" après "border" et ça c'est sûr ça programme votre cadre. Dans ce cas vous mettez votre border à 0 et le pb est réglé.
- Deuxième cas de figure vous "border=0" et vous avez quand même un cadre.
Là c'est dans la feuille de style que ça se passe, à ce niveau :
.image {
text-align: left;
margin-bottom: 20px;
}
.navlinks img {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 20px; <--------------là ça doit être à 0!
border-color: #000000;
ou bien
.image {
text-align: left;
margin-bottom: 20px;
}
.navlinks img {
border-top-style: solid; <-- vous mettez none sur cette ligne et les 3 qui suivent...
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 0px;
border-color: #000000;
@ bientôt!
Tags : colonne, images, mode avancé
mercredi 09 avril
Le contenu de mes colonnes a disparu (mode avancé)
Vous êtes passé en mode avancé et vous ne voyez plus rien ou qu'un partie du contenu d'un de vos colonnes ou des deux...
Vous devez aller jeter un oeil du côté de la feuille de style et vérifier ceci :
#rightbar { <-- colonne de droite
float: left;
width: 200px;
height: 4000px;<-- Hauteur de la colonne : c'est là que ça peut coincer si par exemple c'est à 200...
background-color: #DDDDDD;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#leftbar { <-- Colonne de gauche
float: left;
width: 200px;
height: 4000px; <-- idem...
background-color: #DDDDDD;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
Tags : colonne, FAQ, mode avancé
vendredi 04 avril
Colonnes de différentes longueurs
En mode avancé !
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)
Tags : colonne, longueur, mode avancé