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... !

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.

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;}

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...

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.