Affichage dans iframe, pop-up ou lightbox / shadowbox

Afficher une page HTML ou un élément sur une autre page HTML

On peut afficher une page HTML ou un élément média (animation Flash ou une vidéo) sur une autre page HTML, on peut utiliser le code <iframe> :

• pour Flash

<div align="center">

<iframe allowfullscreen="" frameborder="0" height="400" src="http://www.igorlaszlo.com/contactform/contactform.swf" width="400"></iframe></div>

Exemple:

Opacité des éléments

La meilleur solution à faire les éléments semi-transparents (p.e. bordure, texte), il faut utiliser le format de couleurs en RVB (rouge/vert/bleu - RGB en anglais).

div {

border: 1px solid rgba(255, 0, 0, .5);

}

div - remplacez avec l'élément qui contient la bordure, p.e. #body
0.5 - valeur d'alpha : l'opacité de 50%, si vous voulez 25% du transparence, marquez 0.25, etc.
Pour connaître les numéros RVB, cherchez les trois chiffres ici !


Le problème c'est que les anciens navigateurs (Mozilla Firefox 2 et avant, IE 8 et avant, Safari 2 et avant, Opera 9 et avant, Netscape tous les version) ne reconnaissent pas ce code (rgba avec valeur d'alpha), donc ils ne vont rien afficher. Pour éviter du manque de l'élément, on doit ajouter un code sans :

div {

border: 1px solid rgb(127, 0, 0);

border: 1px solid rgba(255, 0, 0, .5);

}

Dans ce cas les navigateurs moins performants affichent les éléments sans opacité et les navigateurs plus performants affichent les éléments semi-transparent.

Flash music player (lecteur audio mp3)

Ce que je vous propose ici, c'est un lecteur de musique en Flash. La caractéristique et les avantages :

Supporte des fichiers en mp3 et autres formats audio. Je conseille les mp3 qui sont les plus adaptés à cause de leur "poids". Leur légèreté permet de ne pas attendre trop au téléchargement.
Ajoute des plusieurs musiques : qui sont lues à l'ordre de votre choix.
Le bouton "recherche rapide" à avancer/reculer : facilite qu'on puisse sauter la musique qu'on ne voudrait pas écouter en arrivant vite à la musique souhaitée.
Le temps écoulé et le temps total de la musique jouée sont affichés en minute.
Le temps écoulé est affiché en temps réel sur une barre progressive.
L'artiste et le titre de la musique jouée sont affichés.
Le design est personnalisable (couleurs, boutons, positions, affichage, etc.).

Lecteur avec installation/intégration/personnalisation : 20 euros

Changer la couleurs de la barre de défilement (scrollbar)

Attention ! Ça ne marcherait que sous IE et Opera (je n'ai pas testé !) car ça n'est pas standard w3c, donc Mozilla ne le tiens pas en compte (la barre de défilement est une partie du navigateur et pas du site web).

La déclaration soit :

- dans le code html {} si ce sont les barres extérieures (du navigateur) !

html {

scrollbar-face-color:#333333;

scrollbar-arrow-color:#CCCCCC;

scrollbar-track-color:#000000;

scrollbar-shadow-color:#000000;

scrollbar-highlight-color:#CCCCCC;

scrollbar-3dlight-color:#CCCCCC;

scrollbar-darkshadow-color:#000000;

}

Sélecteur de couleurs en hexadécimal et en RGB (color picker)

Veuillez trouver votre couleur en trois modes :

- choisissez votre couleur en glissant votre sourie dans le champs de couleurs et retrouvez le code en hexadécimal ou les numéros RGB.
- tapez votre code de hexadécimal dans la rubrique après le #, la couleur recherchée va être visualisé dans le champs de couleur et retrouvez les numéros RGB.
- tapez les numéros RGB dans les trois rubriques appropriées ( R: ; G: ; B:), la couleur recherchée va être visualisée et retrouvez le code hexadécimal dans la rubrique après le #.

Galerie photo Flash

J'ai essayé de développer une galerie photos qui me convient à tout aspect.

Je voulais protéger mes photos, donc Flash est juste parfait pour cette fonction. La clique droite ne marche pas. Sachez qu'il y a un moyen quand même à sauvegarder les photos avec une capture d'écran mais ça reste juste la taille de l'écran et la qualité est très réduite.

Compteurs de visiteurs - statistique pour des sites Blogger

Pour avoir une idée du trafic (passage) de vos visiteurs, pour savoir d'où ils viennent, avec quels mots de clé ils vous ont trouvé, de quels pays, combien fois et quelles pages ils ont visité, ils sont resté combien de temps, ils utilisaient quel navigateur, sur quel dimension de l'écran, vous trouvez plusieurs widgets sur internet et souvent gratuits. Il faut juste faire attention que ces widgets ne soient pas des espions de votre système ou ne portent pas des fenêtres pop-up publicitaires (ce qui est arrivé avec moi quand j'ai installé une bannière de Weborama - http://www.weborama.fr - qui a tué la navigation de mon site).

Sur Blogger, vous avez déjà une page de statistique élaborée que vous trouvez dans l'onglet "Statistique"sur le tableau de bord et qui montre par période (jour, semaine, mois, toutes les périodes) :

Flash smooth scroller (barre de défilement)

Le Smooth Scroller (scroller = barre de défilement verticale/horizontale ; smooth = lisse) est une petite animation consistant à dérouler votre texte, les images ou des autres contenus de manière progressive et continuelle.

Le scroller de la démo ci-dessous marche avec l'AS2.

Vous pouvez me demander de changer les contenus ou la couleur du fond, la taille, la police, le design en général et l'installation du scroller, tout pour 20 euro.

Comment changer ou supprimer le lien "Inscription à (Atom)"

A la base de votre template Blogger vous trouvez deux liens au pied des pages. Le premier est affiché sur la page principale, à l'accueil : Inscription à : Messages (Atom) , le deuxième est toujours sur la page d'un message sous les commentaires : Inscription à : Publier les commentaires (Atom) .

Inscription à : Messages (Atom)

En cliquant sur ce lien, le système redirige votre visiteur vers la page de flux de messages (articles) de votre site pour s'abonner.

Inscription à : Publier les commentaires (Atom)

En cliquant sur ce lien, le système redirige votre visiteur vers la page de flux de commentaires de votre message (article) pour s'abonner.

Vous voulez peut-être changer ce texte pour faire comprendre mieux votre visiteur ce dont il s'agit ou même enlever complètement cette option. Dans tous les cas vous devez aller à l'onglet "Présentation" > "Modifier le code HTML", puis cochez "Développer des modèles de gadgets".

CHANGER LA PARTIE TEXTE "INSCRIPTION A"

Cherchez le code <data:feedLinksMsg/>. Pour faciliter le recherche dans cette masse de codes, utilisez CTRL + "F" et tapez le code dans le champs de recherche.
Ce code représente le texte "Inscription à" que vous pouvez changer mais pas la partie "Message (Atom)" et "Publier les commentaires (Atom)" !

Veuillez remplacer ce code simplement à votre texte souhaité. Si vous voulez remplacer le texte avec une image de RSS par exemple, vous devez insérer le code suivant avec le lien de l'adresse de votre image : <img src="http://www.votredomaine.com/rss.png">.
Sur mon site, j'ai remplacez le code <data:feedLinksMsg/> avec le texte Pour rester informé, inscription aux flux <img height='20px' src='http://www.igorlaszlo.com/rss.png' width='20px'/>(RSS) de :

SUPPRIMER LA PARTIE LIEN "(ATOM)"

Pour enlever la partie du lien "(Atom)", veuillez chercher le code (<data:f.feedType/>) et supprimez-le. Pour faciliter le recherche dans cette masse de codes, utilisez CTRL + "F" et tapez le code dans le champs de recherche.

SUPPRIMER L'ENSEMBLE DU TEXTE ET DU LIEN

Si vous avez déjà un bouton installé où votre visiteur trouve votre lien de flux de messages et des commentaires, vous voulez peut-être supprimer les options en bas de votre page d'accueil et au pied de vos articles. Cherchez le code <b:include name=’feedLinks’/> et supprimez-le.

Si la personnalisation ou la désinstallation vous cause un problème, je peux vous aider :
15 €/personnalisation complète avec petite image (selon votre besoin).

HTTrack - logiciel pour sauvegarder votre site internet sur votre ordinateur

HTTrack est un logiciel gratuit qui permet de télécharger un site Internet sur votre disque dur, en reconstruisant tous les répertoires. Il récupère les pages HTML, les images et les fichiers du serveur vers votre ordinateur. HTTrack réorganise la structure des liens en relatif. Quand vous ouvrez une page du site "aspiré" dans votre navigateur, vous pouvez naviguer librement à l'intérieur, comme si vous étiez connecté. HTTrack peut également mettre à jour le contenu d'un site existant ou reprendre un téléchargement interrompu. Le robot est entièrement configurable, avec un système d'aide intégré.

Accueil du site HTTrack : http://www.httrack.com/

Explication de démarche (en anglais) : http://www.httrack.com/page/20/fr/index.html

Téléchargement : http://www.httrack.com/page/2/fr/index.html

Comment cacher le bar de navigation (navbar) de Blogger

Voici le bar de navigation Blogger qu'on voudrait faire disparaître :

Allez sur votre tableau de bord Blogger, choisissez l'option "Présentation" de votre blog ou site concerné, cliquez sur l'onglet "Modifier le code HTML".

Cherchez la partie CSS juste au début de vos codes entre les balises <head> et </head>. Si le code suivant existe déjà, ajoutez la partie "visibility:hidden;" et "display:none;" comme vous voyez ci-dessous, si non, insérez le code entier à la page :

#navbar-iframe {

height:0px;

visibility:hidden;

display:none;

}

Enregistrez le modèle (bouton orange), puis vous pouvez aller sur votre site à vérifier le résultat.

Flash preloaders

Parfois votre site web flash (animation) est lourd tant qu'il faut attends pour son téléchargement. Ce temps mieux de montrer à votre visiteur que quelque chose se passe, que le téléchargement est en cours, si non, il y a du risque que le visiteur quitte la page avant voir le site. Un preloader (pré-chargeur) résout le problème en montrant le contenue chargé en pourcentage. Je vous offre plusieurs designs de preloader pour 15 euros avec l'installation et avec la modification du design si vous souhaitez, voici les exemples :

Installer Facebook Like Box sur votre site web

Qu'est-ce qui est Facebook Like Box : c'est un gadget (widget) qui affiche le nombre de gens avec leur image du profil Facebook sur votre site. Le but de ce gadget c'est que vos visiteurs voient la popularité de votre site, en plus le lien entre Facebook et votre site est avantageux pour votre référencement et pour la visibilité de votre site.

Ne confondez pas le profil Facebook et la fan page Facebook, les deux sont différent !

Premièrement vous devez avoir un profil Facebook pour être capable faire une page (fan page) Facebook. Connectez vous à votre profil et laissez le ouvert.

Deuxièmement vous devez avoir une page (fan page) Facebook pour être capable d'installer Facebook Like Box sur votre site web. Allez sur cette page et choisissez l'option la plus appropriée de votre page Facebook. En cliquant sur une option, vous pouvez voir les catégories à choix. Si ça ne correspond pas au sujet de votre site, cliquez sur une autre option. A la deuxième rubrique vous devez indiquer le nom de l'entreprise, le nom de produit ou du service, etc., dépend de ce que vous avez choisi.
Cochez "J’accepte les conditions applicables aux Pages Facebook" et cliquez sur le bouton "Démarrer".

Blog pager : changer ou supprimer les liens de navigation entre deux billets (message plus récent, message plus ancien et accueil)

Quand vous rentrez dans un article dans Blogger, vous pouvez constater qu'il y a des liens à pied de votre message/article (post-footer) : "Message plus récent", "Accueil" et "Message plus ancien". Ça s'appelle blog-pager en anglais qui serrent à la navigation entre deux articles sans retourner à la page d'accueil. Certaines personnes, comme moi, n'aiment pas la présentation de ces liens. Moi, personnellement je ne les aime pas parce que je trouve qu'il y a trop de liens autour et ça trouble le regard d'ensemble, esthétiquement n'est pas beau et ça dérange l'attention du visiteur.

Vous pouvez :

1) changer le texte des liens,

2) ajouter une image à coté du texte des liens,

3) remplacer le texte avec une image des liens,

4) repositionner les liens,

5) faire disparaître ces liens.

Comment arrêter une animation Flash après un certain temps

CS3 Player 9 AS2

Exemple : vous avez une animation de 280 images qui se répète. Au fond il y a une musique de 1 minute 45 (donc l'animation est plus courte) et je voudrais que l'animation s'arrête quand la musique arrive à la fin.
Il faut ajouter sur la scène principale à la première image le code suivant :


function wait() { // la fonction est appelé 'wait' (attendre)
   stop();
   holder.attachMovie('content','content',1); // holder est le clip sur la scéne qui affiche mon texte à la fin, content est le clip du texte qui est appelé à partir de la bibliothèque
   clearInterval(myTimer); // empêchee répéter la function

}

myTimer = setInterval(wait, 107000); // ça va appeler la function en attendant 107 seconds = 1 min 47 sec


Donc, l'animation s'affiche en boucle et quand la musique arrête après 1 min 47 sec, mon anim arrête aussi et un texte apparaisse à la fin...

Voilà :

Formulaire de contact

Je vous propose un formulaire de contact (contact form) Flash personnalisable avec l'aide du système PHP.
Vous pouvez me demander de changer l'image ou la couleur du fond, la langue, la taille, la police, le design du bouton et l'installation du formulaire, tout pour 20 euro.

Le formulaire peut être mis sur un site Blogger, WordPress ou Flash. L'avantage d'un formulaire (contre un simple lien de l'adresse de votre e-mail) c'est que les spammeurs, hackers ne trouvent pas votre adresse facilement et vous pouvez éviter un grand nombre de publicité.

Widget commentaires récents

Le même problème comme dans mon article précédent : les blogs de Blogger sont plus adaptés pour Mozilla Firefox et la plupart de widgets commentaires récents n'apparait pas dans Internet Explorer. Aussi, ces widgets sont en anglais.

J'ai trouvé un widget qui a résolu ces problèmes et qui propose également quelques options personnalisées (taille de widget, nombre de commentaires, etc.). Vous trouvez l'explication et la source sur le site de Viti-Vino.

Problème de la publication de commentaires dans Internet Explorer

Les blogs de Blogger sont plus adaptés pour Mozilla Firefox. Donc de temps en temps il y a un problème de l'affiche de la publication des commentaires dans Internet Explorer, simplement dite, la forme de commentaires disparaît ou le bouton "envoyer" ne marche plus. Je vous propose une solution qui a l'air plus stable et fiable : Disqus. Leur widget vous permet de régler de certaines options (identification de profils Facebook, avatars, etc.). L'installation est très facile et rapide, en plus ils proposent plusieurs widgets à installer sur votre site (commentaires récents, l'article le plus populaire, etc.).



Si vous ne parlez pas anglais ou vous ne connaissez rien de la personnalisation d'un blog, je peux vous aider :
20 €/installation complète

Appliquer et enlever la bordure autour d'une image avec code CSS et HTML

Si vous voulez appliquer une bordure autour de TOUS LES IMAGES insérées dans les pages du site,
1) ouvrez votre page HTML,
2) avec l'aide de language CSS vous devez insérer le code suivant entre les balises <header><style type="text/css"> et </style></header> :

img {
    border: 20px solid #CCCCCC;
}

L'exemple montre une bordure de 20 px large d'une ligne continuelle d'un couleur gris léger.

Création et installation de votre propre icône

Un favicon est une icône informatique symbolisant un site web. Ces icônes sont créées par les propriétaires des sites. Les navigateurs web utilisent les favicons dans la barre d'adresse, la barre de titre, les favoris, les onglets et autres raccourcis.

1) Préparez une image à convertir au format .ico (à partir de votre logo par exemple). Utilisez Photoshop ou Atweaver, choisissez une taille de 256x256 px puis enregistrez idéalement au format .png.
Voici mon logo :