Suivre ce blog
Administration Créer mon blog
27 août 2010 5 27 /08 /août /2010 07:54
Bonjour, nous sommes le



Les ficelles d'Anna K ont déménagé sur Blogspot:

 

Les Nouvelles Ficelles d'Anna K

 

 

Pensez à mettre à jour vos favoris et vos liens.

 

Retrouvons-nous sur  Les Nouvelles Ficelles d'Anna K avec des articles mis-à-jour et regroupés pour encore plus d'astuces 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...

et

  • Nouveau : créer un blog sur Blogger

 

Partager cet article

Published by Anna K
commenter cet article
19 août 2010 4 19 /08 /août /2010 00:22

Sous FF, les flêches suivent le défilement de la page et permettent de monter et de descendre quelle que soit la position dans la page
Sous IE, les flêches restent en bas et permettent de remonter.

Collez en mode source/HTML du pied de page

<div align="right" style="position: absolute; width: 325px;" id="divStayBottomLeft"><a href="javascript:scroll(0,0)" title=" haut de page "><img width="14" vspace="0" hspace="0" height="9" border="0" src="http://www.casimages.com/img/gif/07090701043862651176718.gif" alt=" fleche haut " /></a><br />
<a href="javascript:scroll(0,40000)" title=" bas de page "><img width="14" vspace="0" hspace="0" height="9" border="0" src="http://www.casimages.com/img/gif/07090701040762651176712.gif" alt=" fleche bas " /></a></div>
<script type="text/javascript">
function JSFX_FloatBottomLeft()
{
var startX = 10, startY = 50;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
return el;
}
window.stayBottomLeft=function()
{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
fblObj.y += (pY - startY - fblObj.y)/8;
fblObj.sP(fblObj.x, fblObj.y);
setTimeout("stayBottomLeft()", 40);
}
fblObj = ml("divStayBottomLeft");
stayBottomLeft();
}
JSFX_FloatBottomLeft();
</script>


width: 325px : la distance à partir de la gauche du blog pour positionner les flêches

http://www.casimages.com/img/gif/07090701043862651176718.gif est l'adresse de la flêche vers le haut


http://www.casimages.com/img/gif/07090701040762651176712.gif est l'adresse de la flêche vers le bas



J'ai mis ce script en mode source de cet article, vous devriez voir les flêches entre les modules et la colonne des articles
 fleche haut
 fleche bas

Partager cet article

Published by Anna K - dans Archives
commenter cet article
22 juillet 2010 4 22 /07 /juillet /2010 06:43

Ce qui permet de bien distinguer les groupes commentaire/réponse.

Dans le CSS adéquat, vous rajoutez la ligne suivante

.responseOption {padding-bottom:50px; background-image:url(http://www.casimages.com/img/gif/0707110416256265840768.gif); background-repeat:no-repeat; background-position:bottom center;}


padding-bottom:50px : vous créez une marge en bas de la hauteur de votre image
background-image:url(http://www.casimages.com/img/gif/0707110416256265840768.gif) : adresse de votre image
background-repeat:no-repeat : vous demandez que cette image ne soit pas répétée
background-position:bottom center; vous centrez l'image en bas au centre

Vous obtenez

Partager cet article

Published by Anna K - dans Archives
commenter cet article
14 juillet 2010 3 14 /07 /juillet /2010 07:44

Des thèmes WordPress ou Blogger adaptés pour OverBlog par 4 passionnés de design, CSS et HTML :

  • Anna K - les ficelles d'Anna K - Aide pour créer et personnaliser un blog
  • Mam'zelle Bégonia - Begonia est une pipelette. Raconter sa vie et donner son avis sur tout à son entourage fatigué de ses élucubrations ne lui suffisait plus, alors elle a décidé de bloguer !
  • Booba le chat : tout sur les chats et même plus !
  • Denis : Sa vraie vie à Paris : son cadre de vie,  ses quelques pensées, ses bonnes adresses, ses voyages, ses impressions... Ces choses de la vie

Du choix !

Abstrait

Art

Animal

Education

Girl

Journal Intime

Nature

Sport

Une installation simple et rapide ! Il vous suffit de copier/coller le CSS du design qui vous plaît.

 

Retrouvez-nous sur Templates for OverBlog

Partager cet article

8 juillet 2010 4 08 /07 /juillet /2010 07:52

Vous êtes en confiance, vous n'avez pas la possibilité de réaliser un menu déroulant en javascript ou vous êtes en Privilège/Premium et vous n'avez pas envie de vous lancer là-dedans.

 

Le but de cet article est donc de vous donner des idées de classement. Si l'ordre de vos articles est anarchique, il y a peu de chance que vos visiteurs fassent l'effort de chercher ce qui les intéresse.


PREMIERE ETAPE :

 

Vous allez dans Configurer

adminv2.gif

Mise en Page

adminv2config.gif

Vous cliquez sur la représentation schématique de votre article, le petit marteau en haut à droite

schemablog.gif

et vous demandez un classement de vos articles, du plus ancien au plus récent.


2EME ETAPE :

 

Vous créez un article dont la date sera antérieure à la date du plus ancien article de cette catégorie.

Vous le nommez sommaire et vous le complétez :

- en commençant par une courte description de cette catégorie

- ensuite, en créant, un tableau que vous compléterez à chaque création de page

 

Page Titre
1 Sommaire
2 Blabla

 

Si vous prévoyez uen grande quantité d'articles dans cette catégorie, il est préférable de mettre en lien, dans le titre de l'article, son URL. Ce qui permettra au visiteur d'y arriver plus rapidement qu'en cliquant sur le menu chiffré en haut des articles.


RESULTAT :

 

Quand le visiteur cliquera sur la catégorie dans le module, il arrivera directement à cette première page et aura une vue d'ensemble. 

Un exemple : sur la Déco d'Anna K. en page d'accueil, le module Sommaire à droite (qui est donc, en fait, le module Catégorie)

Si vous voulez que vos articles récents soient mis en valeur, il y a le module articles récents qui peut être utilisé à cette fin.

Partager cet article

Published by Anna K - dans Archives
commenter cet article
29 juin 2010 2 29 /06 /juin /2010 06:12

Nous avons vu qu'il existait diverses formes de curseur (article)
Nous allons maintenant voir qu'il est possible d'associer plusieurs curseurs sur un blog.

ASSOCIER UN CURSEUR CLASSIQUE A UN CURSEUR SOUS FORME D'IMAGE

Supposons que vous ayez un curseur sous forme d'image dans tout le blog.

Vous l'avez placé ainsi dans le CSS :
body    {cursor:URL(http://chezpasglop.ifrance.com/cur/baguette01.cur);}

Vous constatez alors qu'il rend impossible le clic sur les liens des modules, vous décidez pour faciliter la manoeuvre de mettre un curseur classique sous forme de croix (ou autre forme que vous retrouverez dans cet
article) dans les modules. Vous allez dans le CSS, vous rajoutez :

.box  {cursor:crosshair;}

Vous pouvez faire la même opération dans les articles

.article  {cursor:crosshair;}

dans l'entête (si votre menu s'y trouve)

#top  {cursor:crosshair;}

Le principe est extensible à l'infini ou presque. Sachant que le curseur classique se trouvant dans les modules peut être différent du curseur classique se trouvant dans les articles (comme nous le verrons plus bas).

ASSOCIER UN CURSEUR IMAGE ET UN CURSEUR DEFILANT

Supposons que vous ayez un curseur sous forme d'image dans tout le blog.

Vous l'avez placé ainsi dans le CSS :
body    {cursor:URL(http://chezpasglop.ifrance.com/cur/baguette01.cur);}

Vous désirez lui rajouter un curseur défilant sur l'ensemble du blog, vous allez rajouter en HTML de l'entête le code javascript nécessaire à cet effet.

Si vous voulez ce curseur défilant seulement sur une seule page, vous rajouterez le code javascript en HTML d'un seul article. Sachant que dans un autre article, vous pourrez rajouter un autre code javascript pour un autre curseur.

Pour voir un exemple (
ICI) et trouver des codes (ICI). Ces curseurs défilants, je vous le rappelle, ne se voient que sous IE et ne sont pas utilisables par les blogs en confiance.

ASSOCIER UN CURSEUR CLASSIQUE ET UN CURSEUR DEFILANT

Le principe est le même que ci-dessus.

Supposons que vous ayez un curseur classique dans tout le blog.

Vous l'avez placé ainsi dans le CSS :
body    { cursor:crosshair;  }

Vous désirez lui rajouter un curseur défilant sur l'ensemble du blog, vous allez rajouter en HTML de l'entête le code javascript.

Si vous ne voulez ce curseur défilant que sur une seule page, vous rajouterez le code javascript en HTML d'un seul article. Sachant que dans un autre article, vous pourrez rajouter un autre code javascript pour un autre curseur.

ASSOCIER 2 CURSEURS CLASSIQUES

Supposons que vous ayez un curseur classique dans tout le blog.

Vous l'avez placé ainsi dans le CSS :
body    { cursor:crosshair;  }

Vous constatez qu'il rend difficile le clic sur les liens des modules, vous décidez alors pour faciliter la manoeuvre de mettre un curseur classique sous forme de main (ou autre forme que vous retrouverez dans cet
article) dans les modules. Vous allez dans le CSS, vous rajoutez :

.box  {cursor:hand; }

Vous pouvez faire la même opération dans les articles

.article  {cursor:hand; }

dans l'entête (si votre menu s'y trouve)

#top  {cursor:hand; }

ASSOCIER 2 CURSEURS IMAGES

Supposons que vous ayez un curseur sous forme d'image dans tout le blog. Il se nomme IMAGE1.cur

Vous l'avez placé ainsi dans le CSS :
body    { cursor:URL(http://IMAGE1.cur); }

Vous désirez mettre un autre curseur dans les modules. Vous rajoutez dans le CSS :

.box  { cursor:URL(http://IMAGE2.cur); }

Vous pouvez faire la même opération dans les articles

.article  {cursor:URL(http://IMAGE3.cur);  }

dans l'entête 

#top  {cursor:URL(http://IMAGE4.cur);  }

2 CURSEURS IMAGES DIFFERENTS EN ACCUEIL ET ARTICLE

Cette fois-ci, nous allons utiliser les 2 CSS Accueil et Article. Il faut donc être passé en Mode Avancé.

Dans le CSS Accueil, il faut compléter :

body    { cursor:URL(http://IMAGE1.cur); }

Dans le CSS Article :

body    { cursor:URL(http://IMAGE2.cur); }

Sachant que le curseur peut être un curseur classique aussi et que dans chaque CSS, vous pouvez mettre à nouveau plusieurs curseurs différents dans les modules, articles, entête....

Partager cet article

Published by Anna K - dans Archives
commenter cet article
25 juin 2010 5 25 /06 /juin /2010 06:00

Il faut aller dans le mode source/HTML (comment ?) de l'article concerné, au cas par cas, et y coller au début le pavé suivant :

 

<style type="text/css">

.publishedBy { display:none; }

</style>

Partager cet article

Published by Anna K - dans Archives
commenter cet article
16 mai 2010 7 16 /05 /mai /2010 06:00

Recommander

 

Vous allez dans le CSS
.recommander .box-titre h2 span représente le titre du module Recommander.
Pour centrer le titre, vous rajoutez
.recommander .box-titre h2 span{text-align : center ; }
Pour changer la couleur, vous rajoutez
.recommander .box-titre h2 span{color:red; }
 
Pour le mettre en gras, vous rajoutez
Les titres des modules sont en gras a priori, c'est seulement au cas où vous auriez enlevé le gras 
.recommander .box-titre h2 span{font-weight:bold; }
Pour enlever le gras
.recommander .box-titre h2 span{font-weight:normal; }
 
Pour le souligner
.recommander .box-titre h2 span{text-decoration:underline; }
Pour enlever le soulignement
.recommander .box-titre h2 span{text-decoration:none; }
Pour changer sa taille
recommander .box-titre h2 span{font-size: 20px; }
Pour le mettre en italique
.recommander .box-titre h2 span{font-style:italic; }
Pour changer la police
.recommander .box-titre h2 span{font-family: Comic Sans MS ;}

Partager cet article

Published by AnnaK - dans Archives
commenter cet article
16 avril 2010 5 16 /04 /avril /2010 04:33

Votre ascenseur est initialement bleu, vous souhaitez qu'il soit en harmonie avec votre fond. Changeons alors la couleur de l'ascenseur.

 

Pour cela, il faut se rendre sur le site ATELIER WEB ZONE


Pas d'affolement, les différentes parties de l'ascenseur sont écrites en anglais...regardez le dessin, cela sera tout de suite plus explicite.

 

Bon j'avoue, j'ai un peu choisi les couleurs à la va-vite. Elles devraient être à dominante rose-mauve.

 

Je génère le code. J'obtiens :

<STYLE type="text/css">
BODY {
SCROLLBAR-HIGHLIGHT-COLOR: ##6600F;
SCROLLBAR-SHADOW-COLOR: #FF99CC;
SCROLLBAR-FACE-COLOR: ##CC33C;
SCROLLBAR-3DLIGHT-COLOR: #FF99FF;
SCROLLBAR-ARROW-COLOR: #FFCCFF;
SCROLLBAR-TRACK-COLOR: #FF00FF;
SCROLLBAR-DARKSHADOW-COLOR: #FF66FF;
}
</STYLE>

que je colle en mode source/html tout à la fin de l'article.

 

Le petit piège (enfin pour moi, ça en a été un) est qu'il faut ignorer

- <head>

- </head>

Ne pas en tenir compte.

 

Vous remarquerez que les autres ascenceurs de votre page ont changé de couleur dans le même temps.

Le changement de couleur se voit sous IE et non sous FF

Partager cet article

Published by AnnaK - dans Archives
commenter cet article
15 avril 2010 4 15 /04 /avril /2010 04:32

Vous reprenez l'explication de le CSS en question comme pour un ascenseur dans un article

 

2 pièges à éviter :


1)  il faudra sans doute prendre une largeur inférieure sinon votre module va élargir la colonne.

Rappel : width est la largeur

height est la hauteur

 

2) vous pouvez trouver que l'ascenseur empiète sur le titre du module

vous rajoutez alors MARGIN-TOP: 30px;

 

Un exemple :

 

<div style="margin-top:30px; height: 100px; width: 191px; overflow: auto;">Ici votre article</div>

Partager cet article

Published by AnnaK - dans Archives
commenter cet article