Profil

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

Photo.Graph

Catégories

15 septembre 2009 2 15 /09 /septembre /2009 05:38
Devant le succès d'un précédent article qui explique comment installer un menu déroulant horizontal sans javascript et en utilisant uniquement le html et le CSS (article consultable ici : Un menu déroulant horizontal (html CSS) sans javascript), voici le même menu pour un affichage vertical.

Voici un exemple :









Alors voici un code un peu long, mais simple d'utilisation et facilement modifiable à placer dans son entête en mode html. Pour celà il faut aller dans son administartion de blog comme pour insérer une bannière , mais choisir les options suivantes :



Tout ce qui est en orange est à personnaliser (voir explications en bas)


<ul id="menuDeroulant1">
<li><a href="http://liencategorie1.html">Catégorie1</a>
<ul class="sousMenu1">
<li><a href="http://liensousmenu1-cat1.html">Lien 1 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu2-cat1.html">Lien 2 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu3-cat1.html">Lien 3 de la catégorie 1</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant2">
<li><a href="http://liencategorie2.html">Catégorie2</a>
<ul class="sousMenu2">
<li><a href="http://liensousmenu1-cat2.html">Lien 1 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu2-cat2.html">Lien 2 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu3-cat2.html">Lien 3 de la catégorie 2</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant3">
<li><a href="http://liencategorie3.html">Catégorie3</a>
<ul class="sousMenu3">
<li><a href="http://liensousmenu1-cat3.html">Lien 1 de la catégorie 3</a> </li>
<li><a href="http://liensousmenu2-cat3.html">Lien 2 de la catégorie 3</a> </li>
<li><a href="http://liensousmenu3-cat3.html">Lien 3 de la catégorie 3</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant4">
<li><a href="http://liencategorie4.html">Catégorie4</a>
<ul class="sousMenu4">
<li><a href="http://liensousmenu1-cat4.html">Lien 1 de la catégorie 4</a> </li>
<li><a href="http://liensousmenu2-cat4.html">Lien 2 de la catégorie 4</a> </li>
<li><a href="http://liensousmenu3-cat4.html">Lien 3 de la catégorie 4</a> </li>
</ul>
</li>
</ul>







<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: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#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: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant1 li a:hover { background-color: #99CCFF; }
#menuDeroulant1 li a:active { background-color: #FF3300; }
#menuDeroulant1 .sousMenu1 li a:link,#menuDeroulant1 .sousMenu1 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant1 .sousMenu1 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>



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

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

#menuDeroulant2 li:hover > .sousMenu2 { display: block; }

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

#menuDeroulant2 .sousMenu2 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

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

#menuDeroulant2 li a:link, #menuDeroulant2 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant2 li a:hover { background-color: #99CCFF; }
#menuDeroulant2 li a:active { background-color: #FF3300; }
#menuDeroulant2 .sousMenu2 li a:link,#menuDeroulant2 .sousMenu2 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant2 .sousMenu2 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>



<style type="text/css"><!--
#menuDeroulant3{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;position: absolute; top: 100;z-index:998;}

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

#menuDeroulant3 li:hover > .sousMenu3 { display: block; }

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

#menuDeroulant3 .sousMenu3 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant3 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant3{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; }

#menuDeroulant3 li a:link, #menuDeroulant3 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant3 li a:hover { background-color: #99CCFF; }
#menuDeroulant3 li a:active { background-color: #FF3300; }
#menuDeroulant3 .sousMenu3 li a:link,#menuDeroulant3 .sousMenu3 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant3 .sousMenu3 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>



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

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

#menuDeroulant4 li:hover > .sousMenu4 { display: block; }

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

#menuDeroulant4 .sousMenu4 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant4 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

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

#menuDeroulant4 li a:link, #menuDeroulant4 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant4 li a:hover { background-color: #99CCFF; }
#menuDeroulant4 li a:active { background-color: #FF3300; }
#menuDeroulant4 .sousMenu4 li a:link,#menuDeroulant1 .sousMenu4 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant4 .sousMenu4 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>


Première partie du code :
Il suffit de remplacer les noms des catégories (le titre des cases du menu sans dérouler), ensuite de modifier le titre des liens de la catégorie (ce qui s'affiche en se déroulant lors du passage sur le titre de la catégorie) puis de modifier les liens correspondants.

La dernière partie du code se compose de 4 paragraphes c'est pour la personnalisation, il faut alors modifier les couleurs, les dimensions pour que ça s'adapte harmonieusement à votre blog. Et ce pour chaque paragraphe, soit 4 fois.
Tout d'abord les dimensions. Ici la case de menu sera de 200px de large à vous de mettre ce qui vous convient. 11px c'est la taille de la police.
Premiere ligne : FFFFFF c'est blanc et c'est la couleur du texte - 3B4E77 c'est bleur et c'est la couleur de fond des catégories sans survol de la souris - FFFFFF c'est blanc et c'est le petit trait horizontal qui sépare les catégories.
Deuxième ligne : 99CCFF c'est bleu clair et c'est la couleur de fond de la catégorie au survol de la souris.
Troisième ligne : FF3300 c'est orange et c'est la couleur de fond lorsqu'un lien du menu est cliqué.
Quatrième ligne: FFFFFF c'est blanc et c'est la couleur du texte des sous-menus - CCCCCC c'est gris et c'est la couleur de fond des sous-menus lorsqu'ils se déroulent et qu'ils ne sont pas survolés par la souris.
Cinquième ligne : FF3300 c'est orange et c'est la couleur des sous-menus lorsqu'ils sont survolé par la souris.


Il est aussi possible de modifier ce menu dans le blog ou la page avec la même précision que le code pour le menu horizontal : Menu déroulant en css et html (2)

Pour plus de facilité, vous pouvez télécharger le code en fichier zip ici.

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
12 septembre 2009 6 12 /09 /septembre /2009 13:38

Over-blog permet d'avoir un blog sans pub... c'est d'ailleurs pour cette principale raison que mon blog est hébergé chez eux.
Mais attention, il n'est pas réellement possible d'avoir un blog totalement sans pub gratuitement : premièrement il y a la pub en pied de page de blog et deuxièmement, même si vous n'avez pas souscrit au partenariat de publicité vous prenez le risque de voir de la pub sur votre blog. Et oui, car si vous ne vous connectez pas sur votre administration de blog pendant 6 semaines consécutives, alors un bandeau de pub va apparaître par magie ! Normalement vous devriez recevoir un mail pour vous prévenir, mais...

Cette "sanction" est appliquée même si vous publiez des articles régulièrement grâce au procédé de "publication programmée" de votre administration.
Il vaut mieux le savoir, sinon on peut avoir de drôles de surprises.

Par contre rien ne vous empêche de prendre les devant et de modifier le css pour que les modules de pub soient supprimés de l'affichage selon le procédé expliqué dans cet article :
Supprimer un élément du css, le rendre invisible 

Moi je dis juste comme ça... mais...
Ca pourrait ressembler à ça...
#pub{display:none;}
.pub{display:none;}
.pub .box-content {display:none;}

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
8 septembre 2009 2 08 /09 /septembre /2009 16:17

J'ai déjà suffisamment râler pour montrer mon mécontentement envers les albums photos d'over-blog, je vous propose aujourd'hui une nouvelle façon de vous en débarasser sans pour autant "forcer" vos visiteurs à consulter une page extérieure à votre blog.
Voici picasaweb : simple et efficace, il suffit juste d'avoir un compte google (gmail, igoogle...) ou d'en créer un ici : http://picasaweb.google.com

Ensuite, il faut juste se laisser guider par l'interface.


Cliquez sur "Transférer" et une nouvelle fenêtre va s'ouvrir :


Créez un album photo...

Remplissez les champs que vous souhaitez pour votre album photo et cliquez sur "continuer"

Cliquez sur "ajouter des photos" et votre navigateur va ouvrir une nouvelle fenêtre, parcourez votre disque dur et sélectionnez toutes les images de votre choix (pour pouvoir en sélectionner plusieurs à la fois, maintenez appuyée la touche Ctrl)

Lorsque toutes les photos sont choisies, cliquez sur "transférer" et vous allez constater le transfert de vos photos (c'est assez rapide selon votre connexion).
null

Allez dans la marge de droite de picasa web et trouvez ces indications :

Vous pouvez voir qu'il y a plusieurs liens : un lien direct vers votre album, mais donc extérieur à votre blog, un lien RSS et l'option "insérer un diaporama dans une page Web". Cliquez dessus.

Choisissez la taille de votre diaporama grace au menu défilant, si vous souhaitez voir les légendes, une lecture automatique...
Copiez le code !

Le code ressemble à ça :
<embed type="application/x-shockwave-flash" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" width="600" height="400" flashvars="host=picasaweb.google.com&hl=fr&feat=flashalbum&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fcphoto.graph%2Falbumid%2F5407408158362803681%3Falt%3Drss%26kind%3Dphoto%26hl%3Dfr" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

Il est possible ed personnaliser la couleur d'arrière plan de votre album photo en modifiant ce qui est en orange dans le code (000000), il suffit juste de le remplacer par le code hexadecimal de votre choix : grace à l'article au sujet de la couleur

Ensuite, il n'y a plus qu'à insérer le code dans votre article, module ou page de blog :


Et voilà le résultat :



Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
25 juillet 2009 6 25 /07 /juillet /2009 05:42
Il y a peu de temps quelqu'un a laissé un commentaire me demandant comment placer la date de l'article non pas en tête de l'article mais en pied.
Cette fois la réponse n'est pas d'ordre code et CSS, mais s'obtient juste en faisant une petite manipulation dans l'administration d'over-blog.
Voici comment configurer la structure générale de ses articles.

Allez sur configurez, puis sur mise en page. Vous arrivez sur la structure de votre blog qui présente les modules utilisés et leur disposition. Cliquez sur le marteau présent à l'angle en haut à droite de l'espace des articles.

S'ouvre alors une fenêtre, qui montre la structure des articles avec les options : publié par, publié dans, communauté, ajouter un commentaire, recommander, date, ajouter un commentaire, afficher les commentaires
A l'aide d'un glisser-déposer réalisé avec la souris, vous pouvez alors définir la structure de votre article comme bon vous semble.

Ainsi toutes options qui resteront à gauche ne seront pas visibles sur le blog, toutes celles qui seront en haut seront en tête d'article, et toutes celles qui seront en bas seront visibles en pied (soit après l'article, soit après les commentaires)

Voici l'exemple pour la date qui va passer de l'entête au pied :


Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
16 juillet 2009 4 16 /07 /juillet /2009 08:22
Suite à un commentire posté il y a quelques jours, voici aujourd'hui les explications concernant la réalisation d'un diaporama d'images défilantes.

Voici un exemple :


Le calme avant...   surface   Inséparables   Comme le temps   Pieuse   Brodeuse   Penseur

Il est possible de le faire aller dans 4 direction : vers la droite, vers la gauche, vers le bas, vers le haut, de définir à quelle vitesse les images peuvent défiler.



Pour l'installer, il suffit de coller le code à l'endroit désiré dans votre article ou votre module en passant par le mode html.




Il est totalement paramétrable !





Le code : défilement horizontal

<center><marquee scrollamount="4" width="500" height="106" direction="right">
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a> &nbsp;
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a> &nh
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a> &nbsp;
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a> &nbsp;
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a> &nbsp;
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a>
</marquee></center>





Paramétrage du diaporama :




La première ligne seulement.
<center><marquee scrollamount="4" width="500" height="106" direction="right">

center : c'est l'alignement du diaporama. Center lui permet d'être centré dans la page ou le module.
(left permet de le serrer à gauche, right permet de le serrer à droite).

scrollamount="4" : c'est la vitesse de défilement des images du diaporama. 
Plus le chiffre est élevé plus les images vont vite.

width="500" : c'est la largeur totale en pixels du diaporama.
height="106" : c'est la hauteur totale en pixels du diaporama.

direction="right" : c'est la direction de défilement des images du diaporama.
Il est possible d'indiquer right : droite  -  left : gauche  -  up : haut  -  down : bas





Paramétrage des images :


<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a> &nbsp;

a href="http://lien-de-l-image.html" : chaque image peut avoir un lien différent qui pointe vers une page.
Il suffit d'indiquer l'url.
Si vous souhaitez l'enlever, il faut supprimer cette ligne et supprimer la fin de balise </a>

height="106" : c'est la hauteur en pixels de l'image
width="80" : c'est la largeur en pixels de l'image

src="http://url-de-l-image.jpg" : c'est l'url de l'image (il faut que l'image soit déjà hébergée sur le net)

alt="Titre de l'image" : c'est pour donner un titre à l'image. Cette info sera visible au survol de l'image par la souris.

border="0" : permet d'avoir ou non une bordure. Personnellement je préfère sans.




Les espaces dans le diaporama :
C'est ainsi qu'on évite que les images se collent.
Lors d'un défilement horizontal, les espaces s'indiquent ainsi    &nbsp;
Lors d'un défilement vertiacle, les espaces s'indiquent ainsi     <br>






Autre exemple : défilement vertical
Le calme avant...

surface

Inséparables

Comme le temps

Pieuse

Brodeuse

Penseur



Le code : défilement vertical

<center><marquee scrollamount="8" width="106" height="500" direction="up">
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a><br><br>
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a><br><br>
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a><br><br>
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a><br><br>
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a><br><br>
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a><br><br>
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg" alt="Titre de l'image" border="0" />
</a>
</marquee></center>


Télécharger le code en format .txt ici


Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
6 juillet 2009 1 06 /07 /juillet /2009 17:42

Une animation flash, qu'est ce que c'est ?
C'est une animation interactive ou non, généralement animée, sonore ou non...
Voici un exemple :

Pour pleinement en profiter, mettez le son !!!


Comment procéder ?
Tout d'abord il vous faut une animation dans le format .swf
  Ensuite, il vous faut une url (soit vous hébergez votre swf, soit vous récupérez l'url) par exemple pour l'animation ici présente, l'url est la suivante : http://media6.koreus.com/00071/200405/bird_scorpion_stilllovingyou.swf



Ensuite, il suffit de l'intégrer à votre article (ou module de texte libre) selon le code suivant à l'endroit où vous le désirez en passant par le mode html :
null

Et coller le code suivant:
<object type="application/x-shockwave-flash" data="http://urldelanimation.swf" height="300" width="500">
<param name="src" value="http://urldelanimation.swf" />
</object>



Et modifier ce qui est en orange...
L'url (qui y est deux fois)
Et les dimansion (en pixels), height étant la hauteur et width la largeur.
Essayer de respecter les proportions pour éviter que l'animation soit déformée.



Exemple, si vous souhaitez publier l'animation présente dans cet article, voici le code que j'ai employé :

<object type="application/x-shockwave-flash" data="http://media6.koreus.com/00071/200405/bird_scorpion_stilllovingyou.swff" height="300" width="500">
<param name="src" value="http://media6.koreus.com/00071/200405/bird_scorpion_stilllovingyou.swf" />
</object>
 
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
4 juin 2009 4 04 /06 /juin /2009 06:10

Parce que parfois regarder par la fenêtre peut ne pas suffire, il peut-être utile pour certains d'afficher la météo sur son blog, parce que tout le monde n'a pas une grenouille dans un bocal.

Mais non, au fond je ne vous le propose pas car vous avez besoin de savoir quel temps il fait de l'autre côté de votre écran, mais parce qu'il peut-être utile ou intéressant pour vos visiteur de connaître le temps qu'il fait chez vous pour juger votre humeur, ou le temps qu'il fait dans une ville précise qui n'est pas celle d'où vous bloguez mais de laquelle vous parlez, ou pourquoi pas d'une autre galaxie (cette option n'est pas encore en ligne, mais je ne perds pas espoir, elle saura voir le jour). Ou pourquoi pas pour connaître le temps qu'il fera sur le lieu de votre prochain stage de chant ? ... me regardez pas comme ça !

Mais pas question, sur ce blog, de vous présenter un module tout moche, non paramétrable, en anglais, payant et avec de la pub... même s'il affiche la météo.


Je vous propose d'aller sur ce site (en français) et de choisir le module météo qui vous convient en sélectionnant, puis de choisir le style d'icône de prévisions pour vos soleils, pluie, nuage, vent...

A vous de déterminer le département français, le nombre de jours de prévision que vous souhaitez afficher.
Pour terminer il suffit ensuite de cliquer sur « créer votre service météo », de copier le code html dans la case du bas de la page et de l'insérer dans la source de votre blog. Soit dans un module « texte libre », soit dans un article.

Pour ça, il suffit de passer en html :

Ce qui donne :
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
2 juin 2009 2 02 /06 /juin /2009 06:12
On peut avoir envie de supprimer son blog définitivement du web pour diverses raisons : mettre fin au harcelement car vous êtes victime de votre succès, envie de retourner à l'anonymat, marre de certains commentaires, ingratitude de la tâche de blogueur, trop de temps consacré qui devrait vous permettre enfin de repeindre vos volets ou faire du jardinage (pour ceux qui ont une vraie vie et une vraie maison), ras-le-bol des bugs qu'engendre over-blog qui se cache derrière un pseudo-souhait d'amélioration, ou juste pour faire ch***...

Peu importe et peu m'importe... car qui peut le moins peut le plus (et l'inverse est aussi vérifiable) !
Mais comme la ligne éditoriale du moment - qui consiste non pas à ajouter mais à supprimer - remporte un franc succès (pas trop... sinon, je vais devoir supprimer ce blog), voici la marche à suivre pour tout supprimer d'un coup.

Plus de blog, plus d'article, plus de commentaire, plus rien... si ce n'est le souvenir de quelques pages mises en archive par google pendant quelques temps.


Supprimer son blog :
Allez dans votre administration, puis sur "configurer", "options globales", "réglages avancés".
En bas de la fenêtre vous verrez l'intitulé "suppression du blog" il suffit alors de cliquer sur "supprimer mon blog".


Adieu, c'est fini... !
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
1 juin 2009 1 01 /06 /juin /2009 06:08

Les liens... voilà quelque chose de très important dans tous les blogs ou sites internet, car sans eux il n'y a plus de navigation et le référencement serait bien difficile.

Comment transformer un texte en lien dans un article ou dans un module ?
Il y a trois possibilités...



1 - il suffit de sélectionner le texte que vous désirez transformer avec votre souris. Gardez-le sélectionné et cliquez sur : ajouter un lien

S'ouvre alors une fenêtre avec trois onglets.
Le premier s'intitule "lien externe à mon blog". Il est spécifique pour insérer un lien avec l'url.

Par exemple, l'url de cet article est : http://photo.graph.over-blog.com/article-32076525.html
Il suffit de coller l'url et de cliquer sur insérer.

Le deuxième s'intitule "lien vers un contenu de mon blog". Il sert à gagner du temps car il n'est pas nécessaire de copier puis de coller l'url.

Il suffit de cliquer sur l'article correspondant et le lien s'insère tout seul, il n'est même pas nécessaire de valider.

Le troisième et dernier onglet de cette fenêtre s'intitule "options avancées". Pour l'utiliser, il faut avoir déjà inséré un lien et de nouveau le sélectionner, de cliquer de nouveau sur "ajouter un lien" comme expliqué précédemment et d'aller sur le troisième onglet.

Nous allons nous concentrer sur la première option et la dernière.
Ouvrir le lien dans : il y a trois possibilités.
Dans la même fenêtre : votre visiteur clique et la page où il était présent s'efface pour afficher la nouvelle page.
Dans une nouvelle fenêtre : votre visteur clique sur le lien et une nouvelle fenêtre s'ouvre. Votre blog n'est pas fermé. C'est utile lorsque vous invitez votre visiteur à ne faire que consulter rapidement une page extérieure à votre blog. Mais attention à ne pas en abuser car il n'est pas agréable d'avoir trop de fenêtres ouvertes en même temps et ça découragerait vite vos visiteurs à rester fidèles.
Dans une pop-up : je ne peux que déconseiller car il y a de fortes chances que le lien même cliqué ne soit jamais visité car il sera bloqué. Dommage que les publicitaires aient autant abusé de ce procédé qui du coup est bloqué par les anti pop-ups et anti-virus. 
Titre : c'est utilie pour mettre un titre à votre lien qui s'affichera tel une info-bulle lorsque le visiteur glissera dessus avec sa souris. C'est bien pour le référencement aussi, les robots des moteurs de recherche apprécient cette indication et l'indexe facilement.



2 - sélectionnez le texte que vous désirez transformer en lien. Gardez-le sélectionné et cliquez sur la petite icône en forme de maillon de chaine. Personnellement je n'utilise que celui-là que je trouve plus rapide.

Une nouvelle fenêtre s'ouvre. Nous nous contenterons du premier onglet les autres méritent un article à part entière.

Url : collez l'url du lien
Ancre : utile si vous avez des ancres dans votre blog (mérite aussi un article à part entière), peu de personnes les utilisent.
Cible : choisi l'affichage. dans la même fenêtre, dans une nouvelle fenêtre...
Titre : c'est utilie pour mettre un titre à votre lien qui s'affichera tel une info-bulle lorsque le visiteur glissera dessus avec sa souris. C'est bien pour le référencement aussi, les robots des moteurs de recherche apprécient cette indication et l'indexe facilement.
Classe : sert à modifier l'aspect du lien.



3 - si vous êtes en mode "édition avancé"
Cliquez sur l'icône HTML.
null
S'ouvre alors le code source de votre article. A vous de taper le code correspondant à un lien.
Exemple :
Lien qui s'ouvre dans la même fenêtre :
<a href="http://lien.html">lien</a>
Lien qui s'ouvre dans la même fenêtre avec un titre "titre du lien":
<a title="titre du lien" href="http://lien.html">lien</a>
Lien qui s'ouvre dans une autre fenêtre
<a href="http://lien.html" target="_blank">lien</a>

 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
31 mai 2009 7 31 /05 /mai /2009 08:28
Aujourd'hui non allons voir et comprendre les liens des éléments de navigation d'un blog over-blog.

Il y a deux types de navigations dans les blogs over-blog et ses deux types de navigations sont présentes deux fois : une fois en entête et une fois en pied de blog.


Il y a la navigation qui affiche la pagination sous forme de   début   précédent   1 2 3 4 5 6 7 8 9   suivant   fin
En css elle s'identifie ainsi : .pagination

Qui comprend aussi les éléments suivants qui permettent de tous les dissocier alors que .pagination les englobe tous :
.currentPage
qui est la page en cours affichée sur le blog

.textFirst  
qui est le lien "début" (présent lorsque le blog a beaucoup d'articles)

.textPrevious
qui est le lien "précédent"

.previousPage
les numéros qui sont avant la page courante.
Si par exemple je suis sur la page 4 d'un blog, cet élément concerne les chiffres 1 2 3

.nextPage 
les numéros qui sont après la page courante.
Si par exemple je suis sur la page 5 d'un blog, cet élément concerne les chiffres 6 7 8

.textNext
qui est le lien "suivant"

.textLast
qui est le lien "fin"




Il y a la navigation qui affiche des liens vers les articles lors de l'affichage d'un article seul : article précédent   retour à l'accueil   article suivant
En css elle s'identifie ainsi : .article_navigation

Qui comprend aussi les éléments suivants qui permettent de dissocier les éléments de .article_navigation qui les englobe tous :
.previousArticle
Qui est le lien de l'article précédent a celui qui est affiché.

.nextArticle
Qui est le lien de l'article qui suit celui qui est affiché




Exemples :
Je souhaite supprimer la pagination et la navigation du blog :
.pagination {display:none;}
.article_navigation {display:none;}

Je souhaite seulement supprimer la pagination présente en haut de mon blog et conserver celle du bas :
.before_article .pagination {display:none;}

Je souhaite mettre le lien "début" de la pagination en rouge et en gras :
.textFirst {color:#FF0000; font-weight: bold;} 

Je souhaite écrire en arial, en vert et 14px les textes de navigation :
 .article_navigation {font-family:Arial; color: #00FF33; font-size:14px;}


Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article