- Personnalisation customisation et amelioration d’un blog blogger blogspot

Bouton retour vers le haut de la page

Voici une petite astuce qui va vous permettre d’ajouter un bouton "Haut de page" dans votre blog Blogger. Cela évite d'avoir à faire re-défiler manuellement le post jusqu'en haut.
Une icône "Haut de page" est présente en bas à droite de ce blog, cliquez dessus pour voir le résultat.
Vous pouvez utiliser l’icône de votre choix ou un simple texte "Haut de page" ou "Top" par exemple.

1. Allez dans présentation:

Connectez vous à Blogger, Allez dans "Mise en page", cliquez sur "Ajouter un gadget" puis sur "HTML/JavaScript" et copier / coller le code suivant :

2. Code:

Bouton retour haut de la page blogger

Remarque concernant le libellé menu

Quand tous les menus sont affichés ensemble cela créer un conflit (javascript) et ceux ci ne s'affichent pas correctement. Pour résoudre cela il suffit d'ouvrir le message dans une page unique (en cliquant sur le titre du post par exemple).

Quand toutes les pages sont affichées en même temps:

Même page ouverte seule:

Certains menus ne fonctionnent pas correctement quand ils sont affichés ensemble car ils utilisent les même scripts et les même images. Pour les voir correctement les ouvrir dans une seule page.

Fermer !

Menu vertical avec photo et couleur du lien actif changeantes

Ce post doit être ouvert seul pour fonctionner correctement!!!
Exemple:

Jeux Playstation 3 Creations graphiques Videos amusantes Jeux videos Optimisation-blogger

Code:

a.bouton:hover 
 {
 background-color: #FF6600;
 border-top:4px #FFCC00 solid;
 border-left:4px #FFCC00 solid;
 border-bottom:2px #CC0000 solid;
 border-right:2px #CC0000 solid;
 }
 </style>

<img border="0" name="imagename" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6sTCw5G8RGG3sCKPzOS6ACewfaQRx4pLgnMu0tOSfVark7kWIffwgXZEaFHvBYyV_H4ce7Y6nux3VBrWrp8VqEJiI_G43MTNGaeejOQuG3cwq0FcqQwrg8QMp8M6L1PuVEkaHyhpGgI/s1600/Site.jpg"width="227" height="180" />
<div class="link">

<a href="http://best-off-ps3.blogspot.com" class="bouton" onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image1.src" target="new">Jeux Playstation 3</a>
<a href="http://art-olivier.blogspot.com/" class="bouton" onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image2.src" target="new">Creations graphiques</a>
</div>
<div class="link">
<a href="http://mister-idiot.blogspot.com/"class="bouton"  onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image3.src" target="new">Videos amusantes</a> 
<a href="http://les-10-meilleurs.blogspot.com/"class="bouton"  onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image4.src" target="new">Jeux videos</a>
</div>

<div class="link">
<a href="http://optimisation-blogger.blogspot.com/"class="bouton1" onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image5.src">Optimisation-blogger</b></a>
</div>

Menu vertical photo couleur lien changeantes

Menu horizontal avec photo et couleur du lien actif changeantes

Ce post doit être ouvert seul pour fonctionner correctement!!!
Exemple:

Jeux Playstation 3 Creations graphiques

Videos amusantes Jeux videos

Optimisation-blogger

Code:

<STYLE> 
.link A { COLOR: #455a87; TEXT-DECORATION: underline} /* Rule 1 of embedded stylesheet */ 
.link A.bouton { BORDER-RIGHT: #868686 3px solid;
BORDER-TOP: #dbdbdb 3px solid;
DISPLAY: inline; /*block; */
FLOAT: left;
FONT-WEIGHT: bold;
BACKGROUND: #b9b9b9;
BORDER-LEFT: #dbdbdb 3px solid;
WIDTH: 175px;
BORDER-BOTTOM: #868686 3px solid;
TEXT-ALIGN: center;
TEXT-DECORATION: none} 
.link a.bouton:hover 
{
background-color: #FF6600;
border-top:4px #FFCC00 solid;
border-left:4px #FFCC00 solid;
border-bottom:2px #CC0000 solid;
border-right:2px #CC0000 solid;
}
.link
{
clear:both;
float:none;
display:block;
}

</STYLE>

<img border="0" name="imagename" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6sTCw5G8RGG3sCKPzOS6ACewfaQRx4pLgnMu0tOSfVark7kWIffwgXZEaFHvBYyV_H4ce7Y6nux3VBrWrp8VqEJiI_G43MTNGaeejOQuG3cwq0FcqQwrg8QMp8M6L1PuVEkaHyhpGgI/s1600/Site.jpg"width="356" height="286" />
<div class="link">

<STYLE> 
.link A { COLOR: #455a87; TEXT-DECORATION: underline} /* Rule 1 of embedded stylesheet */ 
.link A.bouton1 { BORDER-RIGHT: #868686 3px solid;
BORDER-TOP: #dbdbdb 3px solid;
DISPLAY: inline; /*block; */
FLOAT: left;
FONT-WEIGHT: bold;
BACKGROUND: #b9b9b9;
BORDER-LEFT: #dbdbdb 3px solid;
WIDTH: 356px;
BORDER-BOTTOM: #868686 3px solid;
TEXT-ALIGN: center;
TEXT-DECORATION: none} 
.link a.bouton1:hover 
{
background-color: #FF6600;
border-top:4px #FFCC00 solid;
border-left:4px #FFCC00 solid;
border-bottom:2px #CC0000 solid;
border-right:2px #CC0000 solid;
}
.link
{
clear:both;
float:none;
display:block;
} 
</STYLE>

<div class="link">
<a href="http://optimisation-blogger.blogspot.com/"class="bouton1" onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image5.src">Optimisation-blogger</b></a>
</div>

Menu horizontal photo couleur lien change

Menu horizontal dont la couleur du lien actif change

Exemple:

Diaporama Visuel Video

Texte HTML Fichiers

Aspect du blog Menus Gestion de blogger

Widgets Referencement Flux RSS

Code:

<STYLE> 
.link A { COLOR: #455a87; TEXT-DECORATION: underline} /* Rule 1 of embedded stylesheet */ 
.link A.bouton { BORDER-RIGHT: #868686 3px solid;
BORDER-TOP: #dbdbdb 3px solid;
DISPLAY: inline; /*block; */
FLOAT: left;
FONT-WEIGHT: bold;
BACKGROUND: #b9b9b9;
BORDER-LEFT: #dbdbdb 3px solid;
WIDTH: 150px;
BORDER-BOTTOM: #868686 3px solid;
TEXT-ALIGN: center;
TEXT-DECORATION: none} 
.link a.bouton:hover 
{
background-color: #FF6600;
border-top:4px #FFCC00 solid;
border-left:4px #FFCC00 solid;
border-bottom:2px #CC0000 solid;
border-right:2px #CC0000 solid;
}
.link
{
clear:both;
float:none;
display:block;
}

</STYLE>

<a href="http://optimisation-blogger.blogspot.com/search/label/Diaporamas" class="bouton">Diaporama</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/visuel" class="bouton">Visuel</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/video" class="bouton">Video</a>
</div>
<div class="link">
<a href="http://optimisation-blogger.blogspot.com/search/label/Texte" class="bouton">Texte</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/HTML" class="bouton">HTML</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Fichiers" class="bouton">Fichiers</a>
</div>
<div class="link">
<a href="http://optimisation-blogger.blogspot.com/search/label/Aspect%20du%20blog" class="bouton">Aspect du blog</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Menus" class="bouton">Menus</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Gestion%20de%20blogger" class="bouton">Gestion de blogger</a>
</div>
<div class="link">
<a href="http://optimisation-blogger.blogspot.com/search/label/Widget" class="bouton">Widgets</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Referencement" class="bouton">Referencement</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Flux%20RSS" class="bouton">Flux RSS</a>
<noscript></noscript>
</div>

Menu horizontal couleur lien actif change

Tableau muni de cases liens

Ce post doit être ouvert seul pour fonctionner correctement!!!
Exemple:

Jeux Ps3	Creations graphiques
Videos amusantes	Jeux videos

Optimisation-blogger

Remarques:

Pour que le lien soit la case entière et non simplement le texte qu'elle contient (et par conséquent que l'image présente change lorsque la sourie survole la case entière et non simplement le texte):

- Ne pas utiliser A href=""

Utiliser:

Pour ouvrir dans une autre page:

Pour ouvrir dans la même page:

<td onclick="location.href='URL'">Nom du lien</td>

Exemple avec le code du tableau présent dans cette page:

<td bgcolor="#232e35" onClick="window.open('http://art-olivier.blogspot.com','blank')" onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image2.src" target="_blank" width="119"><span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif;"><b>Creations graphiques</b></span></td>   </tr>

<tr>     <td bgcolor="#232e35" onClick="window.open('http://mister-idiot.blogspot.com','blank')" onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image3.src" target="_blank"><span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif;"><b>Videos amusantes</b></span></td>

<td bgcolor="#232e35" onClick="window.open('http://les-10-meilleurs.blogspot.com','blank')" onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image4.src" target="_blank"><span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif;"><b>Jeux videos</b></span></td>   </tr>
<tr>        </tr>
</tbody></table>

<table border="1" cellpadding="1" cellspacing="1" style="text-align: center; width: 250px;"><tbody>
<tr bgcolor="#730070">     <td bgcolor="#232e35" onclick="location.href='http://optimisation-blogger.blogspot.com/'" onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image5.src" target="_blank"><b><span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif;">Optimisation-blogger</span></b></td>   
</tr>
</tbody></table>

Tableau cases liens href sélection

Supprimer le message de blogger 'messages les plus récents portant le libellé...'

Si comme moi vous ne supportez pas ce message concernant les libellés:

Alors:

Alors allez dans présentation -> modifier le code Html tout en sélectionnant: 'dévelloper des modèles de gadgets':
Puis supprimez cette ligne:

<b:include data='top' name='status-message'/>

Résultat:

Si on veut le remettre:

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>

<b:loop values='data:posts' var='post'>

Augmenter la taille de l'image du titre du blog à plus de 970 pixels

Même si vous choisissez une photo supérieure en taille, Blogger réduit l'image du titre à 970 pixels.
Si vous avez augmenté la largeur de votre blog à plus de 1000 pixels (Tuto sur ce lien) le résultat ressemblera à cela:

L'image est trop petite et centrée à gauche ce qui n'est pas esthétique du tout.

1. Allez dans l'outil de création de modèles:

Tableau de bord -> Présentation -> Outil de création de modèle -> Avancé -> Ajouter le fichier CSS.
Puis ajouter ceci:

2. Résultat:

L'image à retrouvée sa taille initiale!

titre plus grand 970 pixels Blogger blogspot

Très joli menu vertical dont la couleur du lien actif change

Voici un très joli menu vertical. La couleur change selon la position de la sourie pour signaler un lien actif:

Diaporama Visuel Video Texte HTML Fichiers Aspect du blog Menus Gestion de blogger Widgets Référencement Flux RSS

Code:

a.bouton:hover 
 {
 background-color: #FF6600;
 border-top:4px #FFCC00 solid;
 border-left:4px #FFCC00 solid;
 border-bottom:2px #CC0000 solid;
 border-right:2px #CC0000 solid;
 }
</style>
<a href="http://optimisation-blogger.blogspot.com/search/label/Diaporamas" class="bouton">Diaporama</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/visuel" class="bouton">Visuel</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/video" class="bouton">Video</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Texte" class="bouton">Texte</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/HTML" class="bouton">HTML</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Fichiers" class="bouton">Fichiers</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Aspect%20du%20blog" class="bouton">Aspect du blog</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Menus" class="bouton">Menus</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Gestion%20de%20blogger" class="bouton">Gestion de blogger</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Widget" class="bouton">Widgets</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Referencement" class="bouton">Référencement</a>
<a href="http://optimisation-blogger.blogspot.com/search/label/Flux%20RSS" class="bouton">Flux RSS</a><noscript></noscript>

tres jo
li menu vertical couleur changeante blogger

Menu avec images changeantes selon le lien sélectionné

Ce post doit être ouvert seul pour fonctionner correctement!!!

Je trouve ce ceci très sympathique. Voici un exemple d'utilisation:

Jeux Playstation 3
Créations graphiques
Vidéos amusantes
Jeux vidéos
Optimisation-blogger

Code:

liens avec images menu selon texte blogger

Texte apparaissant façon machine à écrire

Superbe texte défilant

Bonjour je vous présente ce texte défilant type machine à écrire.
Comme vous le voyez vous pouvez sauter de ligne a tout moment attention on y va !.
Il suffit de mettre la balise
et voila.
Vous pouvez changer :

Le contenu HTML dans le div id="sticker"
Le style dans la feuille de style
Dans le script
- La vitesse d'écriture.
- Le temps de pause a la fin du texte.

Voila j'espère que la démo vous a plus.

Salut a tous les webmaster et bon surf a tous.
script trouvé sur Optimisation-blogger.blogspot.com

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Superbe texte défilant</title>
<style>
#ticker{font-family:cursive;color:blue;
}
</style>
  <script type="text/javascript">

</script>
</head>
<body >
<div id="ticker">Bonjour je vous présente ce texte défilant type machine à écrire.<br>
Comme vous le voyez vous pouvez sauter de ligne a tout moment attention on y va !.<br>
Il suffit de mettre la balise <br /> et voila.<br>
  Vous pouvez changer :
</p>
<ul>
  <li>Le contenu HTML dans le div id="sticker"</li>
  <li>Le style dans la feuille de  style </li>
  <li>Dans le script
    <ul>
      <li>La vitesse d'écriture.
  </li>
      <li>Le temps de pause a la fin du texte.</li>
    </ul>
  </li>
</ul>
   Voila j'espère que la démo vous a plus.<br>
Si vous voulez m'envoyer un mail voici mon adresse :<br>
ici ton adresse e-mail
<center>
  <p>Salut a tous les webmaster et bon surf a tous.
</p>
  <p>script trouvé sur Optimisation-blogger.blogspot.com</p>
</center>
</div>

</body>
</html>

texte t

Texte apparaissant type machine a ecrire

Texte Zoom in et Zoom out

Code:

/*
Inserer ici les messages à afficher
*/
var message2 = new initTableau(
"Optimisation-blogger.blogspot.com",
"vous propose",
"des tonnes de codes",
"pour votre site !"
);

/*
Déclaration de variables
vous pouvez modifier la vitesse et la taille de police max!
Attention : Plus vitesse est haut, plus la vitesse diminue!
*/
var vitesse = 1;
var cycle = 1000;
var taillemax = 36;
var police = "Arial";
var x = 0;
var y = 0;
var message, taille;

/*
Ne plus rien modifié sous cette ligne
*/

function initTableau() {
 this.length = initTableau.arguments.length;
 for (var i = 0; i < this.length; i++) {
  this[i] = initTableau.arguments[i];
    }
 }

function DiminueTaille(){
 if (x > 1) {
  x--;
  setTimeout("DiminueTaille()",vitesse);
  }
 else {
  setTimeout("AugmenteTaille()",cycle);
  y++;
  if (y > message2.length - 1) y = 0;
  }

if(navigator.appName == "Netscape" && navigator.appVersion.indexOf("5") == -1){
  taille = "<font point-size='"+x+"pt'>"; 
  document.calque.document.write(taille+"<center><font face=Arial>"+message+"</center></font></font>");
  document.calque.document.close();
  }
 /*
 Condition pour Netscape 6
 */
 if((navigator.appName == "Netscape") && (navigator.appVersion.indexOf("5") != -1)){
  document.getElementById("calque").innerHTML ="<center><font face="+police+" style='font-size:"+x+"px'>"+message+"</center></font>";

}

if (navigator.appVersion.indexOf("MSIE") != -1){
  calque.innerHTML = "<center><font face=Arial>"+message+"</center></font>";
  calque.style.fontSize=x+'px'
    }
 }

/*
On adapte le calque selon le navigateur
*/

if(navigator.appName == "Netscape" && navigator.appVersion.indexOf("5") == -1)
document.write('<layer id="calque"></layer><br>');
if((navigator.appName == "Netscape") && (navigator.appVersion.indexOf("5") != -1))
document.write('<DIV STYLE="font-size:12px" ID="calque"></DIV>');
if (navigator.appVersion.indexOf("MSIE") != -1)
document.write('<span id="calque"></span><br>');

setTimeout("AugmenteTaille()",vitesse);
</script><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript>

zoom texte elastique grossi retreci blogger

Problèmes dans une textarea -> Balise Br ou d’espace :

Blogger facilite la modification du code HTML en faisant pour nous les retours à la ligne <BR> lorsque l'on presse entré.
Cependant si cela est bien pratique il empêche néanmoins le bon fonctionement des zones de texte modulables <textarea> (Tuto ici).

Aussi il convient de désactiver cette option en indiquant d'utiliser des balises <BR>.

Explications en photos:

textarea balise br espace blanc <br> problème