lundi 22 août 2011

Mon Bloc-Note d'origine


ASTUCES trouvées sur le WEB ou Trucs personnels...

Il s'agit plutôt d'un pense-bête. Tout est mélangé et pas toujours commenté... Un jour peut-être je l'organiserai...
ADAPTER hauteur iframe au contenu (voir si ça fonctionne)
<iframe id="IFRAME" onload="this.height=this.contentWindow.document.height" src="lapage.htm"></iframe>


SUPPRIMER NAVBAR
Une petite astuce assez simple pour enlever la navbar blogger.
Qu'est ce la navbar blogger?
La navbar blogger est un outil de navigation présent en haut de l'écran.     
La Navbar apparaît sur tous les blogs BlogSpot hébergés gratuitement. Cette barre est disponible en quatre couleurs, que vous pouvez choisir dans l'onglet Modèle de l'interface de Blogger.
Ceci dit si elle ne vous "plait" pas, vous pouvez la cacher.
Pourquoi la supprimer?
Pour certains, cette barre est signe d'un design peu professionnel... De plus, elle peut conduire le visiteur à quitter plus rapidement votre blog et donc des visites de moins bonne qualité.
Donner moi votre avis en commentaires...
 Pour cela : 
1- Rendez vous dans "mise en page" puis à modifier le code Html.
2- Rechercher (ctrl+F) la ligne de code suivante :  ]]>< /b:skin > 
3-Copier le code suivant :  
#navbar-iframe {height:0px;visibility:hidden;display:none}

juste avant
]]>< /b:skin >
Vérifier que la navbar n'est plus visible sur votre blog, voilà l'objectif est réalisé.
Icones traduction de blog
<!--Américain-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cen&hl=fr&ie=UTF8'); return false;" title="American"><img style="cursor:pointer; cursor:hand;" alt="English" src="http://lewordpress.com/Blogger/Image/Flags/USA.png" title="Translate this page to American"/></a><a href='http://www.leblogger.com' style='display:none;'>blogger</a>
<!--Anglais-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cen&hl=fr&ie=UTF8'); return false;" title="English"><img style="cursor:pointer; cursor:hand;" alt="English" src="http://lewordpress.com/Blogger/Image/Flags/England2.png" title="Translate this page to English"/></a><a href='http://www.leblogger.com' style='display:none;'>blogger</a>
<!--Espagnol-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Ces&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="español" src="http://lewordpress.com/Blogger/Image/Flags/Espagne.png" title="traducir esta página al español"/></a><a href='http://www.leblogger.com' style='display:none;'>blogger</a>
<!--Italien-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cit&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="Italiano" src="http://lewordpress.com/Blogger/Image/Flags/Italie.png" title="Traduci questa pagina in Italiano"/></a><a href='http://www.leblogger.com' style='display:none;'>blogger</a>
<!--Allemand-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="deutsch" src="http://lewordpress.com/Blogger/Image/Flags/Allemagne.png" title="diese Seite auf deutsch"/></a><a href='http://www.leblogger.com' style='display:none;'>blogger</a>
<!--Arabe-->
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Car&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="العربية" src="http://lewordpress.com/Blogger/Image/Flags/Arabie.png" title="ترجمة هذه الصفحة إلى العربية"/></a><a href='http://www.leblogger.com' style='display:none;'>blogger</a>
position titre
<Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none" value="none"/>
<Variable name="header.padding.top" description="Header Top Padding" type="length" default="0px" value="0px"/>
<Variable name="header.margin.top" description="Header Top Margin" type="length" default="0" value="0"/>
<Variable name="header.margin.bottom" description="Header Bottom Margin" type="length" default="0" value="0px"/>
NUAGE DE MOTS
Créer un nouveau widget avec un titre puis le rechercher dans le code html:
Rechercher <b:widget id=' et ajouter à la main le code ci-dessous entre <b:widget id=' et </b:widget>
<b:widget id='Label5' locked='false' title='Libellés' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
        <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
        <object type="application/x-shockwave-flash" data="http://st-martin-studio.com/public_html/tagcloud00.swf" width="250" height="250" allowscriptaccess="always" >
            <param name="movie" value="http://st-martin-studio.com/public_html/tagcloud00.swf" />
            <param name="bgcolor" value="#ffffff" />
            <param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=150&tagcloud=<tags>
          <b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='10'><data:label.name/></a>
</b:loop>
</tags>" />
            <p> Un <a href='http://www.leblogger.com/2009/07/libelle-nuage-mots-cles-flash-blogger.html'>Nuage en Flash</a> par <a href='http://www.leblogger.com/'>Le Blogger</a></p>
        </object>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
Favicon personnalisé
<link rel="icon" href="http://dl.dropbox.com/u/19586410/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="http://dl.dropbox.com/u/19586410/favicon.ico" type="image/x-icon"/>
mais le favicon ne s'affiche pas dans tous les navigateurs
Attention, Blogger réécrit le code ensuite, c'est normal.
Générer des images
One of our websites uses this script to generate a random top banner image. 
This is the site 
Here is the script in the HEAD portion 
Code: <SCRIPT LANGUAGE=JavaScript><!-- Hide this script from old browsers -- 
var imagenumber = 7 ; 
var randomnumber = Math.random() ; 
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ; 
images = new Array 
images[1] = "banner1.jpg" 
images[2] = "banner2.jpg" 
images[3] = "banner3.jpg" 
images[4] = "banner4.jpg" 
images[5] = "banner5.jpg" 
images[6] = "banner6.jpg" 
images[7] = "banner7.jpg" 
var image = images[rand1] 
// -- End Hiding Here --></SCRIPT> 
<SCRIPT LANGUAGE=JavaScript><!-- Hide this script from old browsers -- 
var imagenumber = 5 ; 
var randomnumber = Math.random() ; 
var rand2 = Math.round( (imagenumber-1) * randomnumber) + 1 ; 
images = new Array 
images[1] = "frontpic1.jpg" 
images[2] = "frontpic2.jpg" 
images[3] = "frontpic3.jpg" 
images[4] = "frontpic4.jpg" 
images[5] = "frontpic5.jpg" 
var image2 = images[rand2] 
// -- End Hiding Here --></SCRIPT>
This code is the BODY portion 
Code: <BODY BGCOLOR="#DBDFD4" marginheight=0 topmargin=0 marginwidth=0 leftmargin=0> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=621 HEIGHT=77 align="center"> 
  <tr> 
      <td><img src="topbanner.gif" width="620" height="27" align="top" alt="Top Banner"></td> 
    </tr> 
   <TR> 
      <TD VALIGN=top> 
         <P><IMG SRC="toplogo.gif" ALT="Cresco Homes" WIDTH=189 HEIGHT=77 ALIGN=top><SCRIPT LANGUAGE=JavaScript><!-- Hide this script from old browsers -- 
document.write('<IMG SRC="' + image + '" width=431 height=77 align=top>') 
// -- End Hiding Here --></SCRIPT> 
      </TD> 
   </TR>
Perhaps the "' + image + '" can be placed in the BODY tag for the background image. Play with it and see what happens.
Rafraîchir une image
<!-- Code Begin --> 
           
          <IMG src="image_name.jpg" width="275" height="200" border="1" name="refresh"> 
          <SCRIPT language="JavaScript" type="text/javascript"> 
          <!-- 
          var t = 120 // interval in seconds 
          image = "image_name.jpg" //name of the image 
          function Start() { 
          tmp = new Date(); 
          tmp = "?"+tmp.getTime() 
          document.images["refresh"].src = image+tmp 
          setTimeout("Start()", t*1000) 
          } 
          Start(); 
          // --> 
          </SCRIPT> 
          <!-- Code End --> 
Réduire ou augmenter la marge au-dessus de l'en-tête:
Modifier le code HTML
Cocher "développer des modèles de gadget"
Télécharger le modèle dans son intégralité (pour le sauvegarder)
Rechercher (F3) "header.margin.top"
<Variable name="header.margin.top" description="Header Top Margin" type="length" default="0"  value="0"/>
modifier value="0" en value="-2em" (par exemple)
Faire des essais en modifiant cette valeur "em". Notez que l'on doit écrire par exemple "1.5em" et non pas "1,5em" (en Anglais, la virgule des décimales est remplacée par un point) 
ALTERNATIVE IFRAME vs OBJECT avec TEXTE
Mettre ce CSS dans la page à afficher pour ne pas afficher les scrollbarS inutiles
object {
   overflow: hidden;
}
On peut aussi:
just add this to the body tag of your HTML:
scroll="no"
For example:
<body scroll="no">
Mais ce sera appliqué à tout le blog. Pas de problème pour un site, seule la page est affectée
<object data="http://meteo-weather-2.blogspot.com/" height="500" type="text/html" width="100%">alt : <a href="http://meteo-weather-2.blogspot.com/">test.html</a></object>
ALTERNATIVE IFRAME simple
<object data="http://meteo-weather-2.blogspot.com/" type="text/html"></object>
Autre exemple
<object data="http://meteo-weather-2.blogspot.com/" type="text/html" width="300" height="200">
  alt : <a href="http://meteo-weather-2.blogspot.com/">test.html</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.
note : IE rajoute une scrollbar verticale disgracieuse lors de l'insertion d'un object html, même si ce n'est pas nécessaire. Elle peut être supprimée en insérant le style css suivant dans le document HTML contenu : 
html { overflow:auto; } 
De même, pour supprimer la bordure "en creux", on peut rajouter dans le document contenu la css : 
html { border: none; }
ALTERNATIVE IFRAME (peut-être décalé et servir de layer)
<div name="essai" style="position: absolute; top: 0px;
left: 0px; visibility : visible;z-index : 1;"><p><object data="http://www.ssd.noaa.gov/goes/east/tatl/flash-avn.html" height="610" type="text/html" width="1000"></object></p></div> 
Autre pas essayé
<html> 
<head><title>Ma page locale</title> 
<style type="text/css"> 
<!-- 
.scroll { 
height: 500px; 
width: 400px; 
overflow: scroll; 
--> 
</style> 
</head> 
<body> 
<center><h2>Titre H2(G2) local</h2></center> 
<p>Du texte local</p> 
<div class="scroll"><? include ("http://www.site.ailleurs.fr"); ?></div> 
<div>Re du texte ou quoi que ce soit</div> 
</body> 
</htm>
INSERER UNE ANCRE (ANCHOR)
Une fonction qui s'avère intéressante à la longue, surtout lorsque l'on a de longs messages : celle consistant à déposer des ancres.Il s'agit tout simplement de liens qui facilitent la navigation dans le sens où l'on permet au lecteur de se déplacer vers une autre partie du message ou d'une page html.
Bien évidemment, on pense aussitôt au lien qui permet d'aller directement en bas de page (ou inversement de revenir en haut de page). Mais cela peut s'avérer tout aussi pratique lorsque l'on veut créer un sommaire avec un lien sur le titre renvoyant au développement de la partie correspondante.
Concrètement comment cela se passe ?
Dans l'onglet html de rédaction du message il faut entrer la syntaxe suivante :
<a href="#nom de l'ancre">départ : lien et messsage incitant à cliquer pour pointer vers votre ancre</a>
<a name="nom de l'ancre">destination : mot ou phrase vers lequel votre lien pointera</a>
Lorsque l'on veut faire un lien vers une ancre se situant sur un autre message la syntaxe est pratiquement la même en prenant tout simplement la précaution de citer la bonne page html du message.
- Sur le message d'origine on mettra :
<a href="http://lenomdemonblog.blogspot.com/nomdesapage.html#nom de l'ancre">départ : lien et messsage incitant à cliquer pour pointer vers l'ancre du second message</a>- Sur le message de destination, on mettra :
<a name="nom de l'ancre">destination : mot ou phrase vers lequel votre lien pointera</a>
Important : Si vous prenez les références d'un message qui est encore à l'état de Brouillon, vous devrez penser à corriger ses coordonnées une fois que cet article sera publié.
D'autre part, il est tout à fait possible de laisser une ancre vide. Ainsi dans l'exemple cité précédemment, un retour vers le top de la page peut être fait sur une zone vide. Et l'occurrence voici le code html de ma première ligne :
<a href="" name="up"></a>
Bouton "Form" avec lien 
<form action="http://nbbc-fr.blogspot.com" method="get" target="_self">
<p style="text-align: left; "><input type="SUBMIT" value="HOME - ACCUEIL" /></p></form>
IMAGE AVEC DIMENSION PRE-DETERMINEE (à tester)
 C0PYRIGHT
A mettre dans un widget
<!-- Generated by www.webweaver.nu -->
<script language="JavaScript">
<!--
document.write('©' );
document.write('  2009 - ');
document.write(new Date().getFullYear());
document.write(' nbbc-fr.blogspot.com - All Rights Reserved.');
//-->
</script>
ACTUALISER PAGE ou IMAGE
<script type="text/javascript">
</script>
CRAYON MANQUANT QUICKEDIT PENCIL
 Comment attribuer couleur liens
Voici le morceau de code HTML à insérer dans vos pages web entre les balises <HEAD></HEAD> :
A:link { COLOR: #000000; FONT-FAMILY: Verdana, Helvetica; FONT-SIZE: 8pt; TEXT-DECORATION: none }
A:visited { COLOR: #000000; FONT-FAMILY: Verdana, Helvetica; FONT-SIZE: 8pt; TEXT-DECORATION: none }
A:active { COLOR: #000000; FONT-FAMILY: Verdana, Helvetica; FONT-SIZE: 8pt; TEXT-DECORATION: none }
A:hover { COLOR: #c8373a; FONT-SIZE: 8pt; TEXT-DECORATION: none }
Par exemple ce morceau de code déclare les liens de couleur noire lorsqu'ils sont au " repos " et rouge lorsqu'ils sont survolés. Leur police de caractère reste la même tout le temps (Verdana, Helvetica) ainsi que leur taille (8 pt = taille 1).
De même pour les liens actifs et les liens précédemment visités !
Explications détaillées
A : Il designe la classe du lien. Dans cet exemple c'est la classe par défaut (<a></a>).
link : Il designe les liens qui n'ont pas encore été visités.
active : Cet attribut désigne le lien lorsqu'il est cliqué.
visited : Celui-ci désigne les liens précédemment visités.
hover : Le hover designe les liens lorsqu'il sont survolés.
COLOR:#000000; L'attribut COLOR affecte une couleur que vous lui avez spécifiée (ici #000000 = Noir) au type de liens spécifié précédemment (link - active - visited - hover). Attention pour éviter toute erreur de fonctionnement, n'oubliez pas de mettre le dièse (#) devant chaque code hexadécimal.
FONT-FAMILY:Verdana, Helvetica; Ce morceau de code HTML va assigner une police de caractères au type de lien précédemment spécifié. Dans notre exemple c'est le Verdana Helvetica mais vous pourrez très bien utilisez la police qui vous plait le plus. Prenez tout de même garde à ne pas prendre des polices de caractères personnalisées ou quasiment illisibles voire indéchiffrables afin que vos visiteurs puissent facilement trouver ce qu'ils cherchent ou pour qu'ils lisent facilement.
FONT-SIZE:8pt; L'attribut Font-size affecte une taille de police au type de liens spécifiés. Dans cette exemple c'est du 8pt (point), ce qui correspond à la taille 1. Le 10pt correspond à la taille 2... Comme précédemment, évitez les tailles énormes ou trop petites ! Essayez de gérer en fonction des polices de caractères que vous avez affectées aux liens...
TEXT-DECORATION:none C'est sans doute l'une des parties les plus interressantes puisqu'elle permet d'affecter un état à vos liens. C'est à dire que cet attribut s'occupera de changer le lien lorsqu'il sera survolé par exemple. Vous pouvez lui affecter plusieurs états :
none : Il indique qu'il n'y aura rien sur le lien. Il restera normal. (exemple ci-contre avec les liens du menu de ce site qui changent seulement de couleur au survol).
underline : Le lien sera donc souligné avec la couleur que vous lui aurez affectée.
overline : Le lien sera grâce à cet effet surligné également avec la couleur que vous lui aurez attribuée.
overline underline : Le lien sera à la fois souligné et surligné toujours avec la couleur qui lui a été assignée.
line-through : Le lien sera barré au milieu avec la couleur qui lui aura été affectée dans le code. 
Liens en gras et italique ?
Pour rendre vos liens en gras, insérez ce petit morceau de code HTML dans le code du début (et dans une ligne située entre accolades) après un point virgule afin qu'il n'y ai pas d'erreurs à l'affichage :
FONT-WEIGHT:bold
Enfin pour que vos liens soient en italique, ajoutez ce code de la même façon que le précédent dans le code du début dans une ligne située entre accolades :
FONT-WEIGHT:italic
Voila en ce qui concerne les liens et les effets que vous pouvez leur attribuer ! En espérant que cet article vous aura surpris, aidé, étonné, interressé... Je suis ouvert à toutes vos remarques, alors n'hésitez pas également à le commenter puisque c'est le premier que je fais sur FRANCE-JEUNE. Sinon je vous donne rendez-vous avec d'autres articles qui je l'espèrent vous épateront tout autant !
ENLEVER LE TITRE
Placer avant ]]></b:skin>
#header-inner h1
{
display: none;
}
BOUTONS "ACTUALISER"
  1. <FORM>
    <INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
    </FORM>
  2. http://www.aidenet.com
  3. <input type="button" OnClick="javascript:window.location.reload()" value="Actualiser">
  4. <input type="button" value="Actualiser" Onclick="javascript:window.history.go(0)">
  5. <A HREF="#" onclick="document.location.reload();return(false)"><B>Rafraîchir</B></A>
  1. <FORM ACTION="" METHOD=POST><P><INPUT TYPE=button NAME=Bouton VALUE="Refresh page" onclick='parent.location="javascript:location.reload()"'></FORM></P>
  2. <FORM ACTION="" METHOD=POST>
    <CENTER><INPUT TYPE=button NAME=Bouton VALUE="Refresh page"onclick="javascript:history.go(0)"></CENTER>
    </FORM>
DIV LAYER & IFRAME décalé
<div name="essai" style="position: absolute; top: -200px;
left: 0px; visibility : visible;z-index : 1;">
<p>
<object data="http://www.ssd.noaa.gov/goes/east/tatl/flash-avn.html" height="610" type="text/html" width="1000"></object></p>
</div>
ACTUALISER AUTOMATIQUEMENT BLOG
<head>
<base target='_blank'/>
<meta HTTP-EQUIV='refresh' content='400;URL=http://meteo-weather-2.blogspot.com/'/>
<META Content='no-cache' Http-Equiv='Cache-Control'/>
<META Content='no-cache' Http-Equiv='Pragma'/>
<META Content='no store' Http-Equiv='Cache'/>
HEURE après la DATE
Rechercher ce code:
<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> 
Le couper et le conserver éventuellement (cela supprime l'heure en bas de message)
Rechercher ce code:
<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
Coller le code + haut à la suite de </b:if>
ça donne ça:
<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if><span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> 
AJOUTER LIGNE ET ESPACES (dessus - dessous) SOUS MESSAGE (moi)
Rechercher .post { et ajouter le code en bleu
.post {
  padding-$startSide:0px;
  padding-$endSide:0px;
 padding-top:20px;
  padding-bottom:20px;
border-bottom: 3px solid #000;
}
FLECHE HAUT (modifié pour IFRAME)
<! flech haut copyright 2010 renévandemaele in "http://modifier-les-modeles-de-blogger.blogspot.com/"><a style="display:scroll;position:fixed;top:1px;right:1px;"href="http://meteo-weather3.blogspot.com/#" target="_self" alt="Haut de page"title="Haut de page"><img style="cursor:pointer; cursor:hand;width: 18px; height: 18px;" src="http://dl.dropbox.com/u/19586410/flechehaut.png" border="0" alt=""" /></a></!> 

HTML <a> Tag

Example

A link to W3Schools.com:
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>
(more examples at the bottom of this page)

Ajouter une ligne horizontale au bas d'un post
W:Impossible de récupérer http://mozilla.debian.net/dists/squeeze-backports/Release  Unable to find expected entry  iceweasel-5.0/binary-i386/Packages in Meta-index file (malformed Release file?)
, E:Le téléchargement de quelques fichiers d'index a échoué, ils ont été ignorés, ou les anciens ont été utilisés à la place. 
réparer: changer le serveur dans dépôts de Synaptic (désactiver l'ancien)
deb http://mozilla.debian.net/ squeeze-backports iceweasel-release
Ajouter des flèches
vers le haut et le bas de la page
Mis à jour le 12.12.2010 : amélioration : supprimer le bord de couleur apparaissant uniquement avec internet explorer.
On trouve sur ce site, à droite de l'écran, en haut et en bas (à côté de l'ascenseur), des flèches vers le haut et le bas de la page. Ce sont des compléments indispensables pour les blogs qui affichent des longues pages. La flèche vers le haut de la page devrait être installée sur TOUS les blogs, et ce, d'autant plus que l'ajouter ne demande que quelques secondes. Elle facilite la lecture mais elle incite aussi le visiteur qui interrompt sa lecture au milieu de la page à RESTER SUR LE BLOG au lieu de le quitter en fermant cette page.
1) Pour ajouter uniquement une flèche vers le haut de la page, coller lecode disponible ici dans un nouveau gadget HTML/ JavaScript, l'enregistrer et passer au point 3).
<! flech haut copyright 2010 renévandemaele in "http://modifier-les-modeles-de-blogger.blogspot.com/"><a style="display:scroll;position:fixed;top:1px;right:1px;"href="#"alt="Haut de page"title="Haut de page"><img style="cursor:pointer; cursor:hand;width: 18px; height: 18px;" src="http://1.bp.blogspot.com/_sPwH_KmuNT8/S3hJt1c7LPI/AAAAAAAAAlY/wtfEMhOti2E//fleche+haut.GIF" border="0" alt=""" /></a></!> 
2) Pour ajouter des flèches à la fois vers le haut et le bas de la page :
-coller le code disponible ici dans un nouveau gadget HTML/ JavaScript et l'enregistrer ;
-ajouter dans le modèle (template) du blog, juste avant "</body>", à l'avant-dernière ligne :
<a name='http://modifier-les-modeles-de-blogger.blogspot.com/'/>Rappel : comment modifier le modèle (template) d'un blog : cliquer ici.
3) On peut changer les images (".gif") des flèches. 737 modèles de flèches sont disponibles sur le site suivant : http://www.clipart-gif.com/clipart.php?cat=Webmaster&scat=Fl%E8ches. Le modèle fourni avec le code est toutefois conseillé. Il est à la fois discret et semblable en dimensions avec le bouton voisin situé sur l'ascenseur.
Rappel : pour ajouter un gadget HTML/JavaScript à un blog, il faut procéder comme suit :
1) Copier le code.
2) Cliquer sur :
"Présentation" ;
"Ajouter un gadget";
"HTML/JavaScript".
3) Coller le code.
4) Enregistrer.
Message d'erreur : 
Fetch failed: W:Erreur de GPG : http://eeepc.debian.net sid Release : Les signatures suivantes n'ont pas pu être vérifiées car la clé publique n'est pas disponible : NO_PUBKEY 817FAF2265301FF6
Taper ceci pour réparer:
gpg --keyserver wwwkeys.pgp.net --recv-key  817FAF2265301FF6
gpg -a --export 817FAF2265301FF6 | sudo apt-key add -
Supprimer "accueil" dans blogger
Supprimer la NavBar de Blogger
INSERER LIGNE HORIZONTALE
<p> </p><hr align="center" color="midnightblue" size="1" width="50%" /> 
 IFRAME OPTIONS
<p align="center"><iframe ALLOWTRANSPARENCY="true" name="ifrm1" src="http://www.aliasdmc.fr" vspace="2" hspace="5" marginwidth="5" marginheight="2" frameborder="1"></iframe></p>
IFRAME DANS UN TABLEAU
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 500px; ">
<tbody>
<tr>
<td style="text-align: center; background-color: rgb(255, 102, 0); ">
<p align="center">
<iframe allowtransparency="true" frameborder="1" hspace="5" marginheight="2" marginwidth="5" name="ifrm1" src="http://www.aliasdmc.fr" vspace="2"></iframe></p>
</td>
</tr>
</tbody>
</table>
SCRIPT DATE de dernière modification de page (OK, fonctionne bien)
<p><em> <script language="JavaScript"><!--
var lastMod = document.lastModified;
var tabMois = new Array("Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre");
var lastDate = new Date(lastMod);
var annee = lastDate.getFullYear();
var hh = lastDate.getHours();
var mm = lastDate.getMinutes();
var heure = (hh > 9? hh:"0" + hh);
heure += ":" + (mm > 9? mm:"0" + mm);
document.write("<center>");
document.write(lastDate.getDate() + " ");
document.write(tabMois[lastDate.getMonth()] + " ");
document.write(annee + " ");
document.write(" à  " + heure);
document.write(" GMT / UTC" + "</center>");
//--></script></em></p>
EXEMPLE WEBCAM avec rafraîchissement automatique
CREER LA PAGE WEBCAM
<script type="text/javascript">

//actualisation page
</script>
<div style="text-align: center;">
<a href="http://st-martin-basic.blogspot.com/2011/07/actualisation-pagesettimeoutdocument_10.html" target="_self">Afficher</a>. Rafraîchissement automatique 30 sec -<a href="http://st-martin-basic.blogspot.com/2011/07/actualisation-pagesettimeoutdocument_10.html" target="_self"> Display</a>. Automatic refresh 30 sec</div>
<table align="center" border="1" cellpadding="1" cellspacing="1" style="height: 420px; width: 500px; ">
<tbody>
<tr>
<td style="background-color: black;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height: 360px; width: 480px;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="http://www.innoserv.fr/webcam/baiestjeanc01.jpg" target="_blank"><img alt="Webcam de Philipsburg" src="http://www.innoserv.fr/webcam/baiestjeanc01.jpg" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; width: 480px; height: 360px; " /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="text-align: center;">
St. Barths, aéroport de St Jean - St Jean airport</div>
CREER L'IFRAME D'AFFICHAGE
<p style="text-align: center; ">
<iframe frameborder="1" height="500" name="stjean" scrolling="no" src="http://st-martin-basic.blogspot.com/2011/07/actualisation-pagesettimeoutdocument_10.html" width="510"></iframe></p>
 LED DANS UN TABLEAU
<table background="http://www.phy.syr.edu/icons/anim-led-red.gif" border="0" cellpadding="0" cellspacing="0" style="background-color: rgb(255, 255, 255); text-align: left; margin-left: auto; margin-right: auto; height: 14px; width: 14px; ">
<tbody>
<tr>
<td style="width: 14px;">
<span style="font-size:5px;">    o<span style="display: none; "> </span></span></td>
</tr>
</tbody>
</table>
 TABLEAU IMAGE ARRIÈRE-PLAN DÉCALÉE
<table style="background-image: url(http://webflash.ess.washington.edu/AmericaL_plot_weather_map.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: -150px -190px;" cellspacing="0" cellpadding="0" width="335" height="130">
<tbody>
<tr>
<td width="335" height="130"> </td>
</tr>
</tbody>
</table>

Property Values

Value
Description
scroll
The background image scrolls with the rest of the page. This is default
fixed
The background image is fixed
inherit
Specifies that the setting of the background-attachment property should be inherited from the parent element
TARGET PAR DEFAUT dans <head>
<base target='_blank'/>
Layer dans iframe (alerte Tsunami) 
<p style="text-align: center; ">
<iframe frameborder="0" height="70" name="tsunam" scrolling="no" src="http://st-martin-basic.blogspot.com/2011/07/blog-post.html" width="600"></iframe></p>
NO CACHE
<head>
<meta HTTP-EQUIV='refresh' content='600;URL=http://meteo-weather-2.blogspot.com'/>
<META Content='no-cache' Http-Equiv='Cache-Control'/>
<META Content='no-cache' Http-Equiv='Pragma'/>
<META Content='no store' Http-Equiv='Cache'/>

Comment faire pour actualiser votre blog ou site web automatiquement

Poster par Maher Design le 12/22/2010 dans Code Html | 3 commentaires

Vous aimez cette article ?

Voila le petit tutoriel pour actualiser votre blog ou site web automatiquement
1.Connectez-vous à votre tableau de bord Blogger -> mise en page --> Modifier le code HTML
2.Faites défiler jusqu'à l'endroit où vous voyez <head>
3.Copiez le code ci-dessous et collez-le juste après <head>
<meta HTTP-EQUIV='refresh' content='600;URL=http://meteo-weather-2.blogspot.com'/>
Note : 
n'oubliai pas de remplacer http://TONsite.com avec URl de votre blog ou site.
15 est le délai entre la page 2 et le rafraichissement. vous pouvez le changer à votre choix
IMAGE ACTUALISÉE à mettre en IFRAME
<script type="text/javascript"> 
//actualisation page
</script>
<table align="center" border="1" cellpadding="1" cellspacing="1" style="height: 400px; width: 500px; ">
<tbody>
<tr>
<td style="background-color: rgb(0, 0, 0); ">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height: 300px; width: 400px; ">
<tbody>
<tr>
<td style="text-align: center;">
<a href="http://aslwww.cr.usgs.gov/Seismic_Data/telemetry_data/SJG_24hr.gif" target="_blank"><img alt="Webcam du Nettle Bay Beach Club" src="http://aslwww.cr.usgs.gov/Seismic_Data/telemetry_data/SJG_24hr.gif" style="height: 465px; width: 979px;" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Génial!
Rafraîchir une page dans Blogger
Exemple avec 30 secondes
<script type="text/javascript">
//rappel de la page en cours via son nom
</script>
LAYER DIV orages super zoom
<div style="position: absolute; top: -5050px;
left: -5615px; visibility : visible;z-index : 1;">
<p>
<img alt="" src="http://webflash.ess.washington.edu/AmericaL_plot_weather_map.jpg" style="height:10440px; width: 10060px; " /></p>
</div>
<div style="position: absolute; top: -17px;
left: 0px; visibility : visible;z-index : 2;">
<p>
<img alt="" src="http://st-martin-studio.com/weather/calque-orages.png" style="height: 337px; width: 500px; " /></p>
</div> 
Arrière-plan tableau
<center>
<table
 style="background-color: rgb(255, 255, 255); width: 180px; height: 120px; text-align: left; margin-left: auto; margin-right: auto;"
 border="1" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="width: 150px;"><br>
      </td>
    </tr>
  </tbody>
</table>
</center>
REMPLACER IFRAME
<object data="data/test.html" type="text/html" width="300" height="200">
 alt : <a href="data/test.html">test.html</a>
</object>
<div>
                        <!--?php
 include('
http://www.meteo.gp/donnees/bulletin/special/alert_gene_libre_2007.php');  // Nous appelons notre menu
?--></div>
<object type="text/html" data="http://www.meteo.gp/donnees/bulletin/special/alert_gene_libre_2007.php" style="width:640px;height:385px;"></object>

Iframe à la taille de son contenu

  1. (OK)<p> <object data="http://www.flightstats.com/go/weblet?guid=c228b59beca1b817:-65a53ba4:11422897d2f:6025&imageColor=olive&language=French&weblet=status&action=AirportFlightStatus&airportCode=SXM&airportQueryType=1" height="110%" type="text/html" width="500"></object></p>
  2. J’ai eu besoin cette semaine de pouvoir redimensionner automatiquement une iframe selon la taille de son contenu…
Comment faire ? Simple… Avec un petit javascript.
Il suffit de mettre le code javascript suivant dans le head de votre page
<script language="JavaScript">
<!--
function calcHeight()
{
 //récupère la hauteur de la page
 var the_height=
   document.getElementById('the_iframe').contentWindow.
     document.body.scrollHeight;</p>
<p>  //change la hauteur de l'iframe
 document.getElementById('the_iframe').height=
     the_height;
}
//-->
</script
puis de créer votre iframe dans le body de votre page comme ceci:
<iframe width="700" id="the_iframe"<br />
        onLoad="calcHeight();"<br />
        src="testing_page.shtml"<br />
        scrolling="NO"<br />
        frameborder="1"<br />
        height="1"><br />
ici un petit texte visible uniquement<br />
des navigateurs qui ne supportent pas<br />
les iframes<br />
</iframe>
Et voilà ! Ca peut dépanner !
LAYER en <DIV>
<html>
<head>
<meta content="no-cache" http-equiv="Cache-Control" />
<meta content="no-cache" http-equiv="Pragma" />
<meta content="no store" http-equiv="Cache" />
<meta content="0" http-equiv="Expires" />
<meta content="300;url=http://st-martin-studio.com/weather/nouveau_orage.html" http-equiv="refresh" />
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>orages</title>
<meta content="Gedit" name="generator" />
</head>
<body>
<div style="position: absolute; top: -1150px;
left: -1220px; visibility : visible;z-index : 1;">
<p>
<img alt="" src="http://webflash.ess.washington.edu/AmericaL_plot_weather_map.jpg" style="height:10440px; width: 10060px; " /></p>
</div>
<div style="position: absolute; top: -17px;
left: 0px; visibility : visible;z-index : 2;">
<p>
<img alt="" src="http://st-martin-studio.com/weather/calque-orages.png" style="height: 337px; width: 500px; " /></p>
</div>
</body>
</html>
 Balises IFRAME Variables (excellent)

Aucun commentaire:

Enregistrer un commentaire