Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

3 février 2010 3 03 /02 /février /2010 09:57

Créer un site ou un blog est sans doute le plus facile, mais ce site internet ne sera utile que si les moteurs de recherche l’indexent et que les internautes lors de leurs recherches puissent « tomber » dessus.

 

Il y a peut-être autant de méthodes de référencement qu’il existe de webmaster et chacun a ses astuces et ses modes d’opération. Voici des pistes à explorer… et bien sûr je ne prétends pas que seules ces solutions existent, mais c'est un début !

 

 

A - pour un blog ou un site internet : les actions communes

 

 

- l'hébergement :

Privilégier un hébergement en France si vous souhaitez que votre site ou votre blog soit pris en compte dans les résultats de recherche en français. Ca peut paraître étrange, la langue n'est pas la seule à être prise en compte.

 


- le contenu :

- il faut des titres clairs et précis pour les en utilisant des mots clés. Si vous parlez de mode, il vaut mieux titrer votre article ainsi « les nouvelles tendances en leggins, 2010 sera beige » plutôt que « ma dernière balade dans les boutiques »

- ne pas hésiter – je dirais même abuser – des balises title (titre) pour les liens

- abuser aussi des attributs title (donne une info bulle au passage de la souris) et alt pour les images (ce texte apparait avant que l’image soit chargée ou si elle ne se charge pas)

<img title=”mon titre pour le référencement" src="http://monimage.jpg" alt="la description de mon image">

- mettre des liens (avec parcimonie) au sein de ses propres articles qui pointent vers l’article lui-même ou d’autres articles de son blog.

- éviter le duplicate-content. Ne pas mettre plusieurs fois le même contenu sur un blog et éviter que ce contenu se retrouve ailleurs sur le web (éviter paperblog et ses petits frères…)

inserer-lien.jpg

Si nécessaire, vous pouvez consulter l'article : insérer ou modifier un lien sur over-blog 

 

 

- la navigation :

Il est fortement conseillé de faire une navigation claire et précise qui pointe vers la totalité du contenu du blog. Faire un sommaire, des menus, indexer les catégories en page d’accueil est sans doute une très bonne idée.

 

 

- les liens retours :

Il est nécessaire que des sites internet ou des blogs pointent vers votre site. Ca permet aux moteurs de recherche de revenir vers vous plus souvent et de comprendre que vous faites « autorité » sur le net.

 

 

- Les nuages de tags :

Créer un nuage de tags permet de multiplier les liens de votre blog et aider au référencement. Il en faut pas que le nuage de tag ne soit que joli, il faut aussi qu’il apporte des liens : http://www.referencement-page1.fr/tag-cloud/tag,cloud.php

 

 

 

 

B - Les actions spécifiques à un blog :

Il y une première différence qui vient en premier lieu de l’hébergeur. Certains hébergeurs de blog ne se soucient guère du référencement. Pour les utilisateurs d’Over-blog, c’est une bonne nouvelle : over-blog est un des meilleurs dans ce domaine. Mais si vous voulez être incontournable sur le net, ça ne suffit pas…

 

 

- les moteurs de recherches pour blog :

C’est fortement conseillé de s’inscrire sur genre de moteurs, en voici une petite liste :

Google blog

Blog traffic

Retronimo

Technorati

Pour un blog professionnel uniquement

Tout le monde en blogue

Blognautes

 

 

- un coup de ping

A chaque nouvelle publication, il est intéressant de faire un coup de ping, c'est pour que votre nouvel article soit directement transmis aux moteurs de recherche. Ainsi, par exemple pour ce blog, dès que j'aurais publié cet article je ferai un ping et mon article sera positionné en moins de 10 minutes dans google.

pingomatic

bpinger

 

 

- Les spécificités des blogs over-blog :


Il y a deux outils intéressant dans over-blog pour le référencement : l’insertion des clés google-tools et yahoo-site explorer.

cles.jpg

Suivez ces liens et inscrivez votre blog, choisissez l’option vérification par meta-tag et collez le code dans les cases de votre administration over-blog, configurer, options globales, référencement.

 

 

- le flux RSS :

Pour en savoir plus, vous pouvez lire cet article : les flux, RSS, atom, RDF

Ils sont nécessaires !

 

 

 

C- Les incontournables pour un site internet :


- un plan de site accessible

Une sorte de sommaire construit sur l’architecture de votre site avec les liens en url absolu

 

- un sitemap

Presque identique au premier, mais dans un codage spécifique. Voici un générateur de sitemap ici

 

- Soumettre le sitemap

Google

Yahoo

 

- inscription manuelle dans les annuaires généralistes et thématiques

weborama

bonweb

noogle

ousurfer

En voici quelques uns et la liste est loin d’être exhaustive. Essayez de ne choisir que des annuaires de qualité et surtout évitez de vous inscrire sur ces sites trop rapidement, étalez dans le temps.

 

- les meta tags :

Soigner les meta tags est fortement conseillé.

Ici vous trouverez un générateur en ligne de meta tags.

 

 

Et la patience…. mais surtout tisser un réseau naturel entre sites et blogs !!!!

Vous pouvez aussi lire le livre de Olivier Andrieu "Réussir son référencement sur le web" éditions Eyrolles, voir ici.

 

Published by Christelle Vinsonneau - dans webdesign
commenter cet article
31 janvier 2010 7 31 /01 /janvier /2010 11:24

Je propose sur ce blog des CSS complets gracieusement avec différentes thématiques. Quand j’ai le temps, j’en dépose des nouveaux.

Mais je reçois de plus en plus de mails me demandant de réaliser des CSS complets personnalisés sur commande.

 

 

 

Alors aujourd’hui je poste cet article pour vous expliquer comment procéder :

 

- vous souhaitez un template en CSS complet pour votre blog et il est disponible gratuitement sur http://photo.graph.over-blog.com, vous m’envoyez un e-mail à cette adresse : cphoto.graph@gmail.com et dans des délais variés (selon mes disponibilités) vous le recevrez par mail. J’apprécie d’ailleurs un lien en dur en retour vers mon blog.

 

- vous souhaitez un blog personnalisé, la création d’un site internet, une e-boutique, une demande particulière en webdesign ou référencement, allez sur mon site professionnel : http://www.awerpi.fr consultez les pages pour trouver votre bonheur et contactez-moi à cette adresse : contact@awerpi.fr et je vous répondrai très rapidement.

 

http://ddata.over-blog.com/1/46/60/50/awerpi/icone--banniere/icone-awerpi.jpg

 

Published by Christelle Vinsonneau - dans webdesign
commenter cet article
23 janvier 2010 6 23 /01 /janvier /2010 08:15

Peut-être qu’il fait commencer par le début : comment modifier son css dans over-blog ?

 

Il suffit d’aller dans l’administration d’over-blog, de cliquer sur « design » et de choisir un design au css modifiable.

modifier1.jpg

Ensuite, il y a deux possibilités :

- soit vous modifiez seulement les couleurs et polices de caractères et vous pouvez utiliser l’interface qu’over-blog laisse à votre disposition en cliquant ici sur « personnaliser mon thème »

- soit vous modifiez vous-même la feuille de style en cliquant sur « mode css »

 modifier2.jpg

La première solution est suffisamment simple (et très restreinte) pour ne pas à donner davantage d’explications, alors nous allons nous attarder sur la deuxième option : le mode css

 

Lorsque vous cliquez sur « mode css », vous arrivez par défaut sur la feuille de style du design actuel prédéfinit. Vous pouvez copier ce code et faire les modifications en partant de celui-ci. Mais ce n’est pas dans cet onglet que vous pourrez apporter et enregistrer vos modifications.

modifier3.jpg

Il faut aller sur l’onglet suivant « mon style ». Vous allez pouvoir modifier votre css à loisir dans cette page.

modifier4.jpgmodifier4.jpg

N’oubliez pas d’enregistrer (il est conseillé de faire une sauvegarde de votre code css initial afin de pouvoir revenir à quelques chose de propre si vous vous perdez dans les modifications. Pour cela rien de plus simple, vous sélectionnez le code, vous le copiez, vous le collez dans le bloc note ou dans un logiciel de traitement de texte et vous l’enregistrez).

modifier5

Pour vérifier les modifications apportées au style de votre blog, retournez à son adresse et actualisez la page (avec la touche F5).

 

 

Published by Christelle Vinsonneau - dans webdesign
commenter cet article
7 janvier 2010 4 07 /01 /janvier /2010 10:50

Je reçois des questions par commentaires, par formulaire de contact, par mail aussi. Il y a peu j’ai reçu la question suivante : comment personnaliser ses modules ?

 

Je me suis dis : « et bien il suffit de suivre la méthode exposée dans l’article correspondant » et c’est là que je me suis aperçue que je n’avais jamais fait cet article alors que j’en étais persuadée.

 

Alors aujourd’hui, je comble ce trou : voici comment personnaliser un (ou tous) ses modules.

 

 

Pour commencer voici toutes les classes du module :

 

.box

C’est la classe générale de tout le module

 

.box a

Concerne les liens des modules non survolés par la souris

 

.box a:hover

Concerne les liens des modules survolés par la souris

 

.box-content

Les textes contenus dans les modules

 

.box-content ul

Les listes présentent dans les modules

 

.box-content ul li

Les puces des listes dans les modules

 

.box-titre

Concerne la cellule qui contient le titre du module

 

.box-titre h2

Concerne le texte du titre du module

 

.box-footer

Concerne le pied du module

 

 

box-module

 

 

Et maintenant, un petit exemple :

Je veux que mes modules soient encadrés d’une bordure épaisse en pointillés de 3px de couleur blanche et qu’il y ait une image en arrière plan sur un fond noir. Je veux que le texte à l’intérieur des modules soit écrit en rouge, en arial en 13px avec un espace de 3px sur les côtés pour éviter qu’il touche ma bordure blanche en pointillés et que mes liens soient en blanc et que survolés par la souris ils soient soulignés. Je veux que mes puces soit jaunes et rondes, que les liens présents dans les modules soient bleu et que quand je passe ma souris ils deviennent noir. Je veux que mon titre ait une autre image en fond présente en haut à droite qu’une fois et donc qui ne se répète pas et que mon titre soit écrit en blanc, en majuscule et soit souligné et pour terminer, je veux que mon pied de module fasse 10 px de hauteur et qu’il contienne une troisième image répétée en largeur.

 

 

 

 

Ce qui fait :

 

 

.box {border : 3px dashed #FFFFFF ; background: #000000 url(http://monimage.jpg);}

.box a {color :#FFFFFF ;}

.box a:hover {text-decoration:underline;}

.box-content {color :#FF0000; font-family:arial ; font-size :13px ; padding :3px ;}

.box-content ul li {list-style-type:disc; color:#FFFF00;}

.box-titre { background: #000000 url(http://monimage2.jpg) no-repeat top right;}

.box-titre h2 {color:FFFFFF; font-variant: small-caps; text-decoration:underline;}

.box-footer { background: #000000 url(http://monimage3.jpg) background-repeat : repeat-x;}

 

 

C'est article peut aussi vous intéresser : Dissocier les modules over-blog

Published by Christelle Vinsonneau - dans webdesign
commenter cet article
5 janvier 2010 2 05 /01 /janvier /2010 08:41

Il était temps que je m’y penche… !

Voici comment personnaliser les formulaires moches d’over-blog : « commentaire » et « recommander ».

 

Puisqu’un bon schéma vaut mieux qu’un long discours :

formulaires-commentaire-recommander.jpg

 

 

 

Voici les classes concernées :

 

.diablog

- concerne toute la fenêtre de commentaire et de recommandation, sauf les pieds où se trouvent les boutons « fermer », « publier ce commentaires » ou « recommander cet article »

 

 

.diablog .buttons

- concerne les pieds de la fenêtre de commentaire et de recommandation où se trouvent les boutons « fermer », « publier ce commentaires » ou « recommander cet article »

 

 

.diablog .title

- concerne la cellule supérieure des formulaires où se trouvent les titres : « ajouter un commentaire » ou « recommander cet article »

 

 

.ob_form fieldset ul li .w100prct

- concerne les champs de textes où les visiteurs indiquent leurs nom, e-mail et site dans le formulaire de commentaire

 

 

.diablog .content .ob_form fieldset ul li textarea

- concerne le champ de texte où les visiteurs vont écrire leur commentaire dans le formulaire de commentaire.

 

 

.diablog .content .ob_form

- concerne la cellule centrale où se trouvent la totalité des formulaires de commentaire et de recommandation sauf les pieds et les titres.

 

 

.ob_form fieldset ul li label

- concerne les textes d’indications présents à côté des champs de textes à compléter par les visiteurs. Soit « votre nom », « votre email », « votre site » du formulaire de commentaire.

 

 

.ob_form fieldset ul li .inline

- concerne les textes suivants du formulaire de commentaire « se souvenir de ces informations », « rédigez ici votre commentaire » et « me prévenir par un email du prochain commentaire sur cet article »

 

.diablog .content .ob_form fieldset p

- concerne les textes de réglement du formulaire « Visible uniquement par l'auteur du blog » et « Nous vous rappelons que vous êtes responsable du contenu des commentaires que vous publiez. Votre adresse IP (xx.xx.xx.xxx) sera archivée »

 

 

 

 

Pour mieux cerner la personnalisation d’un formulaire de commentaire, voici un exemple :

Je veux que mon formulaire soit sur fond rouge, que les textes « votre nom » etc… soient en jaune et en arial par 10px, que les textes « se souvenir de ces informations » etc… soient en violet en italique, que le champ où le visiteur va écrire son commentaire, contienne une image en arrière plan, que le titre « ajouter un commentaire » soit souligné et écrit en blanc, que le pied du formulaire soit rose.

 

.diablog {background-color:#FF0000 ;}

.ob_form fieldset ul li label {color:#FFFF00; font-family:arial; font-size:10px;}

.ob_form fieldset ul li .inline {color:#9900FF; font-style:italic;}

.diablog .content .ob_form fieldset ul li textarea {background:transparent url(http://monimagedefond.png);}

.diablog .title {text-decoration:underline; color:#FFFFFF;}

.diablog .buttons {background-color:#FF00FF;}

 

A vous de jouer !

Published by Christelle Vinsonneau - dans webdesign
commenter cet article
4 janvier 2010 1 04 /01 /janvier /2010 12:46

menu-deroulant.jpgLa plupart d'entre-vous sont particulièrement intéressés par un menu déroulant personnalisable sans javascript ni php. Il est possible de l'utiliser à l'horizontale et à la verticale.

 

 

 

Voici le récapitulatif du menu uniquement en css et en html, article par article :


 

- Un menu déroulant horizontal (html CSS) sans javascript

 

- Un menu déroulant vertical (html CSS) sans javascript

 

- Positionner précisément son menu déroulant sans javascript ni php dans son blog ou son site

 

- Un menu déroulant en CSS et sans javascript avec des images pour le personnaliser complètement

 

- un exemple de ce menu totalement personnalisé et intégré dans un blog


Published by Christelle Vinsonneau - dans webdesign
commenter cet article
29 décembre 2009 2 29 /12 /décembre /2009 18:27
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
28 décembre 2009 1 28 /12 /décembre /2009 18:40

http://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Puce_rat_adulte.jpg/559px-Puce_rat_adulte.jpg

 

 

Comme promis voici le récapitulatif sur le sujet des puces.

 

 

 

 

 

 

 

 

 

Published by Christelle Vinsonneau - dans webdesign
commenter cet article
21 novembre 2009 6 21 /11 /novembre /2009 13:58
Il y a peu, on m'a rappelée à l'ordre... j'avais promis de vous montrer comment installer un compteur de visites sur votre blog. Et bien sûr ce compteur se doit d'être gratuit et sans pub. De plus, il faut qu'il soit sans javascript pour être compatible sur la plupart des blogs (et surtout sur les blogs over-blog qui ne sont ni en premium ni en privilège)...

Mais ce n'est pas tout... il faut que ce compteur soit personnalisable pour s'adapter au design et ne fasse pas tâche.

Le compteur que je vous propose est celui de free.fr
Voici un petit formulaire pour le personnaliser et l'adapter comme bon vous semble...


Personnaliser le compteur:

:
Nom de votre blog: (attention... c'est sans le http:// et sans caractères spéciaux)
Commencer le compteur à: c'est pratique, car le compteur est souvent installé bien après la naissance du blog. Pas la peine de commencer à zéro...
Choix du design: Les modèles sont au bas de cet article
Choix de la bordure:





Insérer le compteur sur votre blog::
Cette étape est la même, peu importe si le compteur vient de ce formulaire ou pas.
Copiez le code qui est apparu dans la fenêtre du formulaire. Rendez-vous sur votre administration, puis sur "configurer", et "mise en page".
Ajoutez un module "Texte Libre" (ou insérez-le dans un module texte libre déjà existant) et cliquez sur le marteau qui figure sur le module texte libre.


Cliquez sur le bouton "HTML" et collez le code. N'oubliez pas de valider.



Les modèles ::
  • A :
  • B :
  • C :
  • ainv :
  • b :
  • basic :
  • bbldotg :
  • cntdwn :
  • cool :
  • funfact :
  • garamnd :
  • mred :
  • katt048 :
  • rainbw2 :
  • slasher :
  • splot :
  • zuul :
  • fcg1 :
  • colors :
  • whtupsh :
  • school2 :
  • ebean :
  • scrshdw :
  • splotch :
  • stamped :
  • flowers :
  • ashic :
  • blkgold :
  • elf1 :
  • imgb :
  • katt077 :
  • katt098 :
  • katt086 :
  • note :
  • led :
  • heart2 :
  • bunny :
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
15 septembre 2009 2 15 /09 /septembre /2009 20:44
Toujours en rapport avec les menus déroulants en css sans javascript, voici comment leur insérer des images pour faire des boutons presonnalisés.
Tout d'abord, rappel sur les trois articles :
                   - Un menu déroulant horizontal (html CSS) sans javascript
                   - Un menu déroulant vertical (html CSS) sans javascript
                   - Positionnement dans la page d'un menu déroulant en css et html>


Voici comment insérer des images pour personnaliser vos boutons, l'exemple ici s'illustre sur le menu vertical, mais c'est le même principe sur le menu horinzontal.
Voici un exemple :





Il suffit de modifier la dernière partie du code (le css).
Voir en dessous du code les explications.

<style type="text/css"><!--
#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant1 li:hover > .sousMenu1 { display: block; }

#menuDeroulant1 .sousMenu1{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant1 .sousMenu1{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 .sousMenu1 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; width: 100px; margin: 0; padding: 0; border: 0; font-size:12px;}

#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100; z-index:1000;}

#menuDeroulant1 li a:link, #menuDeroulant1 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/1.jpg); margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant1 li a:hover { background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/4.jpg); }
#menuDeroulant1 li a:active { background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/3.jpg); }
#menuDeroulant1 .sousMenu1 li a:link,#menuDeroulant1 .sousMenu1 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/2.jpg);}
#menuDeroulant1 .sousMenu1 li a:hover{ background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/3.jpg);}
--></style>





Il y a 4 images :



1 : Image présente dans l'exemple pour le bouton de la catégorie non-activée par la souris.



2 : Image présente dans l'exemple pour le bouton de lien dans le sous-menu de la catégorie, non-activé par la souris.



3 : Image présente dans l'exemple pour le bouton de lien dans le sous-menu de la catégorie, activé par la souris.



4 : Image présente dans l'exemple pour le bouton de la catégorie activée par la souris.



Il suffit maintenant de modifier les URL en orange par les images de votre choix.

Published by Christelle Vinsonneau - dans webdesign
commenter cet article