dimanche 25 septembre 2011

Supprimer la mise en forme après un copier-coller

Quand on fait un copier-coller depuis un autre message ou un autre Blog, il peut se produire des problèmes de style, voire des conflits...

2 solutions possibles pour y remédier:

Faire d'abord un copier-coller dans le Bloc-Note, puis du Bloc-note au nouveau message. Mais vous perdrez les liens et il faudra les reconstituer
Plus rentable: faire le copier-coller directement dans le nouveau message, sélectionner tout le message puis cliquer sur l'icône "Supprimer la mise en forme"

Migration

J'ai créé il y a 2 ans de cela un Blog pour une collègue. Mais suite à une mutation, elle ne peut plus s'en occuper. En attendant qu'un ou une autre collègue se décide à s'en occuper, j'ai décidé de m'y mettre moi-même. J'ai le mot de passe et je pense que je peux retrouver l'email du compte.
Voici ce que j'ai trouvé sur http://mestrucspourblogger.blogspot.com

Modifier le compte gmail associé à un blog

Il peut arriver que l'on ait envie de transférer la gestion d'un blog sur un autre compte Google. Cette possibilité n'est pas prévue fonctionnellement dans Blogger.
Néanmoins, il est possible d'y arriver.

La 1ère possibilité est de créer un nouvel administrateur où nous mettrons notre nouvelle adresse gmail (celle du nouveau compte). Il y aura 2 administrateurs en charge du blog. Le plus ancien (inactif) et le plus récent qui assurera la gestion.
La 2ème option, qui est aussi le prolongement de la précédente est de transférer complètement la gestion du blog au nouveau compte.

On supprimera à l'issue la gestion des droits accordés au compte le plus ancien.

vendredi 23 septembre 2011

Pop up avec focus

http://www.nowsell.com/pop-ups/pop-under-scripts.html
Intéressant mais en Anglais

mardi 20 septembre 2011

STYLE DANS "BODY"

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="font-family:Arial; font-weight:normal; font-size:11; text-align:justify;">

Autre exemple:
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="font-family:Arial; font-weight:normal; font-size:11; letter-spacing:1; text-align:justify; line-height:150%;">

Note: fréquemment, Blogger n'accepte pas les guillemets ("). Remplacez-les par une apostrophe (')

dimanche 18 septembre 2011

Désactiver la "LightBox"

Désactiver la Lightbox (aperçu des images ou visionneuse)

Grande nouveauté surprise pour les Blogger, depuis 2 jours votre blog bénéficie d'une visionneuse pour les images figurant dans vos messages.
Accueil mitigé chez les utilisateurs pour cette nouvelle fonctionnalité qui a été pourtant réclamée haut et fort.
Malgré cela, il y a toujours des mécontents.
Sachez que les ingénieurs Blogger travaillent actuellement au développement. Les améliorations sont attendues avec impatience.
Je vous invite à rejoindre le forum Blogger et à partager vos réactions qui seront remontées jusqu'à l'équipe qui est à votre écoute.
Fournissez un maximum de détails expliquant pourquoi cette nouvelle fonctionnalité vous convient ou pas.
En vous remerciant pour votre participation.
Question fréquente : Comment la désactiver ? Beaucoup d'entre-vous ont souhaité désactiver le lightbox.
N'utilisez le code ci-dessous que si vous ne voulez plus entendre parler de la visionneuse ou si vous ne pouvez pas attendre les évolutions !

Dans votre tableau de bord :

► Modèle ► Modifier le code HTML

Vous ajoutez le code ci-dessous juste avant la balise </html>

<script type='text/javascript'>
gooimg = document.getElementById('main');
goobox = gooimg.innerHTML;
goobox = goobox.replace("'lightboxEnabled': true,","'lightboxEnabled': false,");
gooimg.innerHTML = goobox;
</script>

http://bloggercode-blogconnexion.blogspot.com/2011/09/visioneuse-blogger.html

Optimiser les images

http://www.leblogger.com/2010/04/optimiser-affichage-image-blogger-photo.html

Positionner des images côte à côte

Lorsque l'on a plusieurs photos à présenter côte à côte, il suffit de créer un tableau...
Pour ce faire, il faut copier le code suivant (pour 2 colonnes et 2 lignes) et le coller dans votre nouveau post (modifier code html) ce qui va créer un tableau de 4 cellules. Ensuite, changez les adresses des images et les dimensions. Un éditeur de texte amélioré comme PSPad permettra de rechercher/remplacer les dimensions rapidement. Note: évitez d'afficher les bordures des cellules, ce n'est vraiment pas esthétique... ou alors utilisez des bordures pâles et larges.

<tbody>

<tr>

</table>

Une solution encore plus simple est de les positionner d'abord les unes au-dessous des autres classiquement, les dimensionner en "petit", placer le curseur juste avant la deuxième image puis "Retour arrière" au clavier... (<-). On peut ensuite les agrandir à condition que la largeur de vos messages le permette, sinon, elle se remettront automatiquement les unes au-dessous des autres. Exemple (sans tableau):

Si les marges vous gênent, il suffit d'aller dans le code html de votre message et de supprimer ou de modifier:

style="margin-left: 1em; margin-right: 1em;"

Vous pouvez par exemple mettre 0.05em comme pour les images ci-dessus (on peut remplacer "em" par "px" ou "%")

samedi 17 septembre 2011

Actualiser image sans recharger la page

Actualiser une image sans recharger la page (j'ai essayé sur Blogger mais ça marche pas..!).

A tester: http://forums.macgeneration.com/developpement-web/rafraichir-une-image-167863.html

ici, il y a une partie à mettre dans le head (en bleu) et une partie dans le body (en vert). Ce qui est important est en gras. Bien sûr, comme d'hab', y a des choses à changer (en rouge mais faut tester d'abord tel-quel). Je conseillerais de faire un essai sur un blog qui ne vous sert qu'aux tests. J'en ai un, je m'en sers aussi pour y stocker des widgets dont je ne me sers plus et des images, etc... C'est mon débarras!

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var delay=10 // ici 10 secondes
var img="image"; // ici nom de l'image a recharger
var src="http://www.toutjavascript.com/gif/logo/bantjs21.gif"
// fonction ‡ appeler dans le onload de BODY
function RefreshIMG() {
setTimeout("RefreshIMG()",delay*1000);
document.images[img].src=src+"?a="+Math.random(1);
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#FFFFFF" alink="#000066" link="#000066" vlink="#000066" onLoad="RefreshIMG()">

<FONT FACE="Arial" SIZE='-1' COLOR="#000099">
<CENTER><BIG>Comment rafraichir une image sans recharger la page</BIG></CENTER>
Ce script permet de rafraichir une image toutes les X secondes sans recharger la page complËtement.<BR>
Très pratique pour un graphique en temps réel ou une image de webcam.<BR>
<BR><BR>
</FONT></BODY></HTML>

Pour faire un essai tel quel dans Blogger:

Copier la partie en bleu dans le head sans rien modifier puis modifier la balise body avec celle en vert. Résultat non garanti.

Widget "Texte"

Le widget "texte" proposé par Blogger est intéressant car il permet de faire passer une info mais malheureusement son éditeur html comme celui du widget javascript/html est plutôt pauvre en fait de "texte enrichi"...
Une solution bien pratique:
Créez un nouveau message sur n'importe lequel de vos blogs, travaillez et mettez en forme votre texte, rajoutez une image, etc...copiez le code html de ce message puis collez-le dans l'éditeur du widget "texte" ou "javascript/html"... Bien sûr, n'envoyez pas le message!

Et voilà!
Notez que vous pouvez aussi utiliser CKEditor ou n'importe quel autre Editeur Web.

vendredi 16 septembre 2011

ACTUALISER PAGE

setTimeout("document.location.href='http://st-martin-basic.blogspot.com/2011/07/sismographe-dernieres-24-h-de-porto.html'", 300000);

</script>

Code sticker wunderground St Barths & Anguilla avec ou sans webcam

Infos à usage perso. Non commenté pour l'instant

Original pour St Barths
(webcam changée, dimensions et langue)

<object height="400" width="500"><param name="movie" value="http://www.wunderground.com/swf/pws_mini_rf.swf?station=ISTBARTH2&freq=5.0&camurl=http://81.248.11.35/jpg/image.jpg&units=metric&lang=FR" />
<embed src="http://www.wunderground.com/swf/pws_mini_rf.swf?station=ISTBARTH2&freq=5.0&camurl=http://81.248.11.35/jpg/image.jpg&units=metric&lang=FR" type="application/x-shockwave-flash" width="500" height="400" /></object>

<object height="300" width="290"><param name="movie" value="http://www.wunderground.com/swf/pws_mini_rf.swf?station=ITHEVALL2&freq=5.0&camurl=http://st-martin-studio.com/java/image.jpg&units=metric&lang=FR" />
<embed src="http://www.wunderground.com/swf/pws_mini_rf.swf?station=ITHEVALL2&freq=5.0&camurl=http://st-martin-studio.com/java/image.jpg&units=metric&lang=FR" type="application/x-shockwave-flash" width="290" height="300" /></object>

OK St Barths avec webcam

<object height="500" width="640"><param name="movie" value="http://www.wunderground.com/swf/pws_mini_rf.swf?station=ISTBARTH2&freq=5.0&camurl=http://81.248.11.35/jpg/image.jpg&units=metric&lang=FR" />
<embed src="http://www.wunderground.com/swf/pws_mini_rf.swf?station=ISTBARTH2&freq=5.0&camurl=http://81.248.11.35/jpg/image.jpg&units=metric&lang=FR" type="application/x-shockwave-flash" width="640" height="500" /></object>

OK Anguilla avec webcam

<object height="500" width="640"><param name="movie" value="http://www.wunderground.com/swf/pws_mini_rf.swf?station=ITHEVALL2&freq=5.0&camurl=http://st-martin-studio.com/java/image.jpg&units=metric&lang=FR" />
<embed src="http://www.wunderground.com/swf/pws_mini_rf.swf?station=ITHEVALL2&freq=5.0&camurl=http://st-martin-studio.com/java/image.jpg&units=metric&lang=FR" type="application/x-shockwave-flash" width="640" height="500" /></object>

Anguilla d'origine (sans webcam) pour comparaison

<object width="290" height="130"><param name="movie" value="http://www.wunderground.com/swf/pws_mini_rf_nc.swf?station=ITHEVALL2&freq=2.5&units=metric&lang=FR" /><embed src="http://www.wunderground.com/swf/pws_mini_rf_nc.swf?station=ITHEVALL2&freq=2.5&units=metric&lang=FR" type="application/x-shockwave-flash" width="290" height="130" /></object>

Test st barth sans webcam (OK)

<div style="text-align: center;">
<object width="480"><param name="movie" value="http://www.wunderground.com/swf/pws_mini_rf_nc.swf?station=ISTBARTH2&freq=2.5&units=metric&lang=FR" />
<embed src="http://www.wunderground.com/swf/pws_mini_rf_nc.swf?station=ISTBARTH2&freq=2.5&units=metric&lang=FR" type="application/x-shockwave-flash" width="480" /></object></div>

Test TNCM (Juliana Airport, St Martin) (OK)
Mais se met à jour seulement chaque heure (probablement)

<object height="640" width="640"><param name="movie" value="http://www.wunderground.com/swf/pws_mini_rf.swf?station=TNCM&freq=5.0&camurl=http://st-martin-studio.com/java/image.jpg&units=metric&lang=FR" />
<embed src="http://www.wunderground.com/swf/pws_mini_rf.swf?station=TNCM&freq=5.0&camurl=http://st-martin-studio.com/java/image.jpg&units=metric&lang=FR" type="application/x-shockwave-flash" width="640" height="640" /></object>

mardi 13 septembre 2011

TuxNotes

Nouveau!
Je viens de créer sur le même modèle TuxNotes pour mes notes concernant mon Linux Debian Crunchbang...
Bon, c'est à peine commencé, alors laissez-moi le temps!

http://tuxnotes.blogspot.com/

samedi 10 septembre 2011

WUBLAST (à copier-coller)

Perso:

<div align="center">
<table background="http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=18.04999924&lon=-63.11999893&zoom=4&width=500&height=400&key=sat_ir4&basemap=1&gtt=60&num=1&timelabel=1&delay=25&borders=1&theme=WUBLAST_WORLD&extension=png&proj=ll" cellpadding="0" cellspacing="0" height="400" style="width: 500px;"><tbody>
<tr><td style="text-align: center;"><img alt="" src="http://dl.dropbox.com/u/19586410/METEO/WUBLAST-calque.gif" style="border-bottom-style: solid; border-bottom-width: 0px; border-left-style: solid; border-left-width: 0px; border-right-style: solid; border-right-width: 0px; border-top-style: solid; border-top-width: 0px; height: 400px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; width: 500px;" /></td></tr>
</tbody></table>
</div>

LINUX

Depuis à peu près 1 an, j'ai franchi le pas... Fini Windows et ses lenteurs, je suis passé à LINUX Debian CrunchBang sur mon EeePC. Ce n'était pas la première fois, mais à chaque fois, pour de multiples raisons, j'étais revenu à Windows XP.
Tout comme le HTML et les trucs de Blogger, j'avais créé un BlocNote Google pour mes trucs et bidouillages Linux. Maintenant, on pourra trouver des posts Linux et les retrouver graâce au Libellé (Label) "LINUX" ou "DEBIAN". Je rappelle qu'il s'agit avant tout pour moi d'un mémento donc je n'ai aucun scrupules à picorer des trucs un peu partout... Mais bon, je mettrai les liens si possible, sauf quand il s'agit de trucs bien connus.
A noter que l'EeePc 900 fonctionne très bien même aux Antilles en été (pas de surchauffe) et que je l'utilise le plus souvent en ordinateur de bureau avec un moniteur Belinea de 17 pouces.

vendredi 9 septembre 2011

Cyclone Maria sur les Petites Antilles...

Peu de nouveautés à venir ce weekend avec l'arrivée du Cyclone Maria qui va m'obliger à bien d'autres occupations et préparatifs. Maria est une simple Tempête Tropicale mais avec des vents à 100 km/h possibles, il faut rester vigilant.

Toutes les informations heures par heures sur mon Blog http://st-martin-meteo-weather.blogspot.com...

Tempête Tropicale Maria

On parle de BlogNotes (blogtricker.blogspot.com) sur Zorgloob!

Le 9 septembre 2011

Google Guadeloupe piraté

Par TOMHTML

Une partie du site guadeloupéen a été détournée par des hackers marocains.

Depuis quelques heures – voire quelques jours – le site Google.gp a été détourné par « dr@g », qui se présente comme un collectif de hackers marocains. Le logo du moteur de recherches et son fond blanc ont laissé place à un message en arabe sur une page au fond noir.

Google.gp détourné (cliquez pour agrandir)

Que les internautes de la Guadeloupe se rassurent, les serveurs de Google sont sains et saufs. Il s’agit très probablement d’un détournement DNS, comme cela a été le cas il y a quelques temps avec Google Algérie, Porto-Rico, Ouganda, Bangladesh et d’autres. En effet, vous constaterez que WWW.google.gpfonctionne toujours correctement.

Ensuite, une rapide recherche sur ces pirates permet de découvrir qu’ils ont également détourné d’autres sites ces dernières 48 heures : hotmail.gp, aol.gp, msn.gp, … Ce groupe s’est également attaqué à d’autres extensions de noms de domainesl’an dernier.

Mise à jour du 9 septembre, 09h36 : le problème a été corrigé ce matin en ce qui concerne Google. Les autres sites mentionnés ci-dessus sont toujours impactés à cette heure.

Un grand merci au webmaster de blogtricker.blogspot.com de nous avoir averti !

Publié le 9 septembre 2011 à 1:23 par TOMHTML dans Actualité

http://www.zorgloob.com/

jeudi 8 septembre 2011

Google.gp hacké!

Je viens de me rendre compte à l'instant que Google.gp a été hacké par des Marocains...

mardi 6 septembre 2011

Ligne horizontale simple

Pour insérer facilement une ligne horizontale simple. Aller dans Présentation > Eléments de la Page puis créer un nouveau widget HTML/Javascript et insérer dedans ce code... Placez votre widget où vous voulez...

Vous pouvez changer la largeur width='70%' par exemple...

Supprimer Libellé

Supprimer l'affichage du Libellé (label) au bas des messages...
Plusieurs solutions sur le forum http://www.google.com/support/forum/p/blogger

Ma solution perso est radicale !
En reprenant la réponse de Prac, j'ai résolu mon problème...
Cherchez le bloc div: post-footer-line-1

Vérifier qu il y a ceci après...

     <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

J'ai donc supprimé le div au complet, et plus de problèmes

Masquer Libellés (Labels)

Il existe une option dans les paramètres des messages pour empêcher l'affichage du libellé à la fin de chaque message mais ça ne fonctionne pas toujours...
Trouvé sur www.google.com/support/forum/p/blogger

Parametres / Mise en page / Modifier HTML

avant

#navbar {display: none;}
body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:#29303b;
line-height:1.3em;
background:#483521 url("http://www2.blogblog.com/scribe/bg.gif") repeat;
}

placer ceci

.post-header-line-1
{
display: none;
}

barre horizontale de liens (3)

blogger-au-bout-du-doigt.blogspot.com

Voici ce que j’ai découvert pour mettre une barre de navigation (catégorie, menu, etc.) à l’entête de son blog :

1.Ajouter les variables suivantes juste à la fin de la liste des variables

<Variable name="mainLinkbarBgColor" description="Main Linkbar Background Color"
type="color" default="#000000">
<Variable name="linkbarTextColor" description="Linkbar Text Color"
type="color" default="#ffffff">
<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"
type="color" default="#7f7f7f">
<Variable name="linkbarbgColor" description="Linkbar Background Color"
type="color" default="#6131BD">
<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"
type="color" default="#ffffff">
<Variable name="linkbarBorderColor" description="Linkbar Border Color"
type="color" default="#7f7f7f">

2. Ajouter les codes Css en bleu juste avant la balise en rouge

/* ----- LINKBAR ----- */
#linkbar {
margin: 0px 0px 0px 0px;
padding: 0px 40px 0px 40px;
background: #113355;
border-bottom: 1px solid #113355;
}
#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
list-style-type:none;
}
#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}
#linkbar a {
margin: 0px -10px 0px 0px;
padding: 2px 10px 2px 10px;
width:100%px;
text-decoration:none;
font: normal normal 75% Trebuchet, Trebuchet MS, Arial, sans-serif;
color: #FFFFFF;
background: #6131BD; (note à effacer ainsi que la parenthèse : les chiffres est le code de la couleur d’arrière plan)
border: 1px solid #FFFFFF; (note à effacer ainsi que la parenthèse : les 4 F sont le code de la couleur des titres qui s’afficheront)border-top: 0;
}
#linkbar a:hover, #linkbar a:active {
color: #6131BD; (note à effacer ainsi que la parenthèse : les chiffres après # sont le code de la couleur des titres qui s’afficheront au passage du curseur)background: #ffffff; (note à effacer ainsi que la parenthèse : les 4 F sont le code de la couleur d’arrière plan quand le curseur est sur le titre)
}]]></b:skin>
</head>

3. Mettre les codes en bleu dans votre outer-wrapper (ou outer wrap)

<div id='wrap'>
<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' maxwidgets='1' showaddelement='no'>

<b:widget id='LinkList12' locked='false' title=' ' type='LinkList'/>

</b:section>

</div>

</div>

<div id='header_wrap'>
4.Enregistrer son modèle

5. Se rendre sur "éléments de la page" et voir le nouveau widget Liste des liens juste au-dessus de l'en-tête. Cliquer sur modifier pour y ajouter les liens qui vont apparaître dans votre barre horizontale.

Si vous voulez afficher la barre de navigation juste après l'entête, mettez les codes en bleu ci-dessous après ceux en rouge (pour l'en-tête)

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>

<b:section class='linkbar' id='linkbar' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList12' locked='false' title=' ' type='LinkList'/>
</b:section>

barre horizontale de liens (2)

Trouvé dans parcdusavoir.blogspot.com
Voici un autre tutoriel qui va vous permettre de créer une barre horizontale de navigation (barre de menu avec liens) dans votre blog Blogger/Blogspot.
Deux simples copier/coller suffisent pour appliquer cette astuce et vous avez le choix entre cinqs magnifiques barres horizontales comme celles-ci: (Démonstration ici)

Installation

Etape 1

Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML" et recherchez (Ctrl + F) le code suivant: </head>et juste avant ajoutez cette ligne:

<link href='http://blogspot.leblogger.com/css/glossyMenu.css' rel='stylesheet' type='text/css'/>

Etape 2

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

<ul class="glossymenu">
    <li class="current"><a href="http://www.exemple.com/"><b>Accueil</b></a></li>
    <li><a href="http://www.exemple.com/2009/06/astuce-blogger-astuces.html"><b>Astuces</b></a></li>
    <li><a href="http://www.exemple.com/2009/06/widget-gadget-blogger.html"><b>Widgets</b></a></li>
    <li><a href="http://exemple.com"><b>Souhaits</b></a></li>
    <li><a href="http://www.exemple.com/"><b>Contact</b></a></li>
</ul>

-Ensuite déplacez ce widget en dessous de votre entête comme sur l’image:

Personnalisation

(Modifiez uniquement le code de l'étape 2)

Choisissez parmi les 5 barres celle que vous voulez, puis remplacez glossymenu avec:

glossymenu
glossymenu bleu
glossymenu vert
glossymenu orange
glossymenu violet

Remplacez les liens en rouge avec vos propres liens.

Forme générale d’un lien:

<li><a href="http://www.exemple.com/2009/06/widget-gadget-blogger.html"><b>Widgets</b></a></li>

Voilà votre blog a une barre horizontale des liens ce qui va considérablement améliorer la navigation.
Version simple de la barre de navigation.

barre horizontale de liens

Trouvé sur www.leblogger.com
Voici un tutoriel très simple pour vous permettre de créer une barre horizontale de liens dans votre blog Blogger/Blogspot.

La barre des liens est complètement personnalisable: taille des liens, couleur des liens,couleur de l'arrière plan, liens texte ou image, icône à coté de chaque lien, ouverture dans une nouvelle fenêtre, etc. Tout cela en ajoutant un simple widget à votre blog et sans modifier le code HTML de votre Template. Résultat:

Installation:
Connectez vous à Blogger, Allez dans "Mise en page", cliquez sur "Ajouter un gadget" puis sur "HTML/JavaScript" et copier/coller le code suivant: (Remplacez le texte en rouge avec vos propres liens)

<a href="http://www.leblogger.com/"><b>Accueil</b></a> |
    <a href="http://www.leblogger.com/2009/06/astuce-blogger-astuces.html"><b>Astuces</b></a> |
    <a href="http://www.leblogger.com/2009/06/widget-gadget-blogger.html"><b>Widget</b></a> |
    <a href="Votre Lien ici"><b>Référencement</b></a>    |
    <a href="Votre Lien ici"><b>Vos Souhaits</b></a>   |
    <a href="Votre Lien ici"><b>Me Contacter</b></a>

-Ensuite déplacez ce widget en dessous de l'entête de votre blog comme sur l’image suivante:

Personnalisation :

Forme générale d’un lien texte :
<a href="http://www.leblogger.com/">Accueil</a>
Forme générale d’un lien Image :
<a href="http://www.leblogger.com/"><img src="L'adresse/URL de l'image"></a>
Pour changer la couleur et la taille d’un lien ajoutez <font color="blue" size="3">comme ceci :
<a href="http://www.leblogger.com/"><font color="blue" size="3">Accueil</a>
Pour agrandir tous les liens en même temps ou appliquer une même couleur à tous les liens, placez <font size="3"> ou <font color="blue" > au tout début du code.
Pour aligner les liens à gauche (left), à droite (right) ou au center (center), ajoutez<div style="text-align: left;"> au tout début du code.
Pour changer la couleur de l'arrière plan d'un lien ajoutez <span style="background-color: #00FFFF;"> comme ceci:
<a href="http://www.leblogger.com/"><span style="background-color:#00FFFF;">Accueil</a>
Pour ouvrir les liens dans une nouvelle fenêtre ajouter target="_blank" comme ceci :
<a target="_blank" href="http://www.leblogger.com/">Accueil</a>