BlogNotes: août 2011

mercredi 31 août 2011

Je viens de rajouter HTMLArea, un Editeur Web Wysiwyg en ligne gratuit. Il ne date pas d'aujourd'hui mais fonctionne sur Google Chrome. C'est le même principe que CKEditor ici présent. Il semble plus léger que ce dernier. Il faut télécharger le Zip ici: http://www.dynarch.com/static/HTMLArea-3.0-last-20071025.zip et le décompresser sur votre disque dur. Sur mon Linux, il fonctionne parfaitement en local et s'ouvre instantanément , mais il est préférable de l' Uploader sur un vrai serveur. Sous Google Chrome, ne pas tenir compte de l'avertissement à l'ouverture d'une page. La version actuelle de HTMLArea est Xinha mais c'est une usine à gaz... comme CKEditor.

Voir aussi...

Balise CENTER

<center>Du texte centré</center>
<center>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
Table Centrée
</td>
</tr>
</table>
</center>

Du texte centré

Table Centrée

http://www.startyourdev.com/HTML/Balise-CENTER.html

BALISE TBODY

La balise HTML et XHTML TBODY permet de définir un ensemble de lignes comme le "corps" du tableau.

<TBODY > </TBODY>

La balise HTML et XHTML TBODY est utilisée avec TFOOT et THEADrespectivement "pied" et "entête" de tableau.
Exemple :

<TABLE>
<THEAD>
    <TR></TR>
</THEAD>
<TFOOT>
    <TR></TR>
</TFOOT>
<TBODY>
    <TR></TR>
</TBODY>
<TBODY>
    <TR></TR>
</TBODY>
</TABLE>

http://www.aliasdmc.fr

Tableau et cellule - Couleur arrière-plan

Tableau avec une seule cellule à fond noir. La cellule contient un iframe (en vert).

<table border="0" cellpadding="0" cellspacing="0" style="height: 392px; width: 700px; ">
<tbody>
<tr>
<td style="width: 700px; height: 392px; background-color: rgb(0, 0, 0); ">
<iframe frameborder="0" height="392" name="stormpulsemedium" scrolling="no" src="http://basic-black-stmartin.blogspot.com/2011/08/stormpulse-black-st-martin-meteo.html" width="700"></iframe></td>
</tr>
</tbody>
</table>

background-color: rgb(0, 0, 0); peut-être mis dans <table
<table border="0" cellpadding="0" cellspacing="0" style="height: 392px; width: 700px; background-color: rgb(0, 0, 0); ">

lundi 29 août 2011

LAYER décalé (couche) avec un DIV et un OBJECT

LAYER décalé (couche) avec un DIV et un OBJECT

<div name="essai" style="position: absolute; top: -50px; left: -50px; 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>

A quoi ça sert???

Personnellement, je m'en sers pour extraire des parties d'images satellite (en tous cas des images distantes sur les quelles je n'ai quasiment aucun contrôle). Par exemple, une image satellite en arrière-plan d'un tableau. Le tableau est dans le DIV et est décalé à gauche pour effacer la partie gauche de l'image.
Attention, les résultat peuvent être catastrophiques avec les anciens IE surtout si vous avez besoin de précision comme ci-dessous.

Explication:

l'image d'origine des orages est assez petite environ 480 px de large. En effet, cette organisation réserve probablement les images détaillées ou ses données à des clients payant. Il faut savoir que s'il est facile de trouver des images "live" des impacts d'orages pour l'Amérique du Nord ou l'Europe, mais dès qu'on en sort, il n'y a quasiment rien. Pour les Antilles, j'ai bien été obligé de bricoler..
L'image d'origine très agrandie a donc été placée sur une première page. Je l'ai agrandi de peut-être 600%, je ne sais plus trop. Cette image est ensuite vue sur une autre page à travers un OBJECT ou un IFRAME, et l'OBJECT est décalé vers la gauche et vers le haut pour que la partie de l'image qui ne m'intéresse pas soit cachée.
Pour finir, cette page est vue dans un message de mon blog à travers un nouvel iframe ou un object. Ouf!

Inutile de préciser les dizaines de tâtonnements qu'il faut pour y arriver, sans compter l'utilisation de la règle d'écran et un peu de chance!
Ci-dessous, l'exemple avec les orages, mais vous pourrez aussi aller voir mon blog http://st-martin-meteo-weather.blogspot.com et observer la bannière... L'image de l'île de St Martin, je l'ai extraite (et corrigée pixel par pixel) depuis Google Earth. Par dessus, il y a un layer des vrais nuages qui se rafraîchit tous les 6 mn. Il m'a fallu plus de 12 h pour réaliser ce travail à cause des nombreux tâtonnements (il fallait que ça corresponde au vrai ciel du moment!). Notez que les nuages sont visibles uniquement le jour (environ 13:30 à 23:50 heure de Paris).

Orages autour de St Martin (point rouge). Thunderstorms in the vicinity of St Martin (red dot)
Rafraîchir l'image - Refresh image Zoom in

IFRAME vs OBJECT (2)

Un des problèmes avec les OBJECTs c'est qu'une scrollbar est automatiquement ajoutée même si elle est inutile...

Assez pénible quand on veut faire par exemple un widget perso propre et net.

Quelques suggestions...

Mettre ce CSS dans la page à afficher ou dans un widget pour ne pas afficher les scrollbars inutiles... On peut aussi essayer de l'insérer dans le message en affichant le HTML. Dans le cas d'un widget, celui-ci restera invisible à l'affichage. On peut aussi l'ajouter dans l'Outil de création de modèles

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

IFRAME vs OBJECT

Il peut être bon de remplacer les <IFRAME> par des <OBJECT> pour améliorer le référencement. En effet, les robots on la réputation de mal se débrouiller avec les FRAMES et de "bloquer" quand ils en trouvent...

J'ai commencé à le faire, mais je dois reconnaître que les OBJECT sont moins faciles et moins souples que les IFRAMES.

Voici quelques exemples pêle-mêle...

ALTERNATIVE IFRAME vs OBJECT avec TEXTE

Voir aussi http://www.w3schools.com/tags/tag_object.asp

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

<object data="http://meteo-weather-2.blogspot.com/" type="text/html" width="300" height="200">

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

LAYER décalé (couche) avec un DIV et un OBJECT

<div name="essai" style="position: absolute; top: -50px; left: -50px; 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 (Exemple de page; pas encore essayé)

<html>
<head><title>Ma page locale</title>
<style type="text/css">

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

dimanche 28 août 2011

Ancres dans un blog, page ou long message

Voici un exemple d'ancre à placer en haut de page dans un widget qui restera invisible (ne lui mettez pas de titre)

<p><a name="top"></a></p>

Maintenant, le lien que vous pouvez placer aussi dans un widget. Notez que comme le premier, on peut rajouter le code dans un widget type HTML/javascript.

<p><a href="http://nbbc-news.blogspot.com/#top" target="_self">Haut de page - Top</a></p>

Remarquez l'URL: http://nbbc-news.blogspot.com/#top.
On ne peut pas mettre "#top" seul comme dans un site web classique sinon, ça ne marche pas. Blogger convertit en effet automatiquement #top en un lien qui vous envoie vers la page "nouveau message" de votre blog ce qui n'est pas le but recherché...

Exemple (dans ce message) Haut de page - Top

Ci-dessous, un exemple sur un de mes mini-blogs minimalistes. Ces mini-blogs fonctionnent dans un iframe ou un object. Tous les widgets (archives, recherche, labels, etc...) sont évidemment en bas de page. J'ai donc un lien pour aller en bas de page dans chaque nouveau message et un lien dans un widget en bas de page (pour remonter)

"Rechercher dans ce blog" ne fonctionne pas...

Vu fréquemment sur des blogs ou des forums...

"J'ai créé mon blog il y a quelques jours et j'y ai ajouté le gadget de recherche, je l'ai paramétré de manière à ce que la recherche se fasse sur mon blog uniquement. Seulement, cela n'a jamais fonctionné. J'ai eu beau essayer encore et encore et rien, pourtant cela fonctionne parfaitement bien sur d'autres blogs que je consulte souvent, également hébergés par blogger."

Réponse:
Il faut attendre quelques jours pour que le blog soit indexé.

samedi 27 août 2011

CKEditor Editeur Web wysiwyg + Version "Lite"

Message "remonté" (Ajout CKEditor Lite)
Depuis quelques temps déjà, j'ai installé CKEditor sur un de mes sites. En effet, cet éditeur en ligne ne peut pas être installé sur Blogger, il faut un "vrai" serveur.

Notez que l'on ne peut pas enregistrer son travail, je ne l'ai pas prévu (volontairement). D'autres fonctions peuvent manquer aussi.

Pour sauvegarder votre travail, faites un copier-coller dans un éditeur simple genre Notepad ou Gedit (Linux) ou directement dans l'éditeur de Blogger.

Voici le lien: CKEditor . Le lien sera disponible aussi dans le menu "outils".
Ajout d'un lien "CKEditor Lite", il s'agit d'une version allégée.

Démo dans un iframe (utilisable)

Nouveau message

J'ai ajouté sur une page un NotePad en ligne (dans un "object") que j'ai baptisé "CloudNotePad". Vous pouvez lui changer son URL très facilement et lui ajouter un mot de passe. Toutefois, évitez de faire une absolue confiance à ce "machin" donc n'y mettez pas d'information confidentielle, on ne sait jamais... Le lien se trouve dans la barre des pages sous le titre. Le lien direct est ici: http://notepad.cc. Vous pourrez aussi le retrouver dans "outils-Tools". Tout comme le Widget "TODO", il conserve automatiquement les textes entrés à condition que votre navigateur accepte les cookies.

Nouveau message

Ce type de bouton est un intéressant car facile à insérer. On peut s'en servir pour rafraîchir à la demande une page entière, c'est le cas ici, ou dans un IFRAME. Ce bouton actualise la page où il se trouve. Vous pouvez l'adapter à vos besoin en changeant le texte "Refresh Page" par ce que vous voulez, "Actualiser" par exemple.

<FORM ACTION="" METHOD=POST>
<CENTER><INPUT TYPE=button NAME=Bouton VALUE="Refresh page"onclick="javascript:history.go(0)"></CENTER>
</FORM>

Nouveau message

vendredi 26 août 2011

Actualiser ou rediriger

C'est un classique des pages HTML...(A placer dans <head>)

<meta HTTP-EQUIV='refresh' content='60;URL=http://monsite.com/'/>

Changez juste monsite.com et le nombre de secondes (ici, 60 sec). On peut rediriger vers un autre site ou sur lui-même (actualiser)

Nouveau message

Couleur des liens

Pour changer la couleur de tous les liens:
Parametres / Presentation / Modifier HTML

Juste avant ]]></b:skin>
mettez ceci, en adaptant le style et les couleurs

.post-body a:link
{
text-decoration:none;
color: cyan;
}
.post-body a:visited
{
text-decoration:none;
color: grey;
}

.post-body a:hover
{
text-decoration:underline;
color: red;

}

Nouveau message

jeudi 25 août 2011

Pop-Up dans Blogger

Très recherché, le Pop-Up!

Bien entendu, cela fonctionne aussi sur un site Web Classique.
Exemple:

<p><span style="font-size:24px;"><strong><a href="http://testblog-stmartin.blogspot.com/2011/08/blog-post_25.html" onclick="window.open(this.href, 'Notepad', 'resizable=yes,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=360,left=20,height=445,top=50'); return false;">TODO</a></strong></span></p>

C'est ce que lance le lien TODO en haut à droite.de la barre latérale . J'ai été obligé de pas mal bidouiller ce gadget car il refusait de rentrer dans ma barre latérale qui est vraiment petite (c'est voulu!). Du coup, je l'ai posé sur un post d'un de mes Blogs minimalistes pour essayer de contourner ça , notamment cette énorme marge gauche et surtout pour essayer de cacher les "Pubs" du bas et du haut. J'ai essayé avec un layer de type DIV mais les résultats étaient bizarres. Je l'ai donc finalement créé sur la page http://testblog-stmartin.blogspot.com/2011/08/blog-post_25.html puis j'ai fait un lien PoP-Up. Bien sûr, on voit encore la pub du haut.
En tous cas, un utilitaire bien utile quand on construit un site de manière un peu empirique...
note: le lien dans le texte ci-dessus le lance dans une nouvelle fenêtre ou onglet. Pour l'essayer vraiment cliquez sur le lien en haut de la barre latérale.

Nouveau message

Compresseur de HTML - HTML compression tool

Vous pouvez gagner de précieuses secondes au chargement de votre Blog ou de votre site en compressant le code HTML.

Voici donc un outil en ligne que vous pourrez appliquer à un simple message un peu long ou même à tout votre Blog... N'oubliez pas de faire une sauvegarde avant, on ne sait jamais!
Note: si vous voulez simplement compresser le code d'un message, rajoutez au début <html><body> et à la fin </body></html> sinon ça ne marchera pas! Puis enlevez-les avant d'enregistrer votre message compressé.

http://www.textfixer.com/html/compress-html-compression.php
Le lien sera désormais dans la barre latérale dans "outils"

Nouveau message

Meta tags

Exemple de Méta Tags à modifier évidemment (c'est celui de Testing Blogger)

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<meta content='-_8lTY-_VEa49p8wFWca3UUaJuEcz5kWs4Ysswp6mUk' name='google-site-verification'/>
<meta content='INDEX, FOLLOW' name='robots'/>
<meta content='Information and testing of Blogger, its widgets and templates' name='description'/>
<meta content='mishka, testing, blogger, templates, blogger templates, widgets, gadgets, elements, test, blog, weblog, help, forum, fix, adsense, google, google gadgets, blogger gadgets, eblogger, blogspot, posts, post, pages, page, template designer, design, designs, template, gadget, widget, text, email, url' name='keywords'/>
<meta content='Testing Blogger, a place to test its templates and widgets' name='title'/>
<meta content='Mishka' name='author'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

Je rajouterai par la suite d'autres exemples. Le Meta "description" est très important (en rouge) et celui des mots clés "Keywords" (en vert) est seulement assez important (dans Blogger) pour le référencement.

Nouveau message

Widget calculatrice en ligne

Une belle calculatrice en ligne - en Flash, pour afficher sur votre site ou votre Blog, en widget ou sur une page autonome... Evidemment, n'est pas utile sur n'importe quel site...

Le code peut être modifié pour les dimensions pour l'adapter à votre barre latérale. Ici, l'objet Flash est à l'intérieur d'un tableau. Sur une page autonome, si vous ne mettez pas de tableau (uniquement le Flash), elle prendra toute la place: cliquez ici: On peut aussi la lancer en Pop-up mais je ne me rappelle plus comment faire. On y reviendra plus tard...

<table cellpadding="5" cellspacing="0" width="100%"><tbody><tr> <td align="center" valign="middle" width="100%">
<div align="center">
<div align="center">
<span style="color: white;"><a href="javascript:na_open_window('calcB', 'http://www.online-calculator.com/swf/maths-calculator.swf', 300, 150, 200, 320, 0, 0, 0, 0, 1);" target="_self">Calculatrice simple en pop-up</a></span></div>
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="320" width="200"> <param name="movie" value="http://www.online-calculator.com/swf/maths-calculator.swf" />
<param name="BGCOLOR" value="#000000" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="quality" value="high" />
<embed width="200" height="320" src="http://www.online-calculator.com/swf/maths-calculator.swf" play="true" loop="true" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" bgcolor="#000000"></embed></object></div>
<div align="center">
<a href="javascript:na_open_window('sci', 'http://my.hrw.com/math06_07/nsmedia/tools/Sci_Calculator/Sci_Calculator.html', 300, 150, 400, 500, 0, 0, 0, 0, 0);" target="_self">Calculatrice Scientfique</a></div>
</div>
</td> </tr></tbody></table>

http://www.online-calculator.com/

Nouveau message

Un autre "who is online"

Celui-ci, je l'utilise depuis un moment et il me donne entière satisfaction! On voit même de quelle région les visiteurs viennent..
Mais cette fois, il faudra vous inscrire avant!
Lorsque vous cliquez sur le lien ci-dessous, il vous demande de customiser votre widget et vous permet de l'installer directement sur votre Blog. Il suffit ensuite de le déplacer où vous voulez...

http://feedjit.com/freeLiveTrafficFeed/?utm_source=ltf&utm_medium=web&utm_campaign=feedjitTopAdGetFeedjit

Sachez qu'il existe plusieurs skins... Tiens, je vais me le mettre en expérimentation. J'aime bien savoir qui est qui...(!) Hélas, ne fonctionne pas ici sur ce blog... bizarre... Bon, on verra ça plus tard...

Suffit d'attendre... Il fonctionne à nouveau (voir en bas à droite de la page)

<<< Capture d'écran d'un de mes autres Blogs

D'autres compteurs et "Visitors Online"

Nouveau message

mercredi 24 août 2011

Who is online?

Ce genre de widget est toujours très recherché et pas toujours facile à trouver...

Users Online [ Stats ]

Voici le code, mais le mieux, c'est d"aller le chercher vous-même sur http://www.whoisonline.net/ car ce n'est pas sûr qu'en changeant seulement le nom du site que ça fonctionne. Cependant, je peux vous dire qu'il n'y a aucune inscription préalable. Essayez si vous voulez, il suffit de remplacer http://monblog.com/ par le nom de votre site ou blog


<script type="text/javascript" src="http://www.whoisonline.net/?action=tracker&siteurl=http://monblog.com/"></script> <a href="http://www.whoisonline.net/?action=showstats&url=http://monblog.com/">Users Online</a> [ <a href="http://www.whoisonline.net/?action=showstats&url=http://monblog.com/">Stats</a> ]


Nouveau message

Un copyright très "pro" pour votre Blog ou votre site....

© 2011 - 2011 blogtricker.blogspot.com - All Rights Reserved.

Et le deuxième "2011" changera tout seul en 2012... A copier-coller dans un Widget HTML / Javascript en bas de page. Fastoche!

<script language="JavaScript">

</script>

Nouveau message

Perdu les Labels ou Libellés (Nuage de mots)?

Quand j'ai commencé avec ce modèle de Blog, il n'y avait curieusement pas de Widget "Labels" (Libellés). J'en ai rajouté un trouvé sur le Web en forme de sphère mais je n'aime pas trop ces trucs-là, ça frime un max, c'est joli (enfin, si on veut...), ça ralentit le Blog et ce n'est pas pratique au final... Donc, j'ai récupéré le widget standard de Blogger sur un de mes autres Blogs.

Comment faire?

Aller dans "modifier le Html", sauvegardez votre modèle avant toute chose, cocher "développer des modèles de gadget" et rechercher </b:includable></b:widget>

A la suite de </b:widget> (vérifiez bien que vous êtes dans les widgets), collez ce code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Ensuite, enregistrez.
Et voila! (comme disent les Américains...)

Nouveau message

WIDGET cours Euro > Dollar

J'ai la chance de vivre dans une petite île des Antilles, St Martin, qui est partagée entre 2 nations, la France et les Antilles Néerlandaises (Hollande). Et sur ce tout petit bout de territoire à peine plus grand que Belle-Ile en Mer, nous utilisons 3 monnaies différentes: L'Euro, le Dollar US et le Guilder des Antilles Néerlandaises ou Florin. Enfin, on n'utilise guère le Florin (abrégé: NAF) en tant que pièces ou billets mais certains prix sont affichés dans cette monnaie. En fait, le Dollar et l'Euro sont rois. mais avec un Euro qui fait le yoyo depuis plusieurs mois, il est intéressant de savoir précisément ce qu'il vaut au jour-le jour.
Donc, j'ai installé ce petit widget sur plusieurs de mes blogs. Le bouton "refresh" permet de le ré-afficher en cas de besoin ou de le réinitialiser. La mise à jour est automatique (4 mn) sur mes blogs mais ne fonctionne pas ici.
Vous pouvez vous en servir pour convertir une somme de n'importe quelle monnaie à une autre et vous avez le "rate" EUR > USD en live.
Pour la mise à jour automatique d'un message ou d'un blog, on y reviendra bientôt ainsi que le code pour le bouton "refresh".

Euro Converter

Code à insérer dans un nouveau widget "HTML / JAVASCRIPT"

<img src="http://www.exchangerates.org.uk/images/flags/europeanunion.gif" style="padding-right: 5px;" /> <a href="http://www.exchangerates.org.uk/Euro-EUR-currency-table.html" style="color: white; text-decoration: none; text-transform: uppercase;" target="_new" title="Euro Converter">Euro Converter</a></div>

var dcf = 'EUR';

var dct = 'USD';

var mc = '2D6AB4';

var mbg = 'F0F0F0';

var tc = 'FFFFFF';

var f = 'arial';

var fc = '000000';

var tz = '-5';

</script><script src="http://www.currency.me.uk/remote/ER-CCCS2-1.php" type="text/javascript">

</script></div>

</div></td></tr>

</tbody> </table>

Notez que j'ai eu quelques problèmes d'affichage au début et que j'en ai donc fait une page autonome sur un de mes mini-blogs "basic" que je affiche sur mes blogs via un iframe ou un frame type "object"

Pour info, le code permettant d'actualiser le widget automatiquement toutes les 10 mn (600000 millisecondes), mais c'est une autre histoire...

<script type="text/javascript">

setTimeout("document.location.href='http://st-martin-basic.blogspot.com/2011/08/click-to-refresh-euro-converter-var-dcf.html'", 600000);

</script>

Et ici, le code du bouton "refresh":

Nouveau message

Favicon personnalisé

Il existe maintenant un moyen dans les paramètres de Blogger de personnaliser l'icône. Pour moi, ça n'a jamais fonctionné. Voici donc le truc que j'utilise. J'ignore si ça fonctionne dans IE vu que je ne l'utilise plus depuis bien longtemps et de toutes manières je suis maintenant sous Linux Debian (Crunchbang), donc pas d'IE.
Mon favicon ici est hébergé sur Dropbox dans le dossier "public". Je crois en effet que Picasa n'héberge pas les fichiers .ico. Sur Dropbox, créez un sous-dossier par exemple "monsite1" pour stocker le favicon car un favicon doit être nommé en principe "favicon.ico". Alors, si vous avez plusieurs blogs, faites un dossier de favicon pour chaque blog (à moins de préférer avoir le même favicon pour tous vos blogs). Récupérez le lien dans Dropbox (lien public)

A copier avant </head>. N'oubliez pas de remplacer l'URL du favicon par la votre, of course!

Nouveau message

Comment améliorer son snippet dans google en modifiant ses méta descriptions

Par libretto

Commençons par la définition d’un snippet tel que définie par l’équipe de google francophone (dans un article sur la manière de retirer une page de l’index) :

Un « snippet » Google est un court extrait de page qui permet aux utilisateurs de voir leurs termes de recherche en caractères gras et en contexte dans les résultats Google, et de sélectionner la page qui les intéresse. En général, les utilisateurs sélectionneront plus volontiers (et plus rapidement !) une page qui est présentée avec des termes en contexte. Suite >>>

Nouveau message

Supprimer le Titre et l'Attribution

Astuce perso trouvée par hasard...
Pas très difficile !
Pour le titre:

Allez dans "Présentation" puis "modifier le code HTML"
Faites une sauvegarde de votre modèle (Toujours !)
Recherche dans votre code (F3) <b:section class='header'
Concentrez-vous sur le code en dessous et changer "true" (vrai) par "false" (faux)

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title=' BlogNotes (en-tête)' type='Header'/>

</b:section>

Pour l'Attribution... Il est évident que ce n'est pas très sympa de l'enlever ou de le modifier, mais parfois, on a tellement personnalisé le modèle d'origine qu'il n'a plus de raisons d'être.

Cherchez <b:section class='foot' puis concentrez-vous sur la suite du code:

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>

Changez une nouvelle fois "true" en "false"
Enregistrer le modèle
Rendez-vous maintenant dans "Présentation" puis "Eléments de la page"
Cliquer sur modifier l'élément "en-tête" (ou titre ou header)
Un bouton "supprimer" est maintenant visible. Il suffit de cliquer sur "supprimer" pour que le titre disparaisse définitivement.
Idem pour "Attribution", vous pouvez maintenant le supprimer.
Notez que ces éléments sont en fait des widgets. Si vous changer d'idée, vous pourrez toujours "ajouter un widget" et choisir celui que vous avez supprimé. En faisant une recherche sur "true", on peut trouver d'autres éléments à modifier.

Nouveau message

Remplacer le titre du blog par une image

Trouvé sur http://blogs-google.blogspot.com

Il faut d'abord enlever le titre :
Cliquez sur l'onglet "Modèle"
Choisissez "élément de la page"
Au niveau de l'en-tête cliquez sur "modifier"

Remplacez le champs "Titre du blog" par du blanc

Une fois le titre supprimé, insérez la photo
pour cela utilisez :
- "From your computer" : si votre image se trouve sur votre ordinateur
- "Depuis le Web" : si votre image est déja publiée sur le net.

Il ne vous reste plus qu'à enregistrer les modifications.

Pour centrer l'image :

Il faut d'abord retourner dans l'entête et intervenir sur le placement de l'image :
Sélectionnez "Substituer le titre et la description".

-Repérez l'id (identificateur) de la balise (<img id="identificateur">). Pour cela affichez le source de votre blog et répérez ou se trouve votre image
Ex pour mon modèle le voici:
<img alt=' ' height='100' id='Header1_headerimg' src='http://fqb.fqb.googlepages.com/1.gif'

Il vous faut maintenant utiliser une des 2 méthodes suivantes :

1) Méthode par modification du code HTML de votre blog
(Voir l'article Modifier le code HTML de votre blog)
Ajoutez le code suivant juste avant la balise </style> :
#Header1_headerimg
{margin: 0px auto 10px; display: block; text-align: center;}

2) Méthode par javascript :

Ajoutez un élément de type HTML/JavaScript
et copiez/collez le code suivant :
<script type="text/javascript">

</script>

http://blogs-google.blogspot.com/2007/05/remplacer-le-titre-du-blog-par-une.html

Nouveau message

Blogger: redimensionner une image

Quand on insère une image dans un post, les dimensions standards ne nous conviennent pas forcément (petit, moyen, grand, extra-grand, etc..)

Voici comment ajuster facilement votre image.

Aller dans "Modifier le code HTML"
sélectionner height="480" et supprimez-le
Modifiez la valeur de width="640", par exemple width="500"
Publiez le message. Blogger a redimensionné l'image en conservant ses proportions
Attention! Pour disposer de height et width, vous devez avoir choisi autre chose que la dimension originale, sinon, ils n'apparaissent pas et vous devrez les rentrer manuellement.

Exemple:

Nouveau message

mardi 23 août 2011

Modèles minimalistes pour mini-blogs

Ici vous pourrez télécharger non pas des modèles sophistiqués mais au contraire simplifiés à l'extrême. C'est bien utile quand on veut bidouiller son blog. On peut ainsi créer de nouveaux mini-blogs qui pourront apparaître dans votre blog principal à travers un iframe et ce, sans fioritures ni widgets (ou le minimum). Un mini-blog peut aussi servir à afficher des images devant être actualisées automatiquement et visibles aussi dans un i-frame (webcam, images satellites, etc...). On peut aussi s'en servir pour créer des pages web classiquement en passant par un éditeur wysiwyg.

Dernier modèle compressé encore amélioré (aucun lien de type "accueil", etc...)
Dernier modèle! Ultra simple, le code tient en quelques lignes surtout dans la version compressée. Vous pouvez évidemment bricoler ces modèles (ou templates) comme vous le voulez. Dans ce cas, utilisez plutôt la version non compressée, plus claire. Télécharger les 2 modèles
Modèle 1 (exemple ci-dessous en iframe). Nombreux bidouillages invisibles dont actualisation automatique toutes les 400 secondes (6 mn) et "nocache" entre autres...
Modèle 2 - Basic-Black Idéal pour afficher des images
Modèle 3 - Basic-White

Exemple: Bidouillage avec 1 webcam

STOP to save bandwith - pour économiser votre connexion

Nouveau message

Faire disparaître la NavBar de Blogger

Rechercher <b:skin> et ajouter le code en bleu. Un peu ennuyeux, cela laisse un blanc à la place. Vous pourrez peut-être jouer sur les margin ou les padding ensuite

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Awesome Inc.
Designer: Tina Chen
URL: tinachen.org
----------------------------------------------- */

#navbar-iframe {

display: none !important;

}

/* Variable definitions
====================

Ouvrir les liens dans une nouvelle page ou onglet...

Tout comme dans un site HTML normal, on peut bidouiller le Head pour que tous les liens s'affichent dans une nouvelle fenêtre ... (très utile)

Ajouter juste après ...
<head>
<base target='_blank'/>

Nouveau message

javascript dans head...

Détournement de widget...

On a parfois besoin d'insérer du javascript entre <head> et </head>...
Sans modifier votre modèle, vous pouvez simplement l'insérer dans un nouveau widget. Il sera invisible au visiteur mais bien opérationnel (ne fonctionne pas toujours)
On peut aussi essayer d'insérer du CSS de la même manière, à vérifier...

Widget Dictionnaire Google

Notez que normalement le dictionnaire Google n'existe plus mais est remplacé par Google Translate. J'ai inséré le script dans un tableau sinon, de temps en temps il grandit en hauteur sans raison (Bug). Vois pouvez mettre la valeur 0 à "border".

lundi 22 août 2011

Crayon "Quick Edit" manquant ?

Texte en Anglais... sorry!

Check the quick edit settings

The first thing we should do is check that the quick editing is activated in your blog's settings. To check this, go to Settings>Basic in your Blogger dashboard and scroll down to the section which says "Show quick editing on your blog".

You should ensure this option is set to "yes" and save this setting.

Then go to Layout>Page Elements in your Blogger dashboard, and click on the "edit" link for the Blog Posts widget.

On this pop-up page, you should ensure you have checked the "Show quick editing" option which enables you to quickly edit your blog posts.

Check if the required code is present in the template

Next we need to check if the code required to make these icons appear is still present in your template.

To find out, go to Layout>Edit HTML in your Blogger dashboard. Check the "Expand widget templates" box, then search for this section of code:

<b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/> </a> </span> </b:if> </b:includable>

The easiest way to locate this section is to use your browser's search function and find the following phrase:

b:includable id='postQuickEdit' var='post'

If this section of code is present in your template, you're already halfway towards adding those quick edit icons again.

If this section of code is not present in your template, you will need to copy the entire b:includable section above, then paste this just before the following line of code in your template:

<b:includable id='comments' var='post'>

Once you are sure that this code is present in your template, you need to add a simple line of code to the posts section where you would like your quick edit icon to appear:

<b:include data='post' name='postQuickEdit'/>

In this template, my quick edit icon is located in the "post-footer" section, like this:

<div class='post-footer-line post-footer-line-1'> <b:include data='post' name='postQuickEdit'/> </div>

If the "post-footer-line" section is not present in your own Blogger template, you may prefer to add the quickedit code just after this line instead:

<data:post.body />

Once you have added this line of code, preview your template. The quickedit icons will not appear in the preview, but if you have made any errors during these changes, the preview will make you aware of this.

Finally, you can proceed to saving your template. Then view your blog in your browser. Your quick edit icons should now appear below each of your blog posts which allows you to easily edit posts when you are logged in to your Blogger account.

Did this work for you?

I hope this tutorial has enabled you to restore missing quick edit pencil icons for your Blogger posts with the minimum of fuss!

Please let me know if this tutorial has been useful for you by leaving your comments and opinions below.

Si ça ne marche pas pour vous, n'hésitez pas à aller sur l'article d'origine et regardez les commentaires...
http://www.bloggerbuster.com/2008/07/how-to-add-quick-edit-pencil-to-blogger.html

Blogger Errors

Edit Customize Template

et... Google est mon ami