Profil

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

Photo.Graph

Catégories

23 mars 2009 1 23 /03 /mars /2009 14:59

J'ai expliqué il y a quelques temps comment procéder pour insérer une bannière sur son blog en hébergeant sa bannière ailleurs ce que je trouve plus pratique pour éviter d'être limités par les restrictions de poids et de taille des images d'over-blog. Il faut savoir qu'une bannière hébergée sur over-blog sera redimensionnée si elle dépasse les 1200x300 pixels ou si elle pèse plus de 100ko. Over-blog n'accepte que les gif, png ou jpg. Pas de swf...
Mais si vous préférez éviter d'héberger votre image ailleurs et que vous préférez la conserver sur over blog, voici comment procéder.

 

Tout d’abord il vous faut une bannière… une image, que vous aimez bien ou un montage que vous avez réalisé en comprenant le titre de votre blog (si vous n'avez aucun logiciel, pourquoi pas avec un générateur de bannière du type  Web-Module ;-). L’idéal est que votre bannière soit en « harmonie » avec le reste du blog (police de caractère, couleurs, thème…). 

 

Cliquez sur le marteau du module texte libre, choisissez « bannière graphique » et insérez votre image comme vous procédez habituellement en publiant un article.

 

N’oubliez pas d’ajouter un petit lien vers l’accueil de votre blog, ça facilite la navigation…


Si vous préférez héberger votre image ailleurs pour éviter le redimensionnement, cet article devrait vous intéresser : http://photo.graph.over-blog.com/article-19775362.html

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
19 mars 2009 4 19 /03 /mars /2009 17:16

Lorsqu'on n'a pas de bannière graphique pour présenter son blog, il est possible de lui donner un titre qui s'inscrit alors automatiquement avec le css défini du blog.

Pour insérer un titre à son blog ou modifier le titre actuel il suffit d'aller dans l'administration du blog, puis sur configurer, puis sur mise en page.

Soit le bloc d'entête est déjà présent soit il faut l'insérer par le glissé-déposé d'un module « texte libre ».


Ensuite, il faut cliquer sur le petit marteau à droite du bloc. S'ouvre alors une fenêtre qui invite à définir le titre du blog.


ATTENTION : il est possible de changer el nom de son blog, son titre mais pas son url... !

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
2 mars 2009 1 02 /03 /mars /2009 17:23

Voici les premières pistes à exploiter pour faire un album photo à son image avec son css et son design de blog pour éviter d'utiliser les albums photos horribles d'over-blog en ligne depuis peu.

 

Par chance, over-blog n'a pas supprimé les pages...

Lorsqu'on publie un article, il est aussi possible de publier un page. Beaucoup de blogueurs n'utilisent pas les pages et c'est tant mieux car elles pourront servir aux albums photos. Et comme vous le savez, nous avons 'encore' la possibilité de personnaliser le css des pages !

Bien sûr, ça sera plus joli, mais ça demandera aussi plus de travail !

Je conseille - mais bien sûr, vous le ferez comme bon vous semble - de supprimer les modules et bannière des pages pour un meilleur résultat et un affichage optimal. Vous pouvez aussi ajouter un lien de retour vers l'accueil de votre blog, ou des liens pour d'autres albums photos.

 

 

Nous pouvons utiliser un album construit sur un code qui est un mélange de css et de html et il prendra toutes les classes du css du blog sur lequel il se trouve.

Par contre, il faut entrer les url de chaque image manuellement, ainsi que les descriptions (si besoin).

Voir un exemple ici

 

Pour le code et les explications c'est ici


 

 

Ou alors nous pouvons utiliser Joomla pour un album swf (en flash ce qui fait que personne ne peut vous « piquer » l'url de votre image). Qui ne nécessite aucun téléchargement, qui héberge les photos et qui donne un code personnalisable à coller (en html) directement dans sa page.

Voir un exemple ici

Pour aller sur Joomla, c'est par là : http://www.joomeo.fr

Je publierai dans les jours qui suivent un tuto expliquant comment utiliser joomla pour son blog.

Repost 0
Published by Photo.Graph - dans webdesign
commenter cet article
2 mars 2009 1 02 /03 /mars /2009 17:22

Voici comment avoir un album photo en css et html, sans javascript (pour ceux qui ne sont pas en privilège) et sans php.

Cette astuce vous permet d'avoir vos albums photos dans le même style que votre blog over-blog sans avoir à subir l'infâme interface des nouveaux albums photos over-blog.

Je vous conseille pour un meilleur rendu - mais vous ferez comme bon vous semble - d'installer cet album photo dans une page (le css des pages est modifiable chez over-blog), de supprimer les éventuels modules et bannières.

 

Vous trouverez le code à coller en html dans votre page en dessous de cet article.
Dans votre fenêtre de publication, si vous n'y êtes pas déjà, passez en mode "édition avancée" pour avoir l'option HTML disponible, puis cliquez sur HTML

Vous pouvez aussi le télécharger ici (zip). Vous pouvez voir un exemple ici.

Ce qui est en orange est ce qu'il vous faut modifier selon vos photos et vos envies.

Ici l'exemple est pour 6 photos, si vous souhaitez plus d'images, il suffit alors de rajouter quelques lignes de code (explications en bas de cet article, juste après le code)

 

 

<center>

<div id="gal"><span>Le titre de mon album photo </span><br>

<div style="margin-left: 2em">

 

<a href="#"><img src="http://www.url1.jpg"><span><img src="http://www.url1.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 1</textarea></span></a>

 

 <a href="#"><img src="http://www.url2.jpg"><span><img src="http://www.url2.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 2</textarea></span></a>

 

<a href="#"><img src="http://www.url3.jpg"><span><img src="http://www.url3.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 3</textarea></span></a>

 

<a href="#"><img src="http://www.url4.jpg"><span><img src="http://www.url4.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 4</textarea></span></a>

 

<a href="#"><img src="http://www.url5.jpg"><span><img src="http://www.url5.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 5</textarea></span></a>

 

<a href="#"><img src="http://www.url6.jpg"><span><img src="http://www.url6.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 6</textarea></span></a>

 

</div>

</div>

</center>

 

 

<style type="text/css">

<!--

#gal{

position:relative;

width:600px;

height:600px;

margin:0px auto 0px auto;

cursor: default;

text-align: center; }

#gal ul{list-style:none;

padding: 0px;

margin: 0px;

position: absolute;

top: 10px;

left: 0px;

text-align: center;

width: 100%;}

#gal a {text-decoration: none;}

#gal a:hover {background: none;}

#gal a span {display: none;

cursor: default;}

#gal a img {display: inline;

margin:5px 5px 0 5px;

border: 1px solid black ;

position: relative;

z-index: 1001;

height: 70px;

width: auto;}

#gal a:active span, #gal a:focus span  {display: inline;

visibility: visible;

position: absolute;

top: 130px;

left: 0px;

width: 100%;

background: transparent;}

#gal img, #gal a span img {margin:0px auto 0 auto;

border: 1px solid black ;

height: 380px;}

#gal a textarea {background-color: transparent;

border: 0px solid white;

text-align: center;

height: 190px;

width: 480px;

top: -25px;

overflow: hidden;

margin:405 auto 0 auto;

cursor: default;

position: relative;

z-index: 1000;}

--></style>

 

 

Si vous désirez plus que 6 photos, il suffit d'ajouter autant de fois que nécessaire ce paragraphe en le modifiant :

 

<a href="#"><img src="http://www.urlx.jpg"><span><img src="http://www.urlx.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image x</textarea></span></a>

 

Bien sûr il s'insère en suivant l'image 6 au début du code...

 

Pour faire plusieurs lignes de miniatures, il suffit d'ajouter <BR> avant l'image qui se trouvera à la ligne du dessous.

 

 

Repost 0
Published by Photo.Graph - dans webdesign
commenter cet article
1 mars 2009 7 01 /03 /mars /2009 14:51
Ca y est le couperet est tombé, comme je vous l'avais annoncé : les nouveaux albums photos d'over-blog sont arrivés.

Argggh... c'est pire encore que ce que je croyais ! On a rarement vu quelque chose d'aussi moche.

Franchement, je pensais que ce ne serait pas folichon, mais pas à ce point ! On se retrouve avec le magnifique logo d'over-blog alors que la plateforme fait sa publicité vantant  "Un blog gratuit, sans publicité imposée".

Fini la belle époque où l'on pouvait bidouiller son css pour rendre son album photo accueillant, singulier et à l'image de son blog...

Un petit référendum aurait été bienvenu ! On n'a plus le choix, on ne peux pas espérer revenir sur l'ancienne configuration, à part héberger ailleurs ou autrement ses albums photos.

Pour illustrer mes propos voici quelques captures d'écran extraites du blog http://sylviaetchris.over-blog.com
Prenons le cas d'un album photo « Belgique » et de la photo du musée des jouets. Voici tel qu'elle était avant le changement d'interface :


Voici aujourd'hui la même photo affichée dans ces nouveaux albums over-blog :


Honnêtement, y'a pas de quoi préférer la deuxième version... !
Qu'est-ce qu'on remarque :
- un manque évident de design !
- les deux logos inutiles qui imposent de la publicité alors qu'OB proclame l'inverse
- l'extension .jpg, gif, .png ... qui ne sert à rien et qui « salit » le titre de la photo
- un affichage tronqué du titre et de la présentation du blog et en plus très moche
- une nouvelle option : « voir tous les albums » voici sur quelle page on arrive :

 

Dans les jours qui viennent, je tenterai de vous proposer une alternative à ces albums photos peu alléchants.

Repost 0
Published by Photo.Graph - dans webdesign
commenter cet article
20 février 2009 5 20 /02 /février /2009 08:44
En dessous des articles de son blog over-blog, il y a un petit lien "recommander" ce petit lien sert au x visiteurs qui adorent vos articles  et qui veulent à tout prix les partager avec leurs amis !!!!

Après avoir modifié le formulaire de commentaires, ce serait sympa de paramétrer un joli design à vos fans, non ? Voici comment modifier la fenêtre "recommander".


Le cadre qui contient l'ensemble du formulaire :
#divRecommander


Je veux par exemple lui mettre du rouge en fond le temps qu'une image vienne en fond et une bordure rouge double tout autour de 2 pixels d'épaisseur :
#divRecommander {background:#CC0000 url(http://imagedefondcommentaires.jpg); border:2px double #CC0000;}




Le titre du formulaire, "recommander ce blog"  :
#divRecommander h2

Je veux par exemple qu'il s'affiche dans une bande de couleur blanche, qu'il soit écrit en rouge, qu'il soit centre, en 15 pixels de grandeur et qu'il soit souligné.

#divRecommander h2 {background-color:#FFFFFF; color:#CC0000; text-align: center; font-size: 15px;text-decoration:underline;}




Les textes présents dans le formulaire :
#divRecommander label


Je veux par exemple que les textes soient écrits en Arial de 10 pixels et en noir.
#divRecommander label {font-family: Arial; font-size: 10px; color: #000000;}


Valable pour tous les textes, sauf :

Le texte suivant sera inséré avant votre message:
<votre nom> a souhaité vous faire partager un article intéressant et vous recommande http://xx.over-blog.com/article-xxx.html

L'aspect de ce texte est modifiable dans : #divRecommander


Les champs (sujet du message, nom, e-mail, e-mail1...) qui contiennent les données de l'utilisateur :
#divRecommander input


Je veux par exemple que le fond soit orange, qu'il y ait tout autour une ligne en pointillée de 2 pixel d'épaisseur en noir, que le texte tapé s'affiche en bleu dans le formulaire et en Verdana :
#divRecommander input {background-color: #ff6600; border:2px dashed #000000; color:#000099; font-family:Verdana;}




La zone qui contient le texte du visiteur à l'attention de ses contacts :
#divRecommander textarea


Je veux qu'il y ait une couleur noire qui s'affiche avant que l'image de mon choix se mette en arrière plan, je veux qu'il y ait une bordure simple blanche d'un pixel d'épaisseur et que le texte tapé par le visiteur s'affiche en rouge dans le formulaire.
#divRecommander textarea {background: #000000 url(http://fonddeformulaire.jpg); border:1px solid #FFFFFF; color:#CC0000;}



 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
18 février 2009 3 18 /02 /février /2009 17:10
Voici un petit code facile à utiliser dans vos articles ou dans vos modules qui permet de faire des petites effets d'animations.

Attention, ce code ne s'utilise pas dans le CSS, mais dans le HTML. Il n'est donc pas à placer dans le design de votre blog mais dans le corps d'un article ou d'un module.



Dans votre fenêtre de publication, si vous n'y êtes pas déjà, passez en mode "édition avancée" pour avoir l'option HTML disponible, puis cliquez sur HTML.
<marquee behavior=scroll direction="left">Votre message ici</marquee>

Votre message ici


Ou vers la droite :
<marquee behavior=scroll direction="right">Votre message ici</marquee>

Votre message ici


Ou vers en haut :
<marquee behavior=scroll direction="up">Votre message ici</marquee>

Votre message ici

Ou vers en bas :
<marquee behavior=scroll direction="down">Votre message ici</marquee>

Votre message ici

C'est rigolo, mais c'est pas toujours pratique pour les visiteurs... ils doivent parfois attendre que le texte repassse un deuxième fois, car ils se sont laissés surprendre...
Pour y rémédier, il suffit d'empêcher le texte de sortir de l'article ou du module une fois arrivé à sa place, il se stoppe :
<marquee behavior=slide direction=left>Votre message ici</marquee>

Votre message ici



Oui, mais les aficionados de l'animation vont penser que ce n'est pas très amusant que le texte arrête de bouger...
Alors on peut lui dier de faire aller-retour sans cesse sans sortir de l'article ou du module (ou de sa page web).
<marquee behavior=alternate direction=left>Votre message ici</marquee>

Votre message ici



Mais on peut faire plus !
On peut indiquer une zone de couleur qui peut faire un arrière plan et qui délimite l'animation.
Par exemple, je met le texte sur fond orange de 500px de largeur et je le centre dans la page :
<center><marquee behavior="alternate" bgcolor="#FF3300" width="500">votre message ici </marquee></center>
votre message ici



Il est aussi possible de définir la vitesse des défilements en rajoutant : scrollamount
<marquee behavior=scroll direction="left" scrollamount="1">Votre message ici</marquee>
Votre message ici

La vitesse est croissante comme les nombre. 1 est le plus lent ...
<marquee behavior=scroll direction="left" scrollamount="30">Votre message ici</marquee>

Votre message ici



C'est aussi possible pour les images...
<marquee behavior=alternate direction="left"><img src="http://urldelimage.jpg" width="largeur de l'image" "height="hauteur de l'image" border="0"></a></marquee>
Exemple :
<marquee behavior=alternate direction="left"><img src="http://fdata.over-blog.com/1/46/60/50/avatar-user-481998-tmpphpjdVn5y.jpg" width="115" "height="119" border="0"></a></marquee>
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
17 février 2009 2 17 /02 /février /2009 12:40

Sur over-blog il y a deux modules de liens disponibles à placer dans ses colonnes de modules, seulement si l'on en place deux on se retrouve avec un contenu identique et non pas deux modules contenants des liens différents.


Il reste la possibilité de le créer manuellement soi-même avec un module de texte libre.



Tout d'abord après être allé sur son administration, il faut ensuite aller sur « configurer », puis sur « mise en page » et faire un glisser-déposer d'un module texte-libre.

Tapez le nom du premier lien qui va commencer la liste.

Pour mettre une puce (comme dans le module de liens préconfiguré d'over-blog) sélectionnez le texte du lien et cliquez sur la petite icône qui représente une liste.


A l'aide de la souris, sélectionnez de nouveau le premier texte qui sera en lien et cliquez sur « ajouter un lien » ou sur la petite icône qui ressemble à un maillon de chaîne (le maillon brisé - l'icône juste à droite - sert à supprimer un lien).
Personnellement, je préfère utiliser la deuxième façon...

Remplissez alors les champs correspondants.

Refaites ces opérations (écrire le texte, mettre une puce, insérer le lien) pour chaque lien que vous souhaitez voir dans votre module.



N'oubliez pas de valider...

 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
17 février 2009 2 17 /02 /février /2009 11:47
Voici un article pour aider les nouveaux blogueurs qui débutent avec Over-Blog. Voici comment prendre possession de l'administration et se promener de page en page en toute quiétude.

Comment se connecter à son administration :
Aller sur http://www.over-blog.com
et rentrer les identifiants (si vous n'avez pas encore créé de blog, c'est le moment).


Et on arrive sur le tableau de bord...
Mais il y a des tas d'options...
ce n'est pas qu'une page avec plein de petits boutons. Ces petits boutons servent tous à quelque chose (si-si !).


Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
16 février 2009 1 16 /02 /février /2009 19:04

Pour ceux qui n'ont pas trouvé leur bonheur pour réparer l'album photo d'over-blog et qui ne peuvent patienter jusqu'à la prochaine version des albums photos over-blog avec la solution proposée dans l'article précédent, voici la solution radicale !!!!

Voici le code css à coller en mode avancé dans les onglets album et photo seule :

#galeries {width:100%; font-size:130%;}
.thumbsAlbum {padding:2px; width:99%; text-align:center; margin-right:auto; margin-left:auto;}
.thumbAlbum {display:inline; margin:3px;}
.thumbCouranteAlbum {display:inline; margin:3px;}
#photo {text-align:center;}
#photo img {margin: 2px auto;}
#descrAlbum {text-align:center;margin: 20px;}
#currentPhoto{ text-align:center; }
#currentPhoto img {margin: 0px auto; }

.precAlbum {float:left; position:relative; margin: 20px;}
.retourAlbum {position:relative;margin: 20px;}
.suivAlbum {float:right; position:relative;margin: 20px;}

#cl_0_0 {width:100%;}
#cl_1_0 {width:80%;}
#cl_2_0 {width:100%;}



Attention : il faut supprimer l'intégralité du css déjà présent dans ces onglets et ce dans les définitions d'affichages basiques et avancées (affichage du template, afficahge de la variation, structure de la variation, structure du template). Vous collez ce code dans la case de votre choix, vous laissez les autres vierges et vous enregistrer.

Il y a un bug actuellement sur Over-Blog : lorsque vous mofifiez le css des albums photos et que vous enregistrez, vosu devez vous identifier de nouveau sur l'administration. C'est gonflant, mais n'empêche en rien la modification du css car l'enregistrement est effectué...


Vos albums photos auront une structure propre, et afficheront le design du css définit dans GLOBAL.

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