samedi 19 mai 2012

Liens en italique ou en gras

Modifié et remonté
Vous pouvez faire apparaître vos liens en gras par exemple lorsqu'on les survole. Sur un des mes blogs - http://nbbc-fr.blogspot.com/, ils apparaissent en gras tout-le-temps pour être mieux repérés.

Recherchez a:link


a:link {
  text-decoration: none;
  color: $(link.color);
  font-weight:bold ;
}

a:visited {
  text-decoration: none;
  color: $(link.visited.color);
  font-weight:bold ;
}

a:hover {
  text-decoration: underline;
  color: $(link.hover.color);
  font-weight:bold ;
 font-style: italic
}

Il faut donc rajouter 
 font-weight:bold ; 
à chaque section si on veut que les liens soient en Gras tout-le-temps ou seulement à

a:hover {

  text-decoration: underline;

  color: $(link.hover.color);

si vous voulez qu'ils apparaissent en gras au survol de la souris (cela va être bientôt le cas ici).
font-weight:bold ;
Si voulez qu'il apparaissent en italique: 
font-style: italic
Si vous voulez changer la taille de la police (c'est le cas ici):
font-size:1.2em
Si vous ne voulez pas que les liens soient soulignés (ça fait vieux-jeu et c'est moins esthétique*!) mettez:text-decoration: none;
Si vous voulez au contraire jouer la tradition (liens soulignés):
text-decoration: underline;
Si vous voulez que votre lien clignote au survol (seulement les liens survolés, sinon ça peut devenir pénible et de mauvais goût):
text-decoration: blink;
(ne fonctionne pas sur ce modèle)
Pour faire clignoter un texte ou un lien, vous pouvez aussi utiliser les balises  <blink> texte</blink> (ne fonctionne pas sous IE et attention! à faire uniquement en mode HTML, si vous repassez en mode "rédiger", ça ne marche plus! Et d'ailleurs, ça ne fonctionne pas non plus ici. Il faudra que j'essaye sur un autre blog...)


Attention! dans 1.2em, il s'agit d'un point et non pas d'une virgule (système anglo-saxon). On peut mettre 0.8em tout aussi bien ou même 0.05em. Plus le nombre sera élevé plus la police sera grande. Il ne faut pas exagérer car cela peut devenir fatiguant pour les yeux car tout se déplace quand on survole les liens...

Attention! cette modification s'applique à tous les liens, y compris ceux de la barre latérale (barre des widgets).

* A ce propos, il est de "bon ton" de créer des blogs ou sites avec un texte faiblement contrasté. Ça m'horripile! Certaines pages deviennent ainsi quasiment illisibles... Ces webmasters pensent-ils un seul moment aux mal-voyants? Tout ça pour faire "tendance"...? A mon avis, c'est en voie de devenir démodé car inutile et anti-ergonomique... Si ça vous agace aussi, je vous conseille l'extension Stylebot pour Google Chrome qui permet de modifier l'aspect d'une page à la volée... que ça plaise ou non au webmaster!

lundi 14 mai 2012

AJAX, alternative aux Iframes?

Ajax permet aussi de faire des alternatives aux Iframes
http://www.fr.hscripts.com/scripts/ajax/contenu-dynamique.html

Voici un autre exemple, plus compliqué mais mieux expliqué:
http://www.zebulon.fr/dossiers/84-8-iframe-ajax.html

Balise OBJECT (tag)

http://joliclic.free.fr/html/object-tag/index.php

Incorporer un document HTML
<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>
incorporer un document pdf
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
  alt : <a href="data/test.pdf">test.pdf</a>
</object>

Vous pouver spécifier des paramètres relatifs au document par l'intermédiaire de la balise param. IE a parfois besoin du paramètre src pour localiser correctement la source.

incorporer un document wav
<object type="audio/x-wav" data="data/test.wav" width="200" height="20">
  <param name="src" value="data/test.wav">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
  alt : <a href="data/test.wav">test.wav</a>
</object>
Le paramètre autoplay est compréhensible par QuickTime, autoStart par Windows Media Player et Real Audio.


Pour certains types, comme les documents QuickTime, IE a besoin d'une valeur non standard pour l'attribut standard classid, un identifiant pour charger un activeX associé.

insertion d'un document QuickTime uniquement pour IE
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        width="320" height="240">
  <param name="src" value="data/test.mov" >
  alt : <a href="data/test.mov">test.mov</a>
</object>

Note: Les Objects ont un gros défaut par rapport aux Iframes, c'est que certains navigateurs affichent, même quand il n'y en a pas besoin, des "scrollbars"
D'après ce que j'ai compris, il faut ajouter à la feuille de style CSS:


body {
overflow:auto;
}


J'ai vu qu'on devait ajouter ce code à la page qui s'affiche dans l'object. C'est évidemment impossible quand il s'agit d'une page sur laquelle vous n'avez aucun contrôle. Mais je ne suis pas sûr de cela.

Par ailleurs, et c'est une bonne nouvelle, les iframes seraient maintenant à nouveau acceptés en HTML5.
Voir aussi: http://bernard.quevillier.pagesperso-orange.fr/toposnew/object.htm

dimanche 13 mai 2012

Variante iframe

Variante iframe

<p style="text-align: center; ">
<iframe align="center" bgcolor="#C9D3DE" frameborder="0" height="700" scrolling="Auto" src="http://meteo-weather3.blogspot.fr" target="_blank" width="640"></iframe></p>

Google Drive et Blogger - Améliorer son Blog


Google Drive tout comme DropBox peut être utilisé comme un véritable hébergeur Internet. L 'espace de stockage gratuit de 5 Giga autorise l'hébergement de pages html, de feuilles de style, de fichiers son ou d'animations Flash.
En savoir plus>>>

Nouveaux templates 2012

Il ne s'agit pas de nouveaux modèles de Google mais de créateurs

http://www.yourdigitalspace.com/2011/12/best-free-blogger-templates-2012/


samedi 12 mai 2012

GTMetrix

Gtmetrix.com permet de vérifier la conformité et la vitesse de téléchargement de votre site. Il donne ensuite des conseils pour l'optimiser. Le PDF des résultats vous est proposé en téléchargement.
Vous pouvez aussi "passer votre Blogspot à la moulinette" mais il est évident que nous ne pourrons pas tout optimiser étant donné que certains problèmes sont le fait de Google ou autres... Cet excellent outil en ligne est donc plutôt conçu pour les sites WEB classiques. Dommage, qu'il n'existe pas en Français... Précision, il n'optimise pas votre site évidemment, il l'analyse et vous donne des conseils.
GTMetrix est maintenant dans les liens.

IFRAMES

http://www.dyn-web.com/tutorials/iframes/
Un bon tutoriel pour manipuler les iframes de manière approfondie, en Anglais malheureusement.
Voici la traduction automatique à prendre comme d'habitude avec circonspection...
Traduction automatique


Rafraîchir un iframe en Javascript



<html>
<head>
<title>Untitled</title>
<SCRIPT LANGUAGE="JavaScript1.2">
function doit()
{
document.all.myframe.src="test.htm";
}
</SCRIPT>
</head>


<body>
juste un petit essai:<BR>
<IFRAME SRC="test.htm" NAME="myframe" WIDTH="200" HEIGHT="100"
ALIGN="middle"></IFRAME><BR>
<INPUT TYPE="button" VALUE="click" onClick="doit()">
</body>
</html>
Par http://forum.ovh.com/showthread.php?t=288

vendredi 11 mai 2012

Sélectionner tous les messages de Gmail

Cela n'a pas grand-chose à voir avec Blogger mais ça peut être intéressant tout de même.
Aussi bizarre cela puisse-t-il paraître mais Google n'a quasiment rien prévu (ou presque) pour sélectionner ABSOLUMENT TOUS les messages d'un compte Gmail (et leur appliquer une action).

Ce que j'ai trouvé:

  • Taper dans la barre de recherche de Gmail: is:unread*
  • Puis cliquez sur le logo de recherche.
  • Ensuite, cliquez sur le bouton de sélection (le carré en haut à gauche de la liste des messages)
  • Cliquez sur le bouton "marquer comme lu" (ou autre)
  • A un moment ou à l'autre, Gmail va vous proposer d'appliquer cette action à absolument TOUS les messages
Il doit y avoir une autre solution avec les filtres et les libellés.

*Pour les messages "lu" il faut faire is:read

mardi 8 mai 2012

Supprimer "Accueil", "messages plus récents" et "Messages plus anciens"

Pour supprimer les mentions "Messages plus récents - Accueil - Messages plus anciens" ajouter le code qui suit dans un gadget HTML/Javascript (cela évite de modifier le "modèle" ou "template"):

<style type="text/css">.blog-pager{display: none;}.blog-pager-newer-link{display: none;}.blog-pager-older-link{display: none;}</style>

http://modifier-les-modeles-de-blogger.blogspot.com/2009/11/supprimer-les-mentions-plus-recents.html