HABILLAGE DE VOTRE BLOG !!
TOUT POUR L'HABILLAGE ET LA CONFIGURATION DE VOTRE BLOG !!!
Bonjour à tous !! l’habillage de son blog est souvent une interrogation ?? …. à travers cet article , je vous cite quelques astuces trouvé sur le Web … si comme moi vous êtes soucieux,
et à l’écoute de votre image conçernant votre blog ;lisez attentivement cette article…
à l’occasion de ces quelques mots j’adresse un grand merci à l’équipe d’Over-Blog qui me permet de m’exprimé sur le web,merci également aux sites blog ( donc aux blogeurs ) pour toutes leurs astuces…. grace à vous tous ma progression dans ce milieu ‘ nouveau’,et pour moi plus facile….. pour finir ce petit message … je vous souhaite de très bonnes fêtes….
Jean Michel …..
POUR OVER-BLOG
Parfois des lignes grises apparaissent sous l'entête du blog. Pour les supprimer:
Note: pour ne pas devoir le refaire à chaque fois, il suffit d'éditer le CSS et de modifier la ligne #top
Pour mettre une couleur de fond d'écran, il faut éditer le CSS.
Mettre une couleur de fond
1. Allez dans l'onglet Design, puis sur Modifier le CSS, et décochez la case Je souhaite modifier moi même le fichier CSS
2. Dans la première ligne de votre CSS, (qui commence par body), repérez l'attribut background.
3. Remplacez tout le texte commençant par background et finissant au premier point-virgule par background : #XXXXXX ; où XXXXXX est le code de la couleur que vous voulez mettre.
4. Vous obtiendrez donc par exemple :
5. Enregistrer votre fichier CSS en cliquant sur Enregistrer.
- Editer ton bloc d'entête
- Cliquer sur le bouton source
- Puis virer le code html <div id=top> et </div>
Note: pour ne pas devoir le refaire à chaque fois, il suffit d'éditer le CSS et de modifier la ligne #top
#top {...; border-bottom: 0px solid ......}
Pour modifier l'aspect du titre du blog, deux solutions:
Méthode de base
1. Modules
2. Editer l'entete
3. Modifier le titre avec l'éditeur.
Méthode avancée - CSS
1. Design
2. Modifier le CSS
3. Chercher les lignes #top et #top h1
4. Modifier ces lignes en respectant le CSS (Voir la catégorie associée)
Méthode de base
1. Modules
2. Editer l'entete
3. Modifier le titre avec l'éditeur.
Méthode avancée - CSS
1. Design
2. Modifier le CSS
3. Chercher les lignes #top et #top h1
4. Modifier ces lignes en respectant le CSS (Voir la catégorie associée)
Votre blog dispose de 2 titres. L'un s'affiche au sommet de chaque page, l'autre dans la barre du navigateur.
Titre au sommet de chaque page:
Pour le modifier, il faut éditer le bloc:
1. Modules
2. Editer l'entete
3. Modifier le titre avec l'éditeur.
Titre de la barre du navigateur:
(Aussi utilisé comme nom par défaut pour un favori)
Pour le modifier, il faut:
1. Aller dans mon Profil
2. Modifier les infos du blog (Titre du blog)
Titre au sommet de chaque page:
Pour le modifier, il faut éditer le bloc:
1. Modules
2. Editer l'entete
3. Modifier le titre avec l'éditeur.
Titre de la barre du navigateur:
(Aussi utilisé comme nom par défaut pour un favori)
Pour le modifier, il faut:
1. Aller dans mon Profil
2. Modifier les infos du blog (Titre du blog)
Le pied de page correspond à la zone située en bas de chaque page. Elle est en général utilisée pour donner des informations globales sur le blog, ou pour donner des liens utiles.
Pour le modifier, il faut éditer le bloc:
1. Modules
2. Editer le pied de page
3. Modifier le pied de page avec l'éditeur.
Pour le modifier, il faut éditer le bloc:
1. Modules
2. Editer le pied de page
3. Modifier le pied de page avec l'éditeur.
Pour modifier l'aspect du pied de page, deux solutions:
Méthode de base
1. Design
2. Editer les blocs
3. Editer le pied de page
4. Modifier le pied de page avec l'éditeur.
Méthode avancée - CSS
1. Design
2. Modifier le CSS
3. Chercher la ligne #footer
4. Modifier cette ligne en respectant le CSS (Voir la catégorie associée)
Méthode de base
1. Design
2. Editer les blocs
3. Editer le pied de page
4. Modifier le pied de page avec l'éditeur.
Méthode avancée - CSS
1. Design
2. Modifier le CSS
3. Chercher la ligne #footer
4. Modifier cette ligne en respectant le CSS (Voir la catégorie associée)
Merci à Avril2 pour cette liste de sites proposant des fonds d'écran:
http://hurgon.free.fr/fonds/
http://www.hebus.com/
http://www.wallpaperstx.com/
http://www.studio-live.com/
http://www.fond-ecran-image.com/
http://www.ecran.org/
http://www.boolsite.net/
http://www.apparence.org/
http://mg.danboss.com/DB_4images_categories98.html
http://www.grsites.com/textures/
http://www.100000-images.com/
http://hurgon.free.fr/fonds/
http://www.hebus.com/
http://www.wallpaperstx.com/
http://www.studio-live.com/
http://www.fond-ecran-image.com/
http://www.ecran.org/
http://www.boolsite.net/
http://www.apparence.org/
http://mg.danboss.com/DB_4images_categories98.html
http://www.grsites.com/textures/
http://www.100000-images.com/
publié par Fabrice B. dans: Fond du blog
Comment étirer l'image pour qu'elle couvre tout l'écran ?
Le CSS ne permet pas l'étirement de l'image.
J'ai suivi toutes les indications mais l'image n'apparaît pas.
Vider votre cache: Ctrl + F5. (Cela est valable pour toutes les modifications de CSS).
Vérifiez que l'URL de l'image est correcte (collez-là dans la barre d'adresse du navigateur, l'image doit s'afficher).
Si l'image s'affiche, c'est peut-être une erreur de syntaxe dans le CSS (point-virgule manquant entre deux attributs, parenthèse ou accolade manquante, faute de frappe).
Enfin si tout est correct il se peut que le fond de l'écran soit recouvert par un élément qui possède lui aussi une couleur de fond et qui masque votre image.
Vérifiez que votre code est bien sur la ligne body, et pas sur la ligne input (cela arrive fréquemment car input est la dernière ligne du paragraphe commencant par la ligne body)
Puis-je mettre une image de fond sur d'autres parties de mon blog ?
Oui, les modules par exemple peuvent avoir une image de fond. Il suffit pour cela de remplacer dans la procédure body par .box (à l'étape 5)
Le CSS ne permet pas l'étirement de l'image.
J'ai suivi toutes les indications mais l'image n'apparaît pas.
Vider votre cache: Ctrl + F5. (Cela est valable pour toutes les modifications de CSS).
Vérifiez que l'URL de l'image est correcte (collez-là dans la barre d'adresse du navigateur, l'image doit s'afficher).
Si l'image s'affiche, c'est peut-être une erreur de syntaxe dans le CSS (point-virgule manquant entre deux attributs, parenthèse ou accolade manquante, faute de frappe).
Enfin si tout est correct il se peut que le fond de l'écran soit recouvert par un élément qui possède lui aussi une couleur de fond et qui masque votre image.
Vérifiez que votre code est bien sur la ligne body, et pas sur la ligne input (cela arrive fréquemment car input est la dernière ligne du paragraphe commencant par la ligne body)
Puis-je mettre une image de fond sur d'autres parties de mon blog ?
Oui, les modules par exemple peuvent avoir une image de fond. Il suffit pour cela de remplacer dans la procédure body par .box (à l'étape 5)
Pour mettre une couleur de fond d'écran, il faut éditer le CSS.
Mettre une couleur de fond
1. Allez dans l'onglet Design, puis sur Modifier le CSS, et décochez la case Je souhaite modifier moi même le fichier CSS
2. Dans la première ligne de votre CSS, (qui commence par body), repérez l'attribut background.
3. Remplacez tout le texte commençant par background et finissant au premier point-virgule par background : #XXXXXX ; où XXXXXX est le code de la couleur que vous voulez mettre.
4. Vous obtiendrez donc par exemple :
body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#00000; background: #FF0000; }
5. Enregistrer votre fichier CSS en cliquant sur Enregistrer.
Paramètres du fond d'écran
La procédure décrite ci-dessus définit un fond avec les paramètres par défaut: votre image sera répétée horizontalement et verticalement pour remplir tout le fond de l'écran. Si votre page est plus grande que l'écran, l'utilisation des ascenseurs fera aussi défiler votre fond d'écran.
Vous pouvez modifier ces paramètres en ajoutant des attributs supplémentaires :
Pour la répétition de l'image: (attribut background-repeat)
>> repeat : Répète l'image horizontalement et verticalement (comportement par défaut)
>> repeat-x : Répète l'image horizontalement
>> repeat-y : Répète l'image verticalement
>> no-repeat : Ne répète pas l'image
Exemple: body {...; background-repeat: repeat-x;...}
Pour le positionnement du fond: (attribut background-position)
>> top : Alignement de l'image avec le haut de la fenêtre
>> center : Alignement de l'image au centre de la fenêtre
>> bottom : Alignement de l'image avec le bas de la fenêtre
>> left : Alignement de l'image avec la gauche de la fenêtre
>> right : Alignement de l'image avec la droite de la fenêtre
Exemple: body {...; background-position: top left;...}
Défilement du fond: (attribut background-attachment)
>> scroll : L'image défile avec la page
>> fixed : L'image est fixe losque la pagé défile.
La procédure décrite ci-dessus définit un fond avec les paramètres par défaut: votre image sera répétée horizontalement et verticalement pour remplir tout le fond de l'écran. Si votre page est plus grande que l'écran, l'utilisation des ascenseurs fera aussi défiler votre fond d'écran.
Vous pouvez modifier ces paramètres en ajoutant des attributs supplémentaires :
Pour la répétition de l'image: (attribut background-repeat)
>> repeat : Répète l'image horizontalement et verticalement (comportement par défaut)
>> repeat-x : Répète l'image horizontalement
>> repeat-y : Répète l'image verticalement
>> no-repeat : Ne répète pas l'image
Exemple: body {...; background-repeat: repeat-x;...}
Pour le positionnement du fond: (attribut background-position)
>> top : Alignement de l'image avec le haut de la fenêtre
>> center : Alignement de l'image au centre de la fenêtre
>> bottom : Alignement de l'image avec le bas de la fenêtre
>> left : Alignement de l'image avec la gauche de la fenêtre
>> right : Alignement de l'image avec la droite de la fenêtre
Exemple: body {...; background-position: top left;...}
Défilement du fond: (attribut background-attachment)
>> scroll : L'image défile avec la page
>> fixed : L'image est fixe losque la pagé défile.
publié par Fabrice B. dans: Fond du blog
Pour mettre un fond d'écran sur son blog, il faut éditer le CSS.
Mettre un fond d'écran
1. Importez votre image dans vos fichiers (méthode)
2. Allez dans l'onglet Mes fichiers, puis cliquez sur Mes photos.
3. Cliquez sur la loupe pour afficher l'image en grand.
3bis. Faites un clic droit (contrôle-clic sous Mac) sur votre image, allez dans Propriétés, et notez l'adresse URL de votre photo.
Exemple : http://www.over-blog.com/4/3/1234/pics/monimage.jpg
4. Allez dans l'onglet Design, puis sur Modifier le CSS, et décochez la case "Je souhaite modifier moi même le fichier CSS"
5. Dans la première ligne de votre CSS, (qui commence par body), repérez l'attribut background.
6. Remplacez tout le texte commençant par background et finissant au premier point-virgule par background-image : url(collez_l'URL_de_votre_image_ici) ;
7. Vous obtiendrez donc par exemple :
8. Enregistrer votre fichier CSS en cliquant sur Enregistrer.
Mettre un fond d'écran
1. Importez votre image dans vos fichiers (méthode)
2. Allez dans l'onglet Mes fichiers, puis cliquez sur Mes photos.
3. Cliquez sur la loupe pour afficher l'image en grand.
3bis. Faites un clic droit (contrôle-clic sous Mac) sur votre image, allez dans Propriétés, et notez l'adresse URL de votre photo.
Exemple : http://www.over-blog.com/4/3/1234/pics/monimage.jpg
4. Allez dans l'onglet Design, puis sur Modifier le CSS, et décochez la case "Je souhaite modifier moi même le fichier CSS"
5. Dans la première ligne de votre CSS, (qui commence par body), repérez l'attribut background.
6. Remplacez tout le texte commençant par background et finissant au premier point-virgule par background-image : url(collez_l'URL_de_votre_image_ici) ;
7. Vous obtiendrez donc par exemple :
body { margin: 0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: x-small; color: #00000;
background-image: url(http://www.over-blog.com/4/3/1234/pics/maphoto.jpg); }
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: x-small; color: #00000;
background-image: url(http://www.over-blog.com/4/3/1234/pics/maphoto.jpg); }
8. Enregistrer votre fichier CSS en cliquant sur Enregistrer.
Dans votre espace administration, allez dans Configuration.
Puis cliquez sur Gérer le message d'accueil.
Ensuite, décochez la case Activer le message d'accueil (ce message sera affiché avant les articles, sur la page d'accueil de votre blog)
Finalement: validez.
Puis cliquez sur Gérer le message d'accueil.
Ensuite, décochez la case Activer le message d'accueil (ce message sera affiché avant les articles, sur la page d'accueil de votre blog)
Finalement: validez.
publié par Fabrice B. dans: Message d'accueil
Dans votre espace administration, allez dans Configuration.
Puis allez dans Gérer le message d'accueil.
Vous arrivez alors sur une page vous permettant de corriger votre page d'accueil comme un simple article. Après avoir changé le titre ou le message, vous pouvez valider.
Puis allez dans Gérer le message d'accueil.
Vous arrivez alors sur une page vous permettant de corriger votre page d'accueil comme un simple article. Après avoir changé le titre ou le message, vous pouvez valider.
publié par Fabrice B. dans: Message d'accueil
Dans votre espace administration, allez dans Configuration.
Puis allez dans Géer le message d'accueil.
Cochez la case : Activer le message d'accueil (ce message sera affiché avant les articles, sur la page d'accueil de votre blog)
Vous arrivez alors sur une page vous permettant de saisir votre page d'accueil comme un simple article.
Après avoir entré le titre et le message, vous pouvez valider.
Puis allez dans Géer le message d'accueil.
Cochez la case : Activer le message d'accueil (ce message sera affiché avant les articles, sur la page d'accueil de votre blog)
Vous arrivez alors sur une page vous permettant de saisir votre page d'accueil comme un simple article.
Après avoir entré le titre et le message, vous pouvez valider.
publié par Fabrice B. dans: Message d'
Merci à PEUR pour ses explications limpides.
Dans l'onglet Mes fichiers, chaque thumbnail possède maintenant trois boutons:
- 
pour éditer la description de la photo
- 
pour un apercu de la photo
- 
pour supprimer la photo
Le thumbnail et ses trois boutons
Grâce au bouton d'édition, vous pouvez désormais:
- donner un titre plus pertinent que le nom de fichier à vos photos,
- mettre une description de la photo,
- indiquer le nom de l'auteur,
- ainsi qu'un copyright:
La fenêtre d'édition, cliquez pour agrandir
Une fois que vous avez saisis ces informations, au survole du thumbnail apparait une boîte regroupant ces nouvelles informations:
Thumbnail au survole de la souris
Maintenant dans les albums photo de votre blog, l'information "titre" se trouvera au dessus de la photo et l'information "description", en dessous.
publié par Fabrice B. dans: Images et fichiers
Merci à SuperSouris pour l'info:
Vous savez que le malus du blog rank augmente proportionnellement avec le poids de vos images...
Pour ceux qui veulent réduire le poids de leurs images, et qui ne veulent (ou savent) pas passer par un programme, voici un site qui le fait pour vous :
http://www.netmechanic.com/GIFBot/optimize-graphic.htm
Soit vous entrez l'url de l'image, soit vous faites "parcourir" et vous mettez le chemin de la photo sur votre pc
En renseignant les champs suivant, vous aurez droit, gratuitement et instantanément, à l'image en question avec différents taux de compression (dont un taux de 90%)
Vous savez que le malus du blog rank augmente proportionnellement avec le poids de vos images...
Pour ceux qui veulent réduire le poids de leurs images, et qui ne veulent (ou savent) pas passer par un programme, voici un site qui le fait pour vous :
http://www.netmechanic.com/GIFBot/optimize-graphic.htm
Soit vous entrez l'url de l'image, soit vous faites "parcourir" et vous mettez le chemin de la photo sur votre pc
En renseignant les champs suivant, vous aurez droit, gratuitement et instantanément, à l'image en question avec différents taux de compression (dont un taux de 90%)
publié par Fabrice B. dans: Images et fichiers
Comparatif de compression photos. Pour montrer l'interet de la compression d'image, j'ai décidé de choisir une image. (Les graphistes reconnaitront lena ...)
Pour des raisons d'affichage, les images sont toutes affichées en 450x450.
Image convertit en jpeg:
Jpeg (800 x 800): 198 Ko (compression: 100%)
Jpeg (800 x 800): 65 Ko (Compression: 72% - qualité WEB)
Image redimensionnée
Jpeg (450 x 450): 82 Ko (compression: 100%)
Jpeg (450 x 450): 33 Ko (Compression: 72% - qualité WEB)
Vignette over-blog
Bilan: L'image en 450x450 pèse seulement 33 Ko, et la perte de qualité est infime.
Pour des raisons d'affichage, les images sont toutes affichées en 450x450.
Image de départ:
Png (800 x 800): 244Ko.
Image convertit en jpeg:
Jpeg (800 x 800): 198 Ko (compression: 100%)
Jpeg (800 x 800): 65 Ko (Compression: 72% - qualité WEB)
Image redimensionnée
Jpeg (450 x 450): 82 Ko (compression: 100%)
Jpeg (450 x 450): 33 Ko (Compression: 72% - qualité WEB)
Vignette over-blog
Jpeg (100x100): (compression over-blog): 2 Ko
Bilan: L'image en 450x450 pèse seulement 33 Ko, et la perte de qualité est infime.
publié par Fabrice B. dans: Images et fichiers
Pour héberger des gros fichiers, ou des fichiers alors que vous êtes en confiance, il faut aller voir du côté des hebérgeurs gratuit.
Petit tour des "meilleurs" proposés par Avril2
Hébergement de fichiers
Coup de coeur:
hiboox (images 1Mo maximum)
Petit tour des "meilleurs" proposés par Avril2
Hébergement de fichiers
Putfile (images, vidéos ou flash)
RapidShare (limité à 50Mo par fichier)
YouShareit
ZippyVideos (vidéos ou flash)
Image-Dream (images, 1Mo maximum)
Dropload (demande la création d'un compte)
Imghost (image ou flash, 2Mo maximum)
Come2Store
imageshack.us (image ou flash, 1Mo)
Hébergement gratuit
voila.fr
multimania.com
free.fr
Coup de coeur:
hiboox (images 1Mo maximum)
publié par Fabrice B. dans: Images et fichiers
Si vous photos ne s'affichent pas, cela peut venir de 3 choses:
- si elles ne se sont jamais affichées, cela signifie que les noms des images contiennent des caractères spéciaux. Il faut les ré-envoyer SANS caractères spéciaux, et SANS majuscules
- si elles s'affichaient avant, cela signifie que:
> soit vous avez édité votre album photo pour le mettre à jour et vous n'avez pas remis le bon dossier en haut du formulaire.
> soit vous avez supprimé les photos de votre compte. Il faut les ré envoyer et revalider votre album.
> soit une évolution d'over-blog a eu lieu avec un problème pour vous. Il faut mettre à jour l'album (recalculer le thumbail)
- si elles ne se sont jamais affichées, cela signifie que les noms des images contiennent des caractères spéciaux. Il faut les ré-envoyer SANS caractères spéciaux, et SANS majuscules
- si elles s'affichaient avant, cela signifie que:
> soit vous avez édité votre album photo pour le mettre à jour et vous n'avez pas remis le bon dossier en haut du formulaire.
> soit vous avez supprimé les photos de votre compte. Il faut les ré envoyer et revalider votre album.
> soit une évolution d'over-blog a eu lieu avec un problème pour vous. Il faut mettre à jour l'album (recalculer le thumbail)
La gestion des modules consiste à placer les modules comme bon nous semble sur le blog. Pour gérer ses modules, il faut aller dans l'onglet "Modules".
La gestion des modules est un tableau de 2 colonnes:
- celle de gauche montre les modules qui seront à gauche de la zone principale sur le blog.
- celle de droite montre les modules qui seront à droite de la zone principale sur le blog.
- en dessous du tableau sont listés les modules inutilisés.
Icones de gestion
Methodes pratiques
La gestion des modules est un tableau de 2 colonnes:
- celle de gauche montre les modules qui seront à gauche de la zone principale sur le blog.
- celle de droite montre les modules qui seront à droite de la zone principale sur le blog.
- en dessous du tableau sont listés les modules inutilisés.
Icones de gestion
- Pour déplacer un module de la droite vers la gauche: il faut cliquer sur
- Pour déplacer un module de la gauche vers la droite: il faut cliquer sur
- Pour décaler le module vers le bas dans la colonne: il faut cliquer sur
- Pour décaler le module vers le haut dans la colonne: il faut cliquer sur
- Pour supprimer un module de la colonne: il faut cliquer sur
Methodes pratiques
- Pour ne pas avoir une colonne, il suffit de ne pas mettre de modules dans cette colonne.
- Lorsque vous insérez un module liens, texte libre, il n'apparaitront pas tant qu'ils seront vides.
- Pour renommer un module, il faut cliquer sur son titre.
- Pour configurer les modules, il faut cliquer sur l'icone:
publié par Fabrice B. dans: Modules
Il est possible de modifier les modules un par un. Pour cela, il faut utiliser leur code de sélection dans le css.
Exemple:
qui permet de rajouter un fond au module album uniquement.
| Nom du module | Identifiant | Sélecteur CSS |
|---|---|---|
| Album photos | Album | #Album |
| Archives | Archive | #Archive |
| Articles récents | ArticleRecent | #ArticleRecent |
| Calendrier | Calendrier | #Calendrier |
| Catégories | Categorie | #Categorie |
| Commentaires | CommentRecent | #CommentRecent |
| Liens | Lien | #Lien |
| Newsletter | Newsletter | #Newsletter |
| Image Aléatoire | aleaIm | #aleaIm |
| Présentation | Presentation | #Presentation |
| Recherche | Recherche | #Recherche |
| Recommander | Recommander | #Recommander |
| Texte libre (droite) | RightPart | #RightPart |
| Texte libre (gauche) | LeftPart | #LeftPart |
| W3C | W3C | #W3C |
Exemple:
#Album {background-image: url(image.jpg);}
qui permet de rajouter un fond au module album uniquement.
publié par Fabrice B. dans: Modules
Parfois, Texte libre ou Archives ne rendent pas bien dans le blog. Mais on peut parfaitement changer le titre de tous les modules.
Pour cela:
1. Aller dans Modules.
2. Cliquer sur le titre du module à changer.
3. Changer le titre du module.
4. Valider.
Simple comme bonsoir.
Pour cela:
1. Aller dans Modules.
2. Cliquer sur le titre du module à changer.
3. Changer le titre du module.
4. Valider.
Simple comme bonsoir.
publié par Fabrice B. dans: Modules
Le w3c est un groupe d'industriels et de professionnels qui liste des recommandations sur les langages à utiliser pour faire un site (ou un blog).
Sur over-blog, le module w3c permet d'afficher un module contenant des liens indiquant que le blog est bien programmé. Ainsi qu'un lien vers le flux RSS de votre blog.
Sur over-blog, le module w3c permet d'afficher un module contenant des liens indiquant que le blog est bien programmé. Ainsi qu'un lien vers le flux RSS de votre blog.
publié par Fabrice B. dans: Modules
Merci à zoélie pour cet article
Premiere chose a savoir, les contours des modules sont des images , ils ne se traitent donc pas tout a fait comme le reste...
Vous devez donc creer des images sur votre ordinateur avec Photoshop ou The Gimp, de preference en .png . Il en faut pour le bord superieur, le bord inferieur, le bord droit et le bord gauche, et, eventuellement pour les 4 coins. Elles peuvent identiques ou differentes en taille et en apparence.
Deux solutions s'offrent a vous :
-Soit vous creer l'image de la taille exact de vos modules : par exemple, votre module fait 200px en largeur, donc les bords haut et bas devront faire 200px. Ce n'est pas une tres bonne solution, d'une part parce que si la largeur n'est pas bien fixee, chez certains de vos lecteurs, les modules n'auront pas la meme largeur et l'image depassera ou sera trop petite. D'autre part, si vous ajoutez des lignes dans vos modules, la hauteur des bords devra etre modifier a chaque fois (= refaire l'image...).
-Soit vous creer un motif de petite taille (en largeur pour les bords haut et bas et en hauteur pour les bords droite et gauche) qui pourra se repeter a l'infini. Vous n'aurez donc pas le 2 problemes cites ci-dessus, mais ca restreint le choix du design.
Je conseille cependant cette derniere solution, sachant que si vous voulez une image complexe dans votre contour (par exemple un petit schtroumpf...), vous avez la possibilite de mettre celle-ci dans l'image des coins. Les coins (uniques) resteront fixes et l'image de la bordure entre les coins sera un motif repete en nombre variable...
Pour trouver de jolis motifs, Google Images, par exemple, est votre ami... Faire des recherches avec le mot-cle "textures" est efficace aussi.
Pour avoir des formes autres qu'un rectangle pour chaque bord (notament pour le bord haut), vous pouvez telecharger une texture - vous aurez un motif rectangulaire et avec votre logiciel, vous "creusez" dans l'image pour faire le design qui vous plait, en prenant bien soin qu'il soit symetrique, puisqu'il va se repeter...
De meme, c'est la methode pour faire des coins arrondis.
Une fois que vous avez charge toutes vos images de bordures dans vos fichiers Over-Blog, il faut les inserer dans le CSS.
1ere etape :
- Allez dans la partie /* --------- Modules -------- */
au niveau des .box (box designe les modules).
.box-top designe la bordure superieure, .box-bottom :la bordure inferieure, .box-left : le bord gauche et .box-right : le bord droit .
.box-topLeft est le coin superieur gauche, .box-bottomRight est le coin inferieur droit, ...etc
ATTENTION, il ne faut pas modifier le .box (le module dans son ensemble) !
Si vous avez choisi un motif a repeter, vous faites :
- pour les bordures horizontales ( = haut et bas) :
Et idem pour le haut en remplacant tous les bottom par top.
- pour les bordures verticales ( = droite et gauche) :
Idem pour right.
Pour les coins, qui ne se repetent pas, ou si vous avez choisi un motif de la taille du module. vous faites :
Idem pour les 3 autres coins.
2eme etape :
Pour placer correctement vos bordures par rapport au texte contenu dans le module, il faut jouer sur le padding et le margin.
Attention : Le padding d'un .objet est "l'indentation", la marge de ce qu'il y a a l'interieur de l'objet. Le padding est donc un attribut des .box.
Le margin est la marge de l'objet lui-meme. Dans notre cas, ce sera donc un attribut du .box-content.
Le plus simple est d'utiliser le padding-top pour l'emplacement du titre des modules, a mettre dans le .box-top, et le margin pour le texte du module.
- Si vous voulez que le titre du module soit sur l'image du contour, il faudra donc, pour un contour d'une hauteur de 50px, par exemple, mettre un padding de 5px dans .box-top.
- Si vous voulez qu'il soit sous l'image, il faut mettre
padding-top est le decalage par rapport au bord haut du .box (le module dans son ensemble) . Il existe aussi padding-bottom, padding-right et padding-left. Vous pouvez leur donner a chacun une valeur differente.
padding: 0px 5px 10px 5px; est exactement equivalent a, dans cet ordre (sens des aiguilles d'une montre):
padding-top : 0px;
padding-right : 5px;
padding-bottom: 10px;
padding-left: 5px;
Si vous voulez la meme valeur de padding pour chaque cote du texte (n'oubliez pas que le padding dans le .box-top influence le texte contenu), il suffit de mettre padding: xxx px;
- Ensuite, vous placez le texte du module grace au margin dans le .box-content (contenu du module):
Pour voir le resultat enfin de vous fixer les idees :
http://zoelie.over-blog.com/
Premiere chose a savoir, les contours des modules sont des images , ils ne se traitent donc pas tout a fait comme le reste...
Vous devez donc creer des images sur votre ordinateur avec Photoshop ou The Gimp, de preference en .png . Il en faut pour le bord superieur, le bord inferieur, le bord droit et le bord gauche, et, eventuellement pour les 4 coins. Elles peuvent identiques ou differentes en taille et en apparence.
Deux solutions s'offrent a vous :
-Soit vous creer l'image de la taille exact de vos modules : par exemple, votre module fait 200px en largeur, donc les bords haut et bas devront faire 200px. Ce n'est pas une tres bonne solution, d'une part parce que si la largeur n'est pas bien fixee, chez certains de vos lecteurs, les modules n'auront pas la meme largeur et l'image depassera ou sera trop petite. D'autre part, si vous ajoutez des lignes dans vos modules, la hauteur des bords devra etre modifier a chaque fois (= refaire l'image...).
-Soit vous creer un motif de petite taille (en largeur pour les bords haut et bas et en hauteur pour les bords droite et gauche) qui pourra se repeter a l'infini. Vous n'aurez donc pas le 2 problemes cites ci-dessus, mais ca restreint le choix du design.
Je conseille cependant cette derniere solution, sachant que si vous voulez une image complexe dans votre contour (par exemple un petit schtroumpf...), vous avez la possibilite de mettre celle-ci dans l'image des coins. Les coins (uniques) resteront fixes et l'image de la bordure entre les coins sera un motif repete en nombre variable...
Pour trouver de jolis motifs, Google Images, par exemple, est votre ami... Faire des recherches avec le mot-cle "textures" est efficace aussi.
Pour avoir des formes autres qu'un rectangle pour chaque bord (notament pour le bord haut), vous pouvez telecharger une texture - vous aurez un motif rectangulaire et avec votre logiciel, vous "creusez" dans l'image pour faire le design qui vous plait, en prenant bien soin qu'il soit symetrique, puisqu'il va se repeter...
De meme, c'est la methode pour faire des coins arrondis.
Une fois que vous avez charge toutes vos images de bordures dans vos fichiers Over-Blog, il faut les inserer dans le CSS.
1ere etape :
- Allez dans la partie /* --------- Modules -------- */
au niveau des .box (box designe les modules).
.box-top designe la bordure superieure, .box-bottom :la bordure inferieure, .box-left : le bord gauche et .box-right : le bord droit .
.box-topLeft est le coin superieur gauche, .box-bottomRight est le coin inferieur droit, ...etc
ATTENTION, il ne faut pas modifier le .box (le module dans son ensemble) !
Si vous avez choisi un motif a repeter, vous faites :
- pour les bordures horizontales ( = haut et bas) :
.box-bottom { background:transparent url(http://idata.over-blog.com/0/05/85/46/image-bottom.png) repeat-x scroll bottom left; border-left: none 0px; border-right: none 0px; border-top: none 0px; }
Et idem pour le haut en remplacant tous les bottom par top.
- pour les bordures verticales ( = droite et gauche) :
.box-left { background: transparent url(http://idata.over-blog.com/0/05/85/46/image-gauche.png) repeat-y scroll top left; margin:0px; border-right: none 0px; border-bottom: none 0px; border-top: none 0px; }
Idem pour right.
Pour les coins, qui ne se repetent pas, ou si vous avez choisi un motif de la taille du module. vous faites :
.box-topLeft { background:transparent url(http://idata.over-blog.com/0/05/85/46/image-box-top-left.png) no-repeat scroll top left; }
Idem pour les 3 autres coins.
2eme etape :
Pour placer correctement vos bordures par rapport au texte contenu dans le module, il faut jouer sur le padding et le margin.
Attention : Le padding d'un .objet est "l'indentation", la marge de ce qu'il y a a l'interieur de l'objet. Le padding est donc un attribut des .box.
Le margin est la marge de l'objet lui-meme. Dans notre cas, ce sera donc un attribut du .box-content.
Le plus simple est d'utiliser le padding-top pour l'emplacement du titre des modules, a mettre dans le .box-top, et le margin pour le texte du module.
- Si vous voulez que le titre du module soit sur l'image du contour, il faudra donc, pour un contour d'une hauteur de 50px, par exemple, mettre un padding de 5px dans .box-top.
- Si vous voulez qu'il soit sous l'image, il faut mettre
.box-top { background:transparent url(http://fdata.over-blog.com/nofound.png?http://data.over-blog.com/...) repeat-x scroll top left; padding-top: 50px; }
padding-top est le decalage par rapport au bord haut du .box (le module dans son ensemble) . Il existe aussi padding-bottom, padding-right et padding-left. Vous pouvez leur donner a chacun une valeur differente.
padding: 0px 5px 10px 5px; est exactement equivalent a, dans cet ordre (sens des aiguilles d'une montre):
padding-top : 0px;
padding-right : 5px;
padding-bottom: 10px;
padding-left: 5px;
Si vous voulez la meme valeur de padding pour chaque cote du texte (n'oubliez pas que le padding dans le .box-top influence le texte contenu), il suffit de mettre padding: xxx px;
- Ensuite, vous placez le texte du module grace au margin dans le .box-content (contenu du module):
.box-content { background:#BC8F8F; color: #FF3E96; overflow:hidden; padding:0px 5px 10px 5px; /* Ceci est le decalage du texte dans la boite interieure du module .*/ /* Type de la bordure de la boite interne (box-content): none si vous n'en voulez pas */ border-left: solid #FFD375 2px; border-bottom: solid #FFD375 2px; border-top: solid #FFD375 2px; border-right: solid #FFD375 2px; margin: 15px 5px 10px 20px; /* Ceci est le décalage de la boîte intérieure du module (box-content), par rapport au contour que vous venez de créer.*/ (= Decalage de 15px en haut, 5px à droite, 10px en bas et 15px à gauche ) }
Pour voir le resultat enfin de vous fixer les idees :
http://zoelie.over-blog.com/
Les compteurs d'Over-Blog (Pour blogs niveau privilège et confiance) :
Proposé par VGER
Il en existe deux :
Le premier permet d'afficher le nombre de connectés sur la totalité du réseau d'Over-Blog
Sa balise se présente sous cette forme : <!-- counter(global) -->
Le deuxième permet d'afficher le nombre de personnes présente sur votre blog en temps réel.
Sa balise se présente sous cette forme : <!-- counter(current) -->
Prises telle quelle ce n'est ni très explicite pour vos visiteurs, ni très joli (juste les numéros sont affiché)
Voici quelque exemples de codes et de texte (personnalisez les ;) )
(Rappel : Ce code NE DOIT PAS être mis dans le CSS)
Le code :
Ce qui donne :
Il y a actuellement 2129 personnes sur O-B
et le code pour le deuxième :
Ce qui donne :
Il y a 1 personne(s) sur ce blog
Ou ensemble :
Le code :
Il y a actuellement 2129 personnes connectées à Over-Blog dont 1 sur ce blog
Proposé par VGER
Il en existe deux :
Le premier permet d'afficher le nombre de connectés sur la totalité du réseau d'Over-Blog
Sa balise se présente sous cette forme : <!-- counter(global) -->
Le deuxième permet d'afficher le nombre de personnes présente sur votre blog en temps réel.
Sa balise se présente sous cette forme : <!-- counter(current) -->
Prises telle quelle ce n'est ni très explicite pour vos visiteurs, ni très joli (juste les numéros sont affiché)
Voici quelque exemples de codes et de texte (personnalisez les ;) )
(Rappel : Ce code NE DOIT PAS être mis dans le CSS)
Le code :
Il y a actuellement <!-- counter(global) --> personnes sur O-B
Ce qui donne :
Il y a actuellement 2129 personnes sur O-B
et le code pour le deuxième :
Il y a <!-- counter(current) --> personne(s) sur ce blog
Ce qui donne :
Il y a 1 personne(s) sur ce blog
Ou ensemble :
Le code :
Il y a actuellement
<!-- counter(global) --> personnes connectées à Over-Blog dont <!-- counter(current) --> sur ce blog
Ce qui donne : <!-- counter(global) --> personnes connectées à Over-Blog dont <!-- counter(current) --> sur ce blog
Il y a actuellement 2129 personnes connectées à Over-Blog dont 1 sur ce blog
publié par Fabrice B. dans: Compteurs
Comment mettre des compteurs et où et comment placer leurs codes :
(Pour tous les niveaux de blogs [privilège et confiance])
Les compteurs peuvent être mis :
Dans le bas du blog (bas ou pied de page), dans l'entête, dans l'article d'accueil, ou dans un module "texte libre"
N.B. : Le code est à placer en mode Source
Pour le placer en bas ou dans l'entête de votre blog :
"Design" => "Éditer les blocs" => "Éditer le pied de page" (ou : "Éditer l'entête") => dans la fenêtre qui s'ouvre cliquez en haut sur "Source" => collez le code => "Enregistrez" (OK).
Pour le placer dans un module "texte libre" :
"Modules" => module "Texte Libre" (cliquez sur le petit bloc-notes rectangle) => cliquez en haut sur "Source" => collez le code => "Enregistrez" (Ok).
Pour le placer dans la page d'accueil :
"Configuration" => "Gérer votre message d'accueil" => "ajouter/modifier votre message d'accueil" => dans la fenêtre qui s'ouvre cliquez en haut sur "Source" => collez le code => "Enregistrez" (OK).
/! Le code ne se met JAMAIS dans le CSS /!
Compteur gratuit, sans inscription, sans pub facile à installer
(Pour blogs niveau privilège & confiance) :
Vous allez ici : http://support.free.fr/web/pperso/compteur/ pour récupérer les codes
Le code par défaut est :
vous changez [login] par votre surnom, votre prénom (ce que vous avez envie) pour avoir par exemple (ici avec une bordure et l'affichage en vert)
(Rappel : Ce code NE DOIT PAS être mis dans le CSS)
Le code :
<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=[nicknamexemple].dat">
Vous pouvez personnaliser l'affichage (ici rouge):
Le code :
(Pour d'autres codes visitez le site support.free.fr/web/pperso/compteur/)
(Pour tous les niveaux de blogs [privilège et confiance])
Les compteurs peuvent être mis :
Dans le bas du blog (bas ou pied de page), dans l'entête, dans l'article d'accueil, ou dans un module "texte libre"
N.B. : Le code est à placer en mode Source
Pour le placer en bas ou dans l'entête de votre blog :
"Design" => "Éditer les blocs" => "Éditer le pied de page" (ou : "Éditer l'entête") => dans la fenêtre qui s'ouvre cliquez en haut sur "Source" => collez le code => "Enregistrez" (OK).
Pour le placer dans un module "texte libre" :
"Modules" => module "Texte Libre" (cliquez sur le petit bloc-notes rectangle) => cliquez en haut sur "Source" => collez le code => "Enregistrez" (Ok).
Pour le placer dans la page d'accueil :
"Configuration" => "Gérer votre message d'accueil" => "ajouter/modifier votre message d'accueil" => dans la fenêtre qui s'ouvre cliquez en haut sur "Source" => collez le code => "Enregistrez" (OK).
/! Le code ne se met JAMAIS dans le CSS /!
Compteur gratuit, sans inscription, sans pub facile à installer
(Pour blogs niveau privilège & confiance) :
Vous allez ici : http://support.free.fr/web/pperso/compteur/ pour récupérer les codes
Le code par défaut est :
<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=[login].dat">
vous changez [login] par votre surnom, votre prénom (ce que vous avez envie) pour avoir par exemple (ici avec une bordure et l'affichage en vert)
(Rappel : Ce code NE DOIT PAS être mis dans le CSS)
Le code :
<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=[nicknamexemple].dat">
Vous pouvez personnaliser l'affichage (ici rouge):
Le code :
<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=[nicknamexemple].dat&ft=0&dd=b" />
(Pour d'autres codes visitez le site support.free.fr/web/pperso/compteur/)
publié par Fabrice B. dans: Compteurs
Voilà une methode pour mettre de la neige sur les over-blogs.
(Fonctionne en mode privilege et premium, nécessite le mode avancé)
Dans le pied de page, en mode source, vous pouvez coller ce script:
Vous pouvez changer le nombre de flocons, les images, etc, en editant le script (que vous devrez alors hebergez dans vos fichiers.
Merci à Ticman et Kikojo qui ont fait un boulot formidable.
(Fonctionne en mode privilege et premium, nécessite le mode avancé)
Dans le pied de page, en mode source, vous pouvez coller ce script:
<script src="http://ddata.over-blog.com/xxxyyy/0/09/23/80/snow.js" type="text/javascript"></script>
Vous pouvez changer le nombre de flocons, les images, etc, en editant le script (que vous devrez alors hebergez dans vos fichiers.
Merci à Ticman et Kikojo qui ont fait un boulot formidable.
publié par Fabrice B. dans: Gadgets
Favoris - Bookmark - Définition
Il s'agit en fait tout simplement de 'raccourcis' vers des sites web. Tous les navigateurs disposent de cette option (à ma connaissance). Cela permet de ne pas devoir se souvenir de toutes les adresses que l'on connait.
Comment ajouter un favoris?
Deux méthodes:
> soit le site propose un lien, en cliquant, le navigateur ouvre le petit module d'ajout de favoris.
> soit vous ouvrez le petit module vous-même.
Note pour firefox 1.0fr: il faut aller dans Marque-pages, puis marquer cette page (ou Ctrl+D)
Note pour internet explorer: il faut aller dans le menu Favori, puis ajouter aux favoris.
Pourquoi trier les favoris ?
Lorsque l'on a trop de favoris, on ne s'y retrouve plus (à l'heure ou je parle, je dois en avoir environ 600). Donc, le tri est nécessaire. Les navigateurs classiques permettent de les hiérarchiser comme des fichiers (comprendre par là que l'on peut créer une arborescence de répertoire contenant nos favoris)
Comment trier les favoris ?
Cela dépend de votre navigateur.
Pour firefox: Soit vous allez dans Marques-pages > Gérer les marque-pages. A partir de là, vous pouvez glisser déplacer vos Favoris comme bon vous semble.
Soit vous les déplacez directement dans le menu, en les glissant déposant la où vous le souhaitez.
Note pour ces méthodes: je préfère la première pour vraiment faire du tri, mais la seconde suffit pour corriger un défaut ;)
Pour internet explorer: Soit vous allez dans Favoris > Organisez vos Favoris, et de là vous glisser déposer vos favoris comme vous le souhaitez.
Soit vous activez l'onglet Favoris (barre de bouton), et là encore, le glisser déposer est de mise.
Comment créer un lien d'ajout aux favoris ?
Il faut taper ce code (en mode source):
Note: Si l'utilisateur a désactivé le javascript, ce lien ne fonctionnera pas.
Il s'agit en fait tout simplement de 'raccourcis' vers des sites web. Tous les navigateurs disposent de cette option (à ma connaissance). Cela permet de ne pas devoir se souvenir de toutes les adresses que l'on connait.
Comment ajouter un favoris?
Deux méthodes:
> soit le site propose un lien, en cliquant, le navigateur ouvre le petit module d'ajout de favoris.
> soit vous ouvrez le petit module vous-même.
Note pour firefox 1.0fr: il faut aller dans Marque-pages, puis marquer cette page (ou Ctrl+D)
Note pour internet explorer: il faut aller dans le menu Favori, puis ajouter aux favoris.
Pourquoi trier les favoris ?
Lorsque l'on a trop de favoris, on ne s'y retrouve plus (à l'heure ou je parle, je dois en avoir environ 600). Donc, le tri est nécessaire. Les navigateurs classiques permettent de les hiérarchiser comme des fichiers (comprendre par là que l'on peut créer une arborescence de répertoire contenant nos favoris)
Comment trier les favoris ?
Cela dépend de votre navigateur.
Pour firefox: Soit vous allez dans Marques-pages > Gérer les marque-pages. A partir de là, vous pouvez glisser déplacer vos Favoris comme bon vous semble.
Soit vous les déplacez directement dans le menu, en les glissant déposant la où vous le souhaitez.
Note pour ces méthodes: je préfère la première pour vraiment faire du tri, mais la seconde suffit pour corriger un défaut ;)
Pour internet explorer: Soit vous allez dans Favoris > Organisez vos Favoris, et de là vous glisser déposer vos favoris comme vous le souhaitez.
Soit vous activez l'onglet Favoris (barre de bouton), et là encore, le glisser déposer est de mise.
Comment créer un lien d'ajout aux favoris ?
Il faut taper ce code (en mode source):
<a href="javascript:window.external.AddFavorite('http://adresse du site','nom du favori')">Ajouter à vos Favoris</a>
Note: Si l'utilisateur a désactivé le javascript, ce lien ne fonctionnera pas.
publié par Fabrice B. dans: Gadgets
Encore une question traitée - souvent à la volée et de manière superficielle - dans le forum :
Comment insérer une musique dans son blog ?
Réponse par Francisek
Les méthodes se différencient selon que l'on veut faire appel:
Comment insérer une musique dans son blog ?
Réponse par Francisek
Présentation
Il y a plusieurs façon de jouer de la musique sur Internet.Les méthodes se différencient selon que l'on veut faire appel:
- à l'application lecteur multimédia par défaut du visiteur (Windows Media Player, iTunes - QuickTime, RealMedia, WinAmp etc...) qui s'ouvre dans une nouvelle fenêtre.
- au plugin multimédia du navigateur qui affiche ou non un panneau de contrôle dans la page web.
- le type de fichier musical que l'on veut jouer (MP3, AIF, MOV, RAM, etc..).
Je vous conseille de définir le type de fichier dans le code que vousinsérerez(voir les types MIME ci-dessous) - le navigateur du visiteur
- le lecteur multimédia (et le système d'exploitation) du visiteur
Je vous conseille vivement d'héberger vos fichiers musicaux chez un autre hébergeur, afin de laisser la bande passante d'over-blog disponible ;-)
VISITER ABSOLUMENT LES SITES SUIVANTS:
http://technoblog.blogspirit.com/
http://www.photofarfouille.com/article-1034299.html
http://astuceblogmsn.oldiblog.com/
http://www.virtualsined.com/clock/
http://www.francisek.com/article-63219-6.html
http://balise-creation.over-blog.com/
http://oimgg.over-blog.com/article-122066-6.html
Publicité
Partager cet article
Partager cet article
Newsletter
Abonnez-vous pour être averti des nouveaux articles publiés.
|
Toute l'actu en RSS |
||
|
|
||
|
Navigation
Visiteurs actuellement connectés sur Info PC
|
||
 Afficher Info PC sur votre site ou votre blog
|
||
|
Annuaire
|
||
|
Forum
|
||
|
Chat en direct
|
||
|
|
||
|
|
||
Commenter cet article