jeudi 28 février 2013

Impossible d'afficher une image transparente...

Problème transparence image dans Blogger...

Problème récurrent!

Sur certains de mes blogs, pas de problèmes, sur d'autres, impossible. C'est donc plutôt un problème de modèle...

Il semblerait pourtant que Picasa gère maintenant les images transparentes (GIF et PNG). Cependant (si je fais erreur), il suffit d'héberger l'image ailleurs, sur Dropbox (par exemple), dans le dossier "public" et de récupérer l'URL de l'image.

Hélas, sur un de mes blogs, rien y fait. Pas d'image transparente!

J'ai contourné le problème avec un iframe dont voici le code:

<p style="text-align: center;">
<iframe frameborder="0" height="761" scrolling="no" src="https://dl.dropbox.com/u/19586410/Blogs/BEPaffiche.png" width="711" allowtransparency="true" ></iframe></p> 

On remarquera allowtransparency="true" 

Ce code copié-collé dans mon message m'a permis d'afficher mon image avec sa transparence. Enfin!
En fait, l'image en restant sur Dropbox est complètement indépendante de Blogger. Cette image demande une préparation, c'est-à-dire qu'elle doit être redimensionnée exactement à la taille disponible dans le message ainsi que l'iframe. 

On peut peut-être aussi probablement mettre l'image en background d'un tableau ou peut-être aussi dans un <object>. Une autre solution un peu plus longue est d'utiliser un logiciel comme Swishmax et d'en faire un SWF (Flash). Swishmax fonctionne très bien sous Linux (via Wine).

Je travaille mes images avec Photofiltre sous Linux. Je n'aime pas Krita et Le Gimp me fatigue (pour rester poli)...

C'est le blog que j'ai créé il y a déjà pas mal de temps pour le Restaurant Pédagogique de mon Lycée à St Martin, Antilles.

L'image transparente (affiche) n'est pas de moi, je précise!!!

samedi 16 février 2013

BOUTON CONTACT CRYPTÉ

Bouton "Contact Us" codé.

Voici le code de base d'une image avec un lien de type email (vous pouvez utiliser mon image, de toutes manières je l'ai trouvée via Google et l'ai juste recadrée un peu et diminuée).
Je vous conseille de faire vos essais sur un blog de test ou mieux dans un éditeur de texte genre bloc-note ou Mousepad (Linux), voire même encore mieux avec l'excellent FCKeditor.

<p style="text-align: center;">
<a href="mailto:monemail@gmail.com"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVs7-QZegjte2xOb2qBWL9Y89Uz9JiHUghv7zCPJ8nIQVlKjbztBvWKex1PAMNCgrhPnEdeaWjq1fxtWOh475hsfYrBq6kzUx56fFAqaYGtRHru4lhZXck-aS-ExRKaK32SZuCGL04J75F/s1600/ContactUs2.jpg" style="width: 200px; height: 36px;" /></a></p>

Il suffit de coder l'adresse email "monemail@gmail.com" avec http://www.fingerlakesbmw.org/main/flobfuscate.php  (sans mailto:) ce qui donne ça:

<a href='&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#109;&#111;&#110;&#101;&#109;&#97;&#105;&#108;&#64;&#103;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;'>&#109;&#111;&#110;&#101;&#109;&#97;&#105;&#108;&#64;&#103;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;</a>

puis de modifier le code de base ce qui donne ça:

<p style="text-align: center;">
<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#109;&#111;&#110;&#101;&#109;&#97;&#105;&#108;&#64;&#103;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;" target="_blank"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVs7-QZegjte2xOb2qBWL9Y89Uz9JiHUghv7zCPJ8nIQVlKjbztBvWKex1PAMNCgrhPnEdeaWjq1fxtWOh475hsfYrBq6kzUx56fFAqaYGtRHru4lhZXck-aS-ExRKaK32SZuCGL04J75F/s1600/ContactUs2.jpg" style="width: 200px; height: 36px;" /></a></p>

A ce stade, ça devrait déjà fonctionner. Vous pouvez déjà essayer. Mais le problème, c'est qu'un jour où l'autre, probablement en éditant votre message en mode "Rédiger", Blogger va mettre votre code en vrac et plus rien ne fonctionnera.

Donc, on va re-crypter le code ci-dessus EN ENTIER cette fois avec http://jean-louis.pierre.pagesperso-orange.fr/Crypter-le-HTML.htm

Et ça nous donne:

<script language="JavaScript"> /* Generated using sourceLocker v1.0 LITE Edition (svetlin@developer.bg, kirokomara@designer.bg) */m='%3Cp%20style%3D%22text-align%3A%20center%3B%22%3E%0A%20%20%20%3Ca%20href%3D%22%26%23109%3B%26%2397%3B%26%23105%3B%26%23108%3B%26%23116%3B%26%23111%3B%26%2358%3B%26%23109%3B%26%23111%3B%26%23110%3B%26%23101%3B%26%23109%3B%26%2397%3B%26%23105%3B%26%23108%3B%26%2364%3B%26%23103%3B%26%23109%3B%26%2397%3B%26%23105%3B%26%23108%3B%26%2346%3B%26%2399%3B%26%23111%3B%26%23109%3B%22%20target%3D%22_blank%22%3E%3Cimg%20alt%3D%22%22%20src%3D%22http%3A//2.bp.blogspot.com/-BQew88_9nRM/UR-_lePcMyI/AAAAAAAAGUk/Scksa1CgMTI/s1600/ContactUs2.jpg%22%20style%3D%22width%3A%20200px%3B%20height%3A%2036px%3B%22%20/%3E%3C/a%3E%3C/p%3E';d=unescape(m);document.write(d);</script>

Et voilà ! Vous pouvez bien sûr essayer le bouton ci-dessous...

Vous pouvez aussi essayer de crypter votre HTML ici: daubresse.fr (excellent, plus rien de l'email apparaît, et peut donc sauter la première étape).



Crypter 2 fois une adresse email

Adresse email codée deux fois...
On le sait, il n'est pas prudent d'afficher une adresse email en clair sur un blog ou un site.
J'avais déjà parlé de cela il y a quelques temps.
On peut utiliser pour cela ce site (le lien est dans la barre de gauche en "Encryptage") http://www.fingerlakesbmw.org/main/flobfuscate.php.

Mais... parfois, il semble que Blogger rétablit l'adresse en clair. Je n'en suis pas sûr, mais il me semble.... Une solution complémentaire c'est donc de recrypter le code obtenu avec ce site: http://jean-louis.pierre.pagesperso-orange.fr/Crypter-le-HTML.htm

Exemple avec monemail@gmail.com

1. Passage à la moulinette avec http://www.fingerlakesbmw.org/main/flobfuscate.php
Résultat:

<a href='&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#109;&#111;&#110;&#101;&#109;&#97;&#105;&#108;&#64;&#103;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;'>&#67;&#111;&#110;&#116;&#97;&#99;&#116;&#101;&#122;&#45;&#109;&#111;&#105;</a>

2. Passage à la moulinette du code obtenu ci-dessus avec l'utilitaire de http://jean-louis.pierre.pagesperso-orange.fr/Crypter-le-HTML.htm

Résultat:
<script language=JavaScript> /* Generated using sourceLocker v1.0 LITE Edition (svetlin@developer.bg, kirokomara@designer.bg) */m='%3Ca%20href%3D%27%26%23109%3B%26%2397%3B%26%23105%3B%26%23108%3B%26%23116%3B%26%23111%3B%26%2358%3B%26%23109%3B%26%23111%3B%26%23110%3B%26%23101%3B%26%23109%3B%26%2397%3B%26%23105%3B%26%23108%3B%26%2364%3B%26%23103%3B%26%23109%3B%26%2397%3B%26%23105%3B%26%23108%3B%26%2346%3B%26%2399%3B%26%23111%3B%26%23109%3B%27%3E%26%2367%3B%26%23111%3B%26%23110%3B%26%23116%3B%26%2397%3B%26%2399%3B%26%23116%3B%26%23101%3B%26%23122%3B%26%2345%3B%26%23109%3B%26%23111%3B%26%23105%3B%3C/a%3E%0A';d=unescape(m);document.write(d);</script>

Résultat (et ça fonctionne!) Cliquez pour essayer!




Je vais essayer d'en faire un avec un bouton...

vendredi 15 février 2013

WIDGET RECHERCHE INTERNE (2)

Encore une "Search Box"...
Cela permet aussi de voir comment insérer directement du CSS.
J'ai rajouté les balises <center> pour centrer le formulaire dans la page. C'est évidemment facultatif.


<center>
   <style type="text/css">
#searchbox
   {
    background: #eaf8fc;
    background-image: -moz-linear-gradient(#fff, #d4e8ec);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
    -moz-border-radius: 35px;
    border-radius: 35px;
    border-width: 1px;
    border-style: solid;
    border-color: #c4d9df #a4c3ca #83afb7;            
    width: 270px;
    height: 35px;
    padding: 10px;
    
    overflow: hidden;
   }
#search, #submit
        {
            float: left;
        }
        #search
        {padding: 5px 9px;
            height: 23px;
            width: 180px;
            border: 1px solid #a4c3ca;
            font: normal 13px 'trebuchet MS', arial, helvetica;
            background: #f1f1f1;
           -moz-border-radius: 50px 3px 3px 50px;
             border-radius: 50px 3px 3px 50px;
             -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
             -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            }
  #submit
  {  background: #6cbb6b;
            background-image: -moz-linear-gradient(#95d788, #6cbb6b);
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
            -moz-border-radius: 3px 50px 50px 3px;
            border-radius: 3px 50px 50px 3px;
            border-width: 1px;
            border-style: solid;
            border-color: #7eba7c #578e57 #447d43;
            -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
             -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
             box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;     
   height: 35px;
   margin: 0 0 0 10px;
   padding: 0;
   width: 60px;
   cursor: pointer;
   font: bold 14px Arial, Helvetica;
   color: #23441e;
   text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  }
  #submit:hover
  {         background: #95d788;
            background-image: -moz-linear-gradient(#6cbb6b, #95d788);
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
  } 
#submit:active
  {  
            background: #95d788;
   outline: none;
           -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
  }
#submit::-moz-focus-inner
  {
    border: none;
  }  
  
#search::-webkit-input-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }
        #search:-moz-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }    
        #search.placeholder {
           color: #9c9c9c !important;
           font-style: italic;
        }  
        #search:focus
        {
            border-color: #8badb4;
            background: #fff;
            outline: none;
        }   </style>
   <form action="/search" id="searchbox" method="get">
    <input id="search" name="q" placeholder="Type here" type="text" /> <input id="submit" type="submit" value="Search" />&nbsp;</form>
  </center>

Et ça donne...


Bien sûr, vous pouvez vous coltiner avec le CSS pour personnaliser l'aspect... Ce que j'ai fait en quelques minutes (aspect ci-dessus) et pourtant je n'y connais pas grand-chose en CSS... Il vaut mieux s'aider  d'un utilitaire genre Color Picker permettant de tester et connaître les codes couleurs. J'ai utilisé Gcolor2 (Linux). Voici mon code modifié: code_search_box.txt
Un autre conseil: faites vos essais sur un blog de test et dans un nouveau message. Ainsi vous disposerez de la fonction "aperçu", ce qui vous fera beaucoup gagner de temps...

WIDGET RECHERCHE INTERNE

Ici, un formulaire (une "box") de recherche interne pour votre blog...
Vous pouvez évidemment essayer de le personnaliser. Il n'est pas parfait cependant.


<form id="searchform" action="/search" style="display:inline;" method="get">
<input id="searchbox" name="q" size="25" type="text" style=" border: 2px solid black;border-radius: 60px;outline: 0px;">
<input id="searchbtn" value="Search" type="submit" style="background: whitesmoke; border: 2px outset black;  font-weight: bold;border-radius: 20px;position: relative;right: 30px;">
</form> - See more at: http://www.bwidgets.com/2012/08/create-custom-search-box-for-blogger.html#sthash.72qfyzhn.dpuf

D'autres widgets sur http://www.bwidgets.com Excellent! mais en Anglais.

Cela donne ça:



Je vous avais prévenus, il n'est pas parfait. Le résultat est variable selon les blogs.

Chose assez étonnante, mais pas tant que ça, lorsque j'ai créé l'article suivant, le rendu du bouton a changé. Probablement le CSS du nouveau bouton y est-il pour quelque chose...

lundi 11 février 2013

Modifier le widget Libellés

Cette astuce permet de modifier le gadget Libellés et de le rendre plus souple dans le style "Onglets Pages". Vous pourrez notamment peaufiner son aspect en allant ensuite dans
modèle  Personnaliser.

Le gadget Libellés est une liste des libellés présentée sous la forme d'une liste verticale ou d'un nuage. En plaçant ce gadget dans la barre des onglets, cette liste se transforme en un menu horizontal, mais (avec Blogger il y a toujours un mais :D), celui-ci contient quelques anomalies que l'on va rectifier pour qu'il se présente le plus correctement possible dans la version web et aussi dans la version mobile personnalisée.

http://bloggercode-blogconnexion.blogspot.fr/2011/04/adapter-le-widget-libelles-pour-la.html

Pour le centrer:


Dans l'éditeur de modèle :

► Tableau de bord ► Modèle ► Personnaliser ► Avancé ► Ajouter fichier CSS

Essayez avec ces 2 lignes :

.tabs-inner .widget ul { text-align: center; }
.tabs-inner .widget li { float: inherit; display: inline-block; }

Sur un de mes blogs, j'ai ainsi créé un SOMMAIRE de cette manière. Voir ici.

Merci Soraya!
http://bloggercode-blogconnexion.blogspot.fr
D'autres astuces concernant les Libéllés sur le blog de Soraya: GADGETS LIBELLÉS




Modifier, supprimer les libellés avec la nouvelle interface...

Tout est dans le titre!

Lorsque j'ai voulu il y a quelques jours faire le ménage dans les libellés d'un de mes blogs, je me suis rendu compte que contrairement à l'ancienne interface, il n'y avait apparemment pas de possibilité de SUPPRIMER des libellés en masse (c-à-dire dans plusieurs messages à la fois). Toujours possible en modifiant chaque message séparément mais ça, ça devient vite "gonflant"...

En cherchant avec l'ami Google, je suis tombé sur un blog qui expliquait comment le faire, mais c'était confus, et je n'ai rien compris sur le coup comme bien d'autres... (au vu des commentaires...).

Donc voici un petit tuto qui je l'espère sera plus clair. 

Je veux mettre le libellé "bouton" en majuscule. C'est ce qu'il y a de plus difficile à réaliser. Si vous le faites manuellement en modifiant chaque message (ce qui est fastidieux s'il y en a beaucoup), il y a de grandes chances que Blogger remplace immédiatement "BOUTON" par "Bouton". Crise de nerfs assurée! Par contre, si vous voulez complètement changer un libellé, par exemple, changer "bouton" en "boutons" (avec un "s), ce sera un peu plus simple.

Ce menu déroulant est en haut à droite de l'interface...




1. Allez dans votre Tableau de Bord, Votre Blog puis à Messages. Les titres de tous les messages sont affichés ainsi que les Libellés (ou Label ou Tags) que vous leurs avez attribué.
2. cliquez sur le Menu déroulant en haut à droite "Tous les libellés" et choisissez le libellé que vous désirez supprimer. Cela va filtrer et afficher tous les messages contenant ce libellé (ou Label en Anglais).



Il faut noter que pour modifier un libellé, par exemple, le mettre en majuscules, il faut d'abord: 
  • Sélectionnez et repérez (taguer) les messages concernés pour ne pas les perdre en leur attribuant un nouveau libellé bien reconnaissable. Par exemple: "BOUTON1". Pour cela, il faut aller dans le menu déroulant en haut À GAUCHE (voir Capture) sous "Affichage des messages filtrés par libellé "bouton"". En survolant le menu déroulant on voit "Attribuer un libellé aux messages sélectionnés". Choisissez "nouveau libellé".
  • Sélectionner tous les messages concernés puis supprimer ensuite le libellé que l'on veut changer ("Bouton")
  • Afficher les messages contenant le nouveau libellé "BOUTON1" en cliquant dessus. Les mêmes messages se ré-affichent... Vous me suivez ?
  • Sélectionnez tous les messages affichés (filtrés) et refaites la même opération. Créer cette fois le nouveau libellé "BOUTON". Cette fois, Blogger accepte puisque "bouton" (en minuscules) a été supprimé.
  • Supprimez maintenant "BOUTON1" qui n'était là que temporairement pour ne pas "perdre" les messages.

COMMENT SUPPRIMER UN LIBELLÉ DANS LA NOUVELLE INTERFACE ?

Hé oui, et c'est bien là qu'est le problème...! J'ai testé et cherché un peu de temps en m'énervant aussi, car je ne trouvais pas (au début).

Alors ?
Quand tous les messages dont vous désirez supprimer le libellés sont sélectionnés, allez dans le menu déroulant en haut à gauche, cherchez dans la liste le libellé à supprimer et cliquez dessus. Et c'est tout. 
C'est-à-dire que lorsque qu'un ou plusieurs messages sont sélectionnés et s'ils contiennent déjà ce libellé, le libellé en question sera supprimé de ces messages. A l'inverse, toujours en cliquant sur ce libellé dans la liste déroulante, si un message sélectionné ne le contient pas encore, ce libellé lui sera attribué. C'est le même outil donc pour supprimer ou attribuer un libellé. Simple! Mais fallait le savoir...
D'ailleurs, quand vous survolez le libellé "bouton" dans la liste déroulante vous pouvez voir une bulle "Ajouter ou supprimer le libellé bouton" (voir capture).

Les Bugs:
Vous constaterez peut-être quelques bugs... Par exemple, parfois, Blogger attribue le nouveau libellé créé à d'autres messages pourtant non sélectionnés à l'origine. Crise de nerfs en vue! Mais en jouant sur le filtre et les sélections, on peu s'en sortir rapidement.

Si vous trouvez que tout ça reste confus, alors dites-le moi, je recommencerai... Laissez un commentaire.

mercredi 6 février 2013

Convertisseur de vidéo

 C'est pas tout de trouver un lecteur de fichier .FLV (voir post précédent), faut-il encore convertir nos fichiers existants en FLV. L’avantage, rappelons-le est d'afficher des vidéos qui fonctionneront partout (Linux, Mac, Windows) et ceci quelque soit le navigateur. Naguère, il n'y a pas si longtemps,  il fallait avoir le plugin Real Player, Quick Time ou Microsoft Media Player pour jouer une vidéo et il fallait demander au visiteur de télécharger le-dit plugin. Galère!
Avec le FLV, plus de problèmes de ce genre, car c'est du VideoFlash...
J'ai trouvé ce site excellent et gratuit qui permet de convertir toutes sortes de fichiers en d'autres types de fichiers et surtout des fichiers vidéo.


Et en plus, il y a très peu de pub... ATTENTION! Si vous choisissez "very high", votre fichier FLV sera aussi lourd voire plus lourd que votre fichier d'origine. Capture légendée:


Ensuite... téléchargez votre fichier converti...


dimanche 3 février 2013

Générateur de player FLV

Blogger permet d'insérer une vidéo dans un post, mais malheureusement ça ne fonctionne pas toujours bien et il est peu souple. J'ai donc trouvé cette page qui permet de générer un player de vidéo Flash FLV.
L'adresse est ici: http://flv-player.net/fr/players/mini/generator/
Le lien sera aussi dans la barre des widgets à gauche en Outils-Tools