Les Ficelles d'Anna K. - Aide et astuces pour créer et personnaliser un blog
| Accueil | Publication | Flux RSS | Accès Mobile | Newsletter | Recommander | Contact |
|
|
Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
publié dans : OB - Design et Mise en page
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel de dessin.
Il vous suffira de suivre les indications pour le mettre sur votre blog.
Ce design a été réalisé avec Fire Fox sous résolution 1024*768. Je l'ai vérifié sous résolution 800*600 et 1280*1024 et sous IE.
Ci-dessous, son aspect sous résolution 1024*768. Les colonnes de modules et d'articles font 790px de large.
CHOIX DU DESIGN :
Dans la barre de menu, cliquez sur Design
Puis sélectionnez le thème graphique Pretty in pink en cliquant dessus
J'ai choisi de rester en mode normal : le design sera le même dans toutes les pages et donc un seul CSS.
Cliquez sur Mode avancé (CSS) à droite.
Cochez
Dans mon style, collez le CSS suivant
Si la police ne vous convient pas, effacer ce qui est en rouge ci-dessus.
Enregistrez.
CHOIX DE LA CONFIGURATION
Dans la barre de menu, cliquez sur Configurer
Ensuite, vous gardez l'entête et le pied de page et placez les modules voulus dans la colonne de droite.
PERSONNALISATION :
Vous êtes toujours dans la partie Configurer : cliquez sur le pavé qui représente l'entête (ci-dessus celui où il est écrit designannak) - contenu personnalisé.
Cliquez sur Editer la source
Copiez dans la source
DesignAnnaK : le blog de design OB : remplacez par le titre de votre blog et validez.
Je crois que j'ai fait le tour. Si vous le testez, dîtes-moi ce que ça donne.
Il vous suffira de suivre les indications pour le mettre sur votre blog.
Ce design a été réalisé avec Fire Fox sous résolution 1024*768. Je l'ai vérifié sous résolution 800*600 et 1280*1024 et sous IE.
Ci-dessous, son aspect sous résolution 1024*768. Les colonnes de modules et d'articles font 790px de large.
CHOIX DU DESIGN :
Dans la barre de menu, cliquez sur Design
J'ai choisi de rester en mode normal : le design sera le même dans toutes les pages et donc un seul CSS.
Cliquez sur Mode avancé (CSS) à droite.
Cochez
Dans mon style, collez le CSS suivant
body {margin:0px; padding:0px;font-family: Georgia, Helvetica,Verdana, Arial, sans-serif;
font-size:small;background:url(http://www.casimages.com/img/070328024136428076.gif);
background-attachment:fixed; background-position:center ; }
#global {background:none;width:790px;}
a {text-decoration:none; color:#B05300; font-size:110%;}
a:hover {text-decoration:underline; color:#2A2E20;}
#ln_0{background:none;margin-left:5px;}
#top h1 {padding:0px; margin:0px;}
#top {margin:0px; padding:0px; border:0px none;background:none;}
#footer {margin-top:10px; position:relative; color:#4D5B7F; background-color:transparent;}
#footer p {margin:0px; padding: 10px;}
#cl_1_0{width:570px;}
#cl_1_1 {margin:0px; padding:5px; float:right;}
.beforeArticle {padding:0px 0px 5px 0px; margin:0px; width:100%; color:#2A2E20;}
.article {margin-top:0px; padding:0px; margin-bottom:5px;color:#2A2E20;text-align:justify;border: 1px solid #2A2E20;}
.date {text-align:center;}
.titreArticle {text-decoration:none;color:#768254;}
.titreArticle:hover {text-decoration:underline; color:#4D5B7F;}
.divTitreArticle{text-align:center; }
.afterArticle {color:#768254;}
.topic a { color:#2A2E20; }
.box { margin:0px; padding:0px; margin-bottom:10px;border: 1px solid #2A2E20; }
.box-titre h2 {color:#768254; margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:0px;border: 1px solid #768254; }
.box-titre {padding:0px; text-align:center;}
.box-content {overflow:auto; padding:2px 5px; color:#768254;}
.box-content li {color:#768254;}
.newsletter .box-content {color:#768254;}
.calendarTop1 {color:#768254;}
.calendarHeader1 {color: #768254;}
.calendarToday1 {color:#768254;border: 1px solid #768254; }
.commentMessage {padding:5px; border:1px solid #2A2E20; margin:0px;background-color:#BAC2A6;color:#2A2E20;}
.responseMessage {padding:5px; border:1px solid #768254; margin:0px;background-color:#F6D6BC;color:#768254;}
.commentOption {text-align:right; font-size:90%; color:#768254; margin-bottom:10px;}
.h2commentMessage {color:#768254; }
#formComment {background-color:transparent;border:1px solid #768254; }
#formComment input {background-color:#F6D6BC;border: 1px solid #2A2E20;}
#divRecommander { background-color:transparent; border:1px solid #768254; }
#divRecommander input {background-color:#F6D6BC;border: 1px solid #2A2E20;}
#divNewsletter { background-color:transparent; border:1px solid #768254; }
#divNewsletter input {background-color:#F6D6BC;border: 1px solid #2A2E20;}
background-attachment:fixed; background-position:center ; }
#global {background:none;width:790px;}
a {text-decoration:none; color:#B05300; font-size:110%;}
a:hover {text-decoration:underline; color:#2A2E20;}
#ln_0{background:none;margin-left:5px;}
#top h1 {padding:0px; margin:0px;}
#top {margin:0px; padding:0px; border:0px none;background:none;}
#footer {margin-top:10px; position:relative; color:#4D5B7F; background-color:transparent;}
#footer p {margin:0px; padding: 10px;}
#cl_1_0{width:570px;}
#cl_1_1 {margin:0px; padding:5px; float:right;}
.beforeArticle {padding:0px 0px 5px 0px; margin:0px; width:100%; color:#2A2E20;}
.article {margin-top:0px; padding:0px; margin-bottom:5px;color:#2A2E20;text-align:justify;border: 1px solid #2A2E20;}
.date {text-align:center;}
.titreArticle {text-decoration:none;color:#768254;}
.titreArticle:hover {text-decoration:underline; color:#4D5B7F;}
.divTitreArticle{text-align:center; }
.afterArticle {color:#768254;}
.topic a { color:#2A2E20; }
.box { margin:0px; padding:0px; margin-bottom:10px;border: 1px solid #2A2E20; }
.box-titre h2 {color:#768254; margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:0px;border: 1px solid #768254; }
.box-titre {padding:0px; text-align:center;}
.box-content {overflow:auto; padding:2px 5px; color:#768254;}
.box-content li {color:#768254;}
.newsletter .box-content {color:#768254;}
.calendarTop1 {color:#768254;}
.calendarHeader1 {color: #768254;}
.calendarToday1 {color:#768254;border: 1px solid #768254; }
.commentMessage {padding:5px; border:1px solid #2A2E20; margin:0px;background-color:#BAC2A6;color:#2A2E20;}
.responseMessage {padding:5px; border:1px solid #768254; margin:0px;background-color:#F6D6BC;color:#768254;}
.commentOption {text-align:right; font-size:90%; color:#768254; margin-bottom:10px;}
.h2commentMessage {color:#768254; }
#formComment {background-color:transparent;border:1px solid #768254; }
#formComment input {background-color:#F6D6BC;border: 1px solid #2A2E20;}
#divRecommander { background-color:transparent; border:1px solid #768254; }
#divRecommander input {background-color:#F6D6BC;border: 1px solid #2A2E20;}
#divNewsletter { background-color:transparent; border:1px solid #768254; }
#divNewsletter input {background-color:#F6D6BC;border: 1px solid #2A2E20;}
Si la police ne vous convient pas, effacer ce qui est en rouge ci-dessus.
Enregistrez.
CHOIX DE LA CONFIGURATION
Dans la barre de menu, cliquez sur Configurer
Cliquez sur Mise en page dans la colonne de gauche, tout en bas.
Choisissez une structure 1 colonne modules à droite +1 colonne article à droite
Choisissez une structure 1 colonne modules à droite +1 colonne article à droite
Ensuite, vous gardez l'entête et le pied de page et placez les modules voulus dans la colonne de droite.
PERSONNALISATION :
Vous êtes toujours dans la partie Configurer : cliquez sur le pavé qui représente l'entête (ci-dessus celui où il est écrit designannak) - contenu personnalisé.
Cliquez sur Editer la source
Copiez dans la source
<div style="text-align: right;"><span style="font-size: 8pt;">Design by <a href="http://annak.over-blog.com/" target="_blank">Anna K</a>.</span><br
/></div><br />
<table height="115" cellspacing="1" cellpadding="1" width="780" background="http://www.casimages.com/img/070314020606389302.gif" border="1">
<tbody>
<tr>
<td><br />
<div align="center"><font size="6"><font color="#b05300">DesignAnnaK :<br />
le blog de design OB </font></font></div>
<div align="center"> </div>
</td>
</tr>
</tbody>
</table>
<table height="115" cellspacing="1" cellpadding="1" width="780" background="http://www.casimages.com/img/070314020606389302.gif" border="1">
<tbody>
<tr>
<td><br />
<div align="center"><font size="6"><font color="#b05300">DesignAnnaK :<br />
le blog de design OB </font></font></div>
<div align="center"> </div>
</td>
</tr>
</tbody>
</table>
DesignAnnaK : le blog de design OB : remplacez par le titre de votre blog et validez.
Je crois que j'ai fait le tour. Si vous le testez, dîtes-moi ce que ça donne.
Commentaires
Depuis ce matin: plus de ligne de tél: ils "devaient faire quelque chose" dessus ! ! Nous verrons bien si ça s'améliore ! ! Espérons ! !
bonne fin de journée et mille bisous du pays des pharaons qui eux, n'avaient pas de problème avec Internet ! ! lol ! ! ! !
@nne-marie
@nne marie Bonsoir,
J'ai essayé votre méthode (cahier pretty) qui pour mon blog n'as pas fonctionné, je ne sait pas où je me suis trompé à moins que les changement ne soient opérés que le lendemain, pour l'instant je n'ai que le titre du blog qui a changé de désign.
merci beaucoup d'aider les débutants comme moi et je vous encourage à continuer.
Meilleurs salutations
PS je viens régulièrement sur votre site pour piocher des astuces.
J'ai essayé votre méthode (cahier pretty) qui pour mon blog n'as pas fonctionné, je ne sait pas où je me suis trompé à moins que les changement ne soient opérés que le lendemain, pour l'instant je n'ai que le titre du blog qui a changé de désign.
merci beaucoup d'aider les débutants comme moi et je vous encourage à continuer.
Meilleurs salutations
PS je viens régulièrement sur votre site pour piocher des astuces.
commentaire n° : 3 posté par : ROBERT (site web) le: 06/11/2007 20:03:13
Bonjour Robert, le résultat apparaît sur ton blog. OB est un peu lent en ce moment. Je peux le mettre en lien dans l'article ou tu ne préfères pas ?
Je passe aussi sur ton site. Toutes mes pensées.
Je passe aussi sur ton site. Toutes mes pensées.
réponse de : Anna K (site web) le: 07/11/2007 16:29:00
Bonjour,
Effectivement ce jour tout le reste de mon blog à été paramétré et je vous en remercie encore, continuez votre esprit d'altruisme c'est une qualité tellement rare de nos jours! je suis persuadé qu'il y aura un retour bénéfique pour vous.
Bravo pour votre aide et encore merci.
Amicalement,
robert
Effectivement ce jour tout le reste de mon blog à été paramétré et je vous en remercie encore, continuez votre esprit d'altruisme c'est une qualité tellement rare de nos jours! je suis persuadé qu'il y aura un retour bénéfique pour vous.
Bravo pour votre aide et encore merci.
Amicalement,
robert
commentaire n° : 4 posté par : martin (site web) le: 07/11/2007 16:35:41
Bonjour Anna,
J'ai essayé, en mettant le desing requit "pretty.pink.." et j'ai fait un copier du design 8 -Orange-largeur FIxe,que j'adore avec son effet cahier, et je n'obtient pas le résultat voulu
Je crois que j'ai un mixe avec mon précedent disign qui était "seasons ice..."(quelque chose comme ça)
Merci pour votre aide.
Myricoud
J'ai essayé, en mettant le desing requit "pretty.pink.." et j'ai fait un copier du design 8 -Orange-largeur FIxe,que j'adore avec son effet cahier, et je n'obtient pas le résultat voulu
Je crois que j'ai un mixe avec mon précedent disign qui était "seasons ice..."(quelque chose comme ça)
Merci pour votre aide.
Myricoud
commentaire n° : 5 posté par : myricoud (site web) le: 13/01/2008 09:06:44
Réponse chez toi
réponse de : Anna K (site web) le: 13/01/2008 10:35:08
re coucou Anna,
suite au commentaire, j'avais fais un autre essai auparavant donc j'obtiens l'essai d'avant plus mon ancien desing oup! confuse!
suite au commentaire, j'avais fais un autre essai auparavant donc j'obtiens l'essai d'avant plus mon ancien desing oup! confuse!
commentaire n° : 6 posté par : myricoud (site web) le: 13/01/2008 10:31:28
C'est rien :)
réponse de : Anna K (site web) le: 13/01/2008 10:37:36
Rere moi,
Merci Anna pour être passée sur mon blog, mais j'aime bien celui-ci avec ces 2 spirales, et je n'arrive pas à le modifier, si l'erreur et jolie je ne l'ai pas fait expres. Amitiés
Merci Anna pour être passée sur mon blog, mais j'aime bien celui-ci avec ces 2 spirales, et je n'arrive pas à le modifier, si l'erreur et jolie je ne l'ai pas fait expres. Amitiés
commentaire n° : 7 posté par : myricoud (site web) le: 13/01/2008 12:24:43
Publicité
Présentation
: Les ficelles d Anna K.
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
Recherche Rapide Sur le Site
Sommaires
Déco Halloween
Déco Automne
Dernières Astuces
-
Privilège - Afficher une liste de tags - Jiglu
Jiglu s'installe sur votre site afin de créer automatiquement des balises intelligentes et des...
-
Créer une bannière avec des images de Flickr
Un générateur sans prétention, mais qui peut animer vos articles. Il s'agit de...
-
Design 32 - Orange - Halloween - largeur fixe
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel...
-
Privilège - Créer des infobulles avec Prototip
Une infobulle est une bulle explicative qui apparaît au survol d'un mot. Je vous préviens,...
-
Privilège - S'inscrire à Google Analytics
Vous vous êtes inscrit à Google SitMaps, vous pouvez maintenant profiter des fonctions de Google...
-
Ajouter un bouton avec flux RSS sur votre blog
Sur Over-Blog, vous avez déjà le module Syndication qui peut-être utilisé pour communiquer vos...
-
Privilège - Ajouter un outil de recherche sur votre blog - Rollyo
Rollyo vous offre la possibilité de rechercher le contenu d'une liste définie de sites Web, vous...
-
Localiser vos visiteurs
Un nouveau service pour localiser vos visiteurs : GLOBETRACKR Inscrivez-vous, en cliquant...
-
Design 28 - Beige nounours - largeur fixe
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel...
-
Privilège - Installer une icône avec le nombre de liens Technorati
Technorati recense tous les liens qui pointent vers votre blog. Vous copiez ce code en...
Commentaires
-
14/10/2008 10:38:13Design 37 - Beige - Parchemin - largeur fixepetite fleur
-
14/10/2008 10:18:02Design 37 - Beige - Parchemin - largeur fixepetite fleur
-
14/10/2008 07:33:32V2 - Récapitulatif : changer les puces du module Articles récentsBoobalechat
-
13/10/2008 17:09:07Créer une bannière avec des images de Flickrmamy annick
-
13/10/2008 14:36:25Créer une bannière avec des images de Flickr@nne marie
Publicité
Coin Rencontre
Espace Connexion Internet
Achetez sur le Net!
| Les Ficelles sur votre blog | L'Univers des Ficelles | Utilitaires |
|
Bonne soirée gros bisous :)