Web-Design - Igor Laszlo

Affichage dans iframe, pop-up ou lightbox / shadowbox

2011-10-23T07:42:00.013+02:00

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

Exemple:

pour HTML

Exemple :

Pour aligner la page html au centre qui est plus large que la page où c'est affichée (si vous n'avez pas d'une colonne de coté), vous pouvez la déplacer vers la gauche en ajoutant le code "margin-left" (voir ci-dessus). Il faut juste calculer le moitié de la différence entre les deux pages.

Afficher une page HTML ou un élément dans un pop-up fenêtre

Définition de pop-up ici !

<a href="javascript:void(window.open('http://www.igorlaszlo.com','blank','scrollbars=yes,toolbar=no,width=1200,height=900'))">ART PHOTOS</a></div>

Exemple :

ART PHOTOS

Afficher une page HTML ou un élément dans lightbox/shadowbox …

Téléchargez les documents pour l'installation de shadowbox, rendez-vous sur le site web de Shadowbox ici !

Ouvrez le shadowbox.css et personnalisez le look selon votre goût !

Envoyez les documents sur votre serveur et notez leur adresse web !
N'oubliez pas de définir l'autorisation des documents (tout lire, enregistrer, exécuter= 777) !

Copiez le code ci-dessous et collez juste avant la basile </head> !

Shadowbox.init({

continuous:true,

counterType:"skip",

overlayOpacity:0.9,

flashVersion:"8.0.0",

players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']

});

</script>

Allez sur votre page (ou ouvrez une nouvelle page/article si vous n'avez pas fait encore), de coté HTML et utilisez le code suivant pour placer votre élément :

<a href="http://igorlaszlo.blogspot.com/p/all-photos.html" player="html;" rel="shadowbox[artphoto-sites];width=1200;height=900;" scale="showall" title="photos de IL">IL ART PHOTOS</a></div>

Exemple :

IL ART PHOTOS

Attention ! Si vous utilisez un blog Blogger, n'utilisez pas les images (.jpg, .png, .gif) comme lien vers une autre image avec shadowbox car elles sont automatiquement affichées dans cette façon. Si vous le faites, votre image va être affichée deux fois. Par exemple ici sur mon présent site :

Exemple :

Je ne me suis pas renseigné encore comment on peut désactiver lightbox de Blogger. A suivre...

Opacité des éléments

2011-10-22T23:28:00.004+02:00

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)

2011-06-24T23:19:00.002+02:00

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)

2011-06-22T22:28:00.002+02:00

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;

}

dans le code body {} si ce sont des barres d'un élément intérieur à body !

body {

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;

}

Les codes en rouges doivent être remplacé avec les codes de vos couleurs !

La résultat de mon exemple (http://proetnicum.blogspot.com) :

Ces codes doivent être placé :

- en cas d'une page HTML d'un site web général (en HTML), entre les balises <head><style type="text/css"><style type="text/css"> </style></head> de la page principale (index.html en général).

- en cas de la page HTML d'un blog Blogger, simplement entre les balises <head> </head>.

EXPLICATION

scrollbar-face-color - couleur du dessus de la barre qui monte et descend

scrollbar-arrow-color - couleur de la petite flèche en haut et en bas du fond

scrollbar-track-color - couleur du fond sur lequel monte et descend la barre de défilement

scrollbar-shadow-color - couleur de l'ombre de la barre (à droite)

scrollbar-highlight-color - couleur du relief de la barre (à gauche)

scrollbar-3dlight-color - couleur de l'ombre foncée de la barre (tout à gauche)

scrollbar-darkshadow-color - couleur de l'ombre foncée de la barre (tout à droite)

#CCCCCC - la couleur en héxadécimal (# + 6 numéros)

Pour trouver une couleur et retrouver son code hexadécimal ou RGB, allez sur cette page ICI !

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

2011-06-22T22:04:00.003+02:00

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

2011-06-15T12:53:00.014+02:00

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.

Je voulais une navigation en deux façons : 1) montrer un ensemble des photos avec des petites vignettes (thumbnails) et en cliquant sur une vignette, la grande image s'affiche, 2) naviguer entre les grandes images directement avec une aide d'une flèche.

Je voulais aussi de cacher les descriptions et les vignettes (thumbnails), on peut les visualiser en bougeant la sourie. Dans cette façon rien ne dérange la vue des images, puis ça fait un effet moderne.

Je voulais également une option d'agrandissement de photos (zoom) car dans certains cas les détails sont importants à voir.

Je voulais un effet de l'apparition/la transition des images. Dans cette galerie, vous pouvez changer l'animation de la transition.

Je voulais une galerie avec un fond transparent que je puisse la faire apparaître sur une page de mon site où il y a des boutons existants, je voulais entièrement intégrer l'animation à mon site. Avec beaucoup de galeries, ça n'est pas possible, juste parce qu'on ne peut pas posséder la source du document .fla .

Je voulais intégrer mes photos dans l'animation à cause de la protection mais aussi à cause du fait que les galeries avec une aide d'un fichier XML ralentie l'animation.
PAR CONTRE, à cause de cette chargement de la galerie (que tous les photos sont intégrées), je vous conseil de diviser vos images et mettre dans des différentes galeries. Je vous propose également ici une galerie albums.

Dans cette démo ci-dessous, dans la galerie albums, seulement le premier album inclue une galerie !

Galerie photos : 45 euros
Galerie albums : 10 euros
Mon service de personnalisation : 20 euros
Traitement de photos : dépend de genre de traitement et de la quantité de photos

Compteurs de visiteurs - statistique pour des sites Blogger

2011-06-09T16:33:00.001+02:00

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

une vue d'ensemble
le nombre de pages vues par message (article)
les sources (URL) du trafic
mots-clés de recherche
les pays des visiteurs
les navigateurs utilisés par les visiteurs (Firefox, Internet Explorer, etc.)
les systèmes d'exploitation utilisés par les visiteurs (Windows, Mac, etc.)

Par contre, cette statistique ne nous montre pas le nombre de visiteurs, en étant curieux, je veux bien savoir. Pour ça, j'utilise le compteur du site Moostik (voir mon compteur sur mon site ci-droite sous "statistique des visiteurs") qui indique le nombre de gens passés sur le site.
Moostik permet de choisir parmi de plusieurs types et personnaliser un compteur graphique qu'on peut faire adapté au design de notre site, mais aussi il permet d'installer un compteur illisible pour ceux qui ne veulent pas afficher cette donnée. Le compteur illisible est une bonne solution pour des sites en Flash également.

Sur Moostik, dans votre compte (car il faut s’inscrire), vous allez avoir une statistique de même genre comme dans votre compte Blogger.

Pour éviter du fait que le compteur compte aussi votre propre visite sur le site (qui est assez fréquent car vous devez vérifier certaines choses en passant par là-bas), cliquez sur l'onglet "outils", cherchez le bloque "Ne pas être compté dans ses propres stats" et cliquez sur "Recevoir / Supprimer le cookie". Un "cookie" va être installer dans votre ordinateur qui empêche le compteur de compter votre visite sur votre site.

Dépend de type du site, j'ai quelques uns où je veux bien montrer aux visiteurs le nombre de pages visitées et le nombre de pays d'où les visiteurs sont venus en affichant le drapeau de chaque pays, ou montrer le drapeau de chaque visiteur passé. Le compteur de FlagCounter (site en anglais) vous offre plusieurs options d'affichage. Le widget est personnalisable pour adapter mieux à votre site. Les miens sur mes sites :

Type 1 sur Proetnicum :

Type 2 sur Prohungarica :

Vous pouvez posséder d'un widget sans vous inscrire mais malgré de ce fait je vous conseille de faire un profil car si un jour vous perdez le compteur à cause d'un bug du système, vous allez le pouvoir de le remettre sur votre site continuant à compter les visiteurs d'où c'est arrêté. Dans ce cas vous pouvez aussi avoir un peu plus d'information et de données :

une vue d'ensemble
pays de visiteurs uniques avec les drapeaux
la date de visites
le nombre de visites et leur date de la page
une présentation de visites par pays avec les drapeaux sur une carte

Un site en français qui offre un widget en indiquant les visites sur une carte, je le trouve un peu trop simple mais peut-être c'est exactement votre but, allez et vérifiez le sur ClustrMaps !

Si vous rencontrez de problèmes (installation, langue, etc.), vous pouvez toujours demander mon aide à tout le moment. Je peux installer ces widgets sur votre site sur la base de vos besoins et de votre description de personnalisation pour seulement 10 euros.

Flash smooth scroller (barre de défilement)

2011-06-03T15:40:00.003+02:00

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

2011-05-30T19:42:00.001+02:00

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

2011-05-24T13:29:00.000+02:00

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

2011-05-21T11:04:00.002+02:00

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

2011-05-20T01:38:00.002+02:00

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 :

Les animations utilisent l'actionscripts 2 (AS2).

Installer Facebook Like Box sur votre site web

2011-05-14T01:31:00.002+02:00

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

Vous êtes à votre fan page Facebook. Il y a plusieurs façon à gérer votre fan page. Moi, personnellement, je copie les liens de mes articles de mon site sur le mur de mon fan page. Comme ça, les gens sont informés des contenus, des nouveautés sur Facebook mais ils sont obligés à visiter mon site s'ils veulent lire tout. (voir sur la prochaine image ci-dessous !)

Vous êtes connecté à votre profil Facebook, donc l'adresse de votre fan page est modifié, il faut recréer l'adresse comme ça les gens extérieurs le trouvent. Copiez l'adresse de votre fan page dans votre navigateur en haut (voir l'image ci-dessous) et collez dans une page du block-note par exemple. Le mien c'est : http://www.facebook.com/pages/Paris-Paris-France/Igor-Laszlo-Web-design/165029490225447. Dans cette adresse il faut laisser la partie /pages/, le nom de votre fan page et le numéro id de votre fan page. Résultat : http://www.facebook.com/pages/Igor-Laszlo-Web-design/165029490225447 . Copiez votre nouvel adresse recréée !

Rendez vous sur http://developers.facebook.com/docs/reference/plugins/like-box/

- dans la rubrique "Facebook Page URL (?)" vous devez coller l'adresse de votre fan page.
- dans la rubrique "Width (?)" vous devez indiquer le largeur de votre colonne (side bar de votre site Blogger) en pixel. Si vous ne voulez pas vérifier en ce moment, vous pouvez le corriger dans le code plus tard.
- dans le menu "Color Scheme (?)" déroulant vous allez la possibilité de choisir entre deux couleurs du gadget, en choisissant "light" va changer le gadget blanc, "dark" va changer le gadget noir.
- la rubrique "Show Faces (?)" vous devez laisser cocher si vous voulez que les vignettes des profils des gens s'affichent.
- la rubrique "Stream (?)" vous devez décocher si vous ne voulez pas que les extraits des contenues de votre site apparaissent.
- la rubrique "Header (?)" vous devez décocher si vous ne voulez pas que le titre "Find us on Facebook" apparaisse.

Démo ci-dessous :

Cliquez sur le bouton "Get Code" !
Copiez n'importe quel code (iframe ou XFBML), les deux marchent sur Blogger, seulement dans quelques cas que ça joue un rôle, vous pouvez encore changer ça plus tard en revenant sur cette page et en recréant le gadget.
Moi, j'utilise le code XFBML.

Allez dans votre tableau de bord (l'administration) Blogger.
Choisissez "Présentation" de votre site où vous voulez installer le gadget. Vous êtes à l'onglet "Éléments de la page".

Cliquez sur "Ajouter un gadget" de la colonne de droite (sur mon site), de la colonne à gauche ou en bas au pied du site, dépend du système (ergonomie) de votre site.
Choisissez HTML/Javascipt un peu plus bas en cliquant sur le bouton bleu "+".
Si vous avez laissé coché la choix header de votre gadget, ça veut dire qu'il y a déjà un titre, laissez vide le champ "Titre" ici. Si non, vous pouvez donner un titre, moi, j'ai donné "Ce qui aime ce site sur Facebook".
Collez le code iframe ou XFBML du gadget dans le champ "Contenu" et cliquez sur le bouton orange "Enregistrer".
Attention, votre gadget est déposé à l'entête" de votre colonne (side bar) de votre site ! Si vous voulez le déplacer, glissez le avec votre sourie en bas entre des gadgets où vous voulez le revoir.
Cherchez le bouton orange sur votre page "Enregistrer" en haut à droite.

On y est, vous pouvez vérifier le gadget en ouvrant votre site web.

Remarque : sur certains sites, comme sur le mien, les vignettes des profils Facebook des gens sont doublées, c'est une erreur Facebook. On est déjà signalé à l'équipe Facebook, si le problème va résoudre, je vais poster quelques mots dans cette article.

Si vous trouvez la procédure trop compliqué, je suis à votre disposition d'installer le gadget pour 20 €, n'hésitez pas me contacter !

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

2011-05-08T21:40:00.009+02:00

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.

Quand vous planifiez à changer de codes de la présentation de vos pages, ayez habituer à commencer toujours avec les pas suivants :

Allez à l'onglet Présentation > Modifier le code HTML et cliquez sur "Télécharger le modèle dans son intégralité". Ça vous permet de télécharger votre version actuel, dans le cas d'une erreur, vous pouvez la recopier et la réinstaller.

Après le téléchargement veuillez cocher la rubrique Développer des modèles de gadgets. Cet acte va montrer la page entière de codes, plus précisément la partie <body> qui est cachée. Nous allons changer des codes qui se trouvent dans cette partie (voir l'image ci-dessous).

Trouvez le code ressemblant à celui-ci :

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'>

<b:includable id='nextprev'>

<b:if cond='data:newerPageUrl'>

</span>

</b:if>

<b:if cond='data:olderPageUrl'>

</span>

</b:if>

La zone bleu représente le lien "Message plus récent", la zone verte est le code du "Message plus ancien" et le texte ocre est la partie du lien "Accueil".

Pour changer le texte des liens, vous devez remplacer les parties suivantes avec votre texte :
► remplacer <data:newerPageTitle/> par exemple avec PROCHAIN ARTICLE
► remplacer <data:olderPageTitle/> par exemple avec ARTICLE PRECEDANT
► remplacer <data:homeMsg/> (si le code se représente deux fois, vous devez changer seulement au premier, souvent c'est le cas) par exemple avec TOUS ARTICLES

Résultat :

<b:if cond='data:newerPageUrl'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>PROCHAIN ARTICLE</a>

</span>

</b:if>

Pour ajouter une image à coté du texte des liens, vous devez insérer les codes de liens de vos images comme c'est indiqué dans les suivants :

<img src='http://www.igorlaszlo.com/webdesign/blogpager-newer3.png'/> - remplacé la partie rouge avec le lien vers votre image hébergé !

Résultat :

<b:if cond='data:newerPageUrl'>

</span>

</b:if>

Pour remplacer les textes avec vos images, vous devez remplacer les parties suivantes avec les liens vers vos images :

► remplacer <data:newerPageTitle/> par exemple avec <img src='http://www.igorlaszlo.com/webdesign/blogpager-newer3.png'/>
► remplacer <data:olderPageTitle/> par exemple avec <img src='http://www.igorlaszlo.com/webdesign/blogpager-older3.png'/>
► remplacer <data:homeMsg/> (si le code se représente deux fois, vous devez changer seulement le premier, voir " autre cas " à la fin de cet article) par exemple avec <img src='http://www.igorlaszlo.com/webdesign/blogpager-home3.png'/>

Pensez à remplacer la partie rouge avec le lien vers votre image hébergé !

Résultat :

<b:if cond='data:newerPageUrl'>

</span>

</b:if>

Peut-être vous avez constaté qu'on peut "tourner les pages" à l'envers, c'est que les messages les plus récents qui sont vers la gauche et les plus anciens sont vers le droit. Personnellement je suis gêné par cette méthode, donc j'ai renverser les deux boutons.

cherchez les codes suivants dans la parti CSS entre <head></head> et insérez float: $startSide; et float : $endSide; comme c'est indiqué ci-dessous :

/* Comments
----------------------------------------------- */
#…
#…
#…

#blog-pager-newer-link {
float: $startSide; > il faut supprimer !

float: $endSide;
}

#blog-pager-older-link {
float: $endSide; > il faut supprimer !

float: $startSide;
}

#blog-pager {
text-align: center;
}

Pour faire disparaître ces liens, cherchez les codes suivants dans la parti CSS entre <head></head> et insérez display:none; comme c'est indiqué ci-dessous :

/* Comments
----------------------------------------------- */
#…
#…
#…

#blog-pager-newer-link {
float: $endSide;
display: none;
}

#blog-pager-older-link {
float: $startSide;
display: none;
}

#blog-pager {
text-align: center;
display: none;
}

Si vous voulez changer vos liens aux images, je peux vous offrir quelques unes, voir ci-dessous. Ce que je voudrais vous demander, si vous pouvez lier les images avec un lien direct et pas sauvegarder et les héberger chez vous. Pour vous ça libère de l'espace, pour moi il y aura plus de liens vers mon site. Merci !

Si vous voulez des images personnalisées, je suis à votre service pour 20 €/set, installation inclue !

Mes sources :

- sur Blogbulk

- sur Isaac Yassar

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

2011-05-05T03:42:00.005+02:00

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

2011-04-19T20:48:00.033+02:00

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

2011-04-18T17:58:00.011+02:00

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

2011-04-17T05:56:00.003+02:00

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

2011-04-12T01:08:00.003+02:00

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.

Dans un blog Blogger, si vous voulez appliquer une bordure autour de TOUS LES IMAGES insérées dans les articles et dans les pages, en générale,
1) allez dans l'onglet Présentation => Modifier le code HTML
2) cherchez /* Posts - - - - - - - - - - - - - - - - - - - - - - */ entre les balises <header><b:skin><![CDATA[/* et ]]></b:skin></header>
3) puis insérez le code suivant au-dessous de cette ligne mentionnée :

.post-body img {
border: 20px solid #CCCCCC;
}

Si vous voulez enlever la bordure d'autour d'une image particulière (mais laisser la régle générale de bordure de tous les images), vous utilisez la language HTML,
1) dans la page HTML d'un site général, cherchez le code de votre image <img src="url de votre image" /> entre <body> et </body>
2) changez le code de source de l'image à celui-ci : <img src="http://www.igorlaszlo.com/ascreen.jpg" style="border: 0px none;"/>
Dans un blog Blogger
1) dans l'article où vous avez inséré l'image, utilisez l'onglet Modifier le code HTML (pas l'onglet Rédiger),
2) cherchez le code de votre image <img src="url de votre image" /> et complétez avec ce code : style="border: 0px none;".
Le code complet doit ressemble à celui-ci : <img src="http://www.igorlaszlo.com/ascreen.jpg" style="border: 0px none;"/>

Et au contraire, si vous voulez insérer une bordure chaque images séparément et non dans la partie CSS pour mettre la bordure à tous les images, vous pouvez utiliser le code HTML de: <img src="http://www.igorlaszlo.com/ascreen.jpg" style="border: 20px solid #CCCCCC;"/>

Pensez à remplacer l'url en rouge avec le votre !

Création et installation de votre propre icône

2011-04-11T18:36:00.006+02:00

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 :

2) Téléchargez le logiciel gratuit IcoFX qui va transformer l'image .png en une icone .ico.

3) Dans le menu Options, changez la langue de l'anglais par défaut pour le français (French).

4) Allez dans la fenêtre Explorer, cherchez le dossier dans lequel vous stockez votre image, sélectionnez le dossier, toutes les images du dossier s'affichent alors au-dessous de cette fenêtre, choisissez votre image et faites-la glisser à l'intérieur de la scène principale.
Une fenêtre de dialogue va s'ouvrir sous le nom Nouvelle image. Laissez cochées les rubriques True Color + Canal-alpha (32 bits) et 256x256. Cliquez sur OK.
On a ouvert un nouveau document et créé le format 256x256 px de l'icône.

5) Cliquez sur le bouton avec une étoile orange Insérer nouvelle image en haut de la fenêtre de l'image principale, la même fenêtre de dialogue va s'ouvrir qui propose une taille de 48x48 px cette fois-ci. Cliquez simplement sur OK.
Cliquez à nouveau sur le bouton Insérer nouvelle image et créez votre image de 32x32 px (cette fois-ci il faut cocher la rubrique 32x32), puis répétez l'étape pour mettre l'image à la taille à 24x24 puis 16x16 px.

6) Dans le menu Fichier, utilisez l'option Enregistrer sous, sous le nom et format favicon.ico dans le dossier de votre site.
Mettez l'icône en ligne dans la racine de votre espace web : http://www.votre-site.com/favicon.ico

7) Pour faire apparaître votre icône sur votre site, ouvrez la page HTML index (votre page d'accueil) avec un éditeur (Dreamweaver, Bloc-notes ou autre) et insérez le code suivant entre les balises <head></head> :

<link href='http://igorlaszlo-webdesign.blogspot.com/favicon.ico' rel='icon'type='image/vnd.microsoft.icon'/>

Remplacez la ligne en rouge par l'adresse de lien de votre icône évidemment !

Blogger utilise déjà sa propre icône qui s'affiche sur votre blog par défaut. Quand vous insérez le code ci-dessus, l'icône Blogger sera automatiquement remplacée par la votre.

Si vous n'avez pas le courage de faire la procédure tout seul, je peux vous aider :
20 €/assistance.

Installer une nouvelle police sur un Blogger blog

2011-04-10T18:59:00.003+02:00

Blogger propose plusieurs types de police mais il arrive que l'on aie envie de sortirn de ces lettres de base. Vous devez savoir que si vous utilisez votre propre police, telle qu'installées dans votre ordinateur, ça ne veut pas dire que c'est celle que les visiteurs de votre blog/site lverront. Votre police ne sera visible que par les internautes qui disposent de la même police dans leur ordinateur. Il y a très peu de chance, car les polices sont largement diversifiées.

Vous allez la possibilité de changer la police de votre Blogger blog de plusieurs façons. Personnellement, je préfère l'installation avec Google Fonts API. Vous pouvez visiter la page où figurent des instructions sur le blog de Blogger Plugins, et vous pouvez choisir parmi des polices sur Google.

Ma police préférée, c'est le Michroma !

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

Logiciel gratuit pour manipuler les images

2011-04-09T06:56:00.002+02:00

Si vous n'avez pas le moyen d'acheter Adobe Photoshop - pourtant indispensable pour préparer les images de votre site internet/blog (réduire la taille, améliorer la netteté, etc.), je peux vous conseiller le logiciel Artweaver. J'ai commencé avec ce logiciel qui m'a bien servi et qui possède un peu plus que simplement les outils de base.

Leur site web est en anglais et en allemand, mais si je me souviens bien, il existe un plugin de langue française pour le logiciel, il faut juste l'installer avec.

Si vous ne parlez pas l'anglais, ou ne connaissez rien de l'installation de logiciels, je peux vous aider :
20 €/assistance complète par téléphone

Pourquoi Flash ?

2011-04-03T15:23:00.018+02:00

Adobe Flash (anciennement Macromedia Flash), ou simplement Flash, se réfère à un logiciel multimédia utilisé pour créer une application/éléments d'un site (preloader, contact forme, galerie photos, etc.) ou un site web entier très dynamique, des publicités (bannières), des jeux et des vidéos. Ce logiciel permet la création de graphiques vectoriels et de bitmap animés par un langage script appelé ActionScript, et la diffusion de flux (stream) bi-directionnels audio et vidéo.

Je vous conseille de construire tout votre site web avec Flash dans le cas où il y aurait peu de contenu et il ne nécessiterait pas de mise à jour fréquente, car le changement de l'animation requière d'avoir le logiciel Adobe Flash (assez cher), une capacité de manipulation du logiciel et une connaissance du langage actionscript (as1, as2 ou as3). Si non, vous devez charger un webmaster de gérer votre site.

En même temps, Flash a besoin très peu d'espace sur votre serveur et le résultat des pages dynamiques est souvent très impressionnant.

Mes services – tout est optionnel ou peut être intégral :

* Design du site personnalisé à votre goût
* Création du logo
* Preloader
* Menu et pages dynamiques
* Installation d'une galerie photos / Traitement des images
* Installation d'une boutique en ligne
* Contact forme
* Initialisation de la statistique des visiteurs
* Création/installation de bannières, publicités dynamiques
* Gestion du site par semaine, par mois ou par trimestre, selon vos besoins
* Référencement du site

Démos - Je vous invite à visiter quelques pages que j'ai réalisées. (Merci de bien noter que le design ne correspond pas nécessairement à mon goût, mais à celui du client ! Il relève de votre choix.) :

* Mozaikart - site de mosaïques d'art
* Artmozaik - site d'une association d'artistes
* Site d'un photographe
* Myrafilms - site d'un vidéaste
* Mf-Deco - design intérieur
* Fabrica Teatro - une compagnie théâtrale
* Kapcsoloszerviz - site d'une entreprise d'électricité

Pour les autres options de la création d'un site web, veuillez cliquer sur le sujet Web-design.

N'hésitez pas me contacter, poser des questions et/ou demander un devis !

Pourquoi Blogger ?

2011-04-02T13:50:00.104+02:00

Blogger est une plate-forme logicielle en ligne qui facilite la publication d'un blogue, un service qui offre une multitude d'outils permettant à des personnes de publier du contenu sur le web. C'est un service gratuit et sans publicité. Depuis 2003, Blogger est la propriété de Google, donc vous devrez disposer un compte Google avec une adresse e-mail @gmail ou selon votre choix (hotmail, etc.).

Votre blog (voir "site web") sera hébergé sous le nom domaine www.blogspot.com (= www.blogger.com) et vous aurez un sous-domaine : http://votre-choix-nom.blogspot.com

Si vous possédez déjà un nom de domaine propre, vous avez une possibilité de redirection vers Blogger ! Si vous tenez à avoir votre propre nom de domaine, vous pouvez le réserver chez Blogger pour 10 USD/an. Les extensions peuvent être .com, .net, .org, .info et .biz.

Blogger et des autres sites offrent des templates tous prêts-à-employé mais 100% personnalisables.

La plate-forme est construite et spécialisée pour des sites type blog mais grâce à la possibilité de personnalisation, votre site peut être transformé et utilisé comme un site web "normal" avec l'avantage d'outils pré-installés. Par exemple, vous pouvez enlever l'option "commentaires" ou les différents widgets (gadgets) sous/à coté de votre page, mais les options restent toujours disponibles.
L'avantage aussi d'être hébergé chez une grande plate-forme comme Blogger, c'est que les moteurs de recherche (comme Google) trouvent plus facilement votre site, le référencement est plus facile.
Un autre avantage de Blogger c'est que vous n'êtes pas obligé de payer une espace web pour héberger vos images, vos photos sont automatiquement stockées dans un album Picasa (à partir de votre compte Google). Par contre, Picasa ne peut pas héberger des fichiers Flash, Javascripts, etc. (selon vos besoins). Donc je vous conseille de réserver une espace web dans tous les cas.

Mon service - tout est optionnel ou intégral :

* Design du modèle (template) à votre goût, 100% personnalisable

* Création du logo

* Installation de différents gadgets (visualisation des archives, des commentaires, des articles les plus populaires, statistique-compteur des visiteurs, diaporama, calendrier, liste de liens, etc.)

* Installation d'une galerie photos Flash ou autre type / Traitement des images

* Installation d'une boutique en ligne

* Initialisation de la statistique des visiteurs

* Création/installation de bannières, publicités, animations Flash dynamiques

* Gestion du site par semaine, par mois ou par trimestre, selon vos besoins

* Référencement du site - chez Blogger un énorme avantage c'est le référencement automatique par Google. Il reste quand même quelques coups de pouce à donner.

Je vous invite à visiter quelques pages que j'ai réalisées :

* Celui de mon site !

* http://grapixmultimedia.blogspot.com - site d'une agence multimédia
* http://squamarmor.blogspot.com - site d'une entreprise de design intérieur et de mode

* http://proetnicum.blogspot.com - photographie
* http://igorlaszlo.blogspot.com - photographie

* http://promadagascar.blogspot.com - tour opérateur

* http://hoppa-retikul.blogspot.com - blog pour femmes
* http://michellanson.blogspot.com - site d'un peintre
* http://kapcsolo.blogspot.com - site pour une entreprise électrique
* Demo 1

Modèles prêts-à-employer (bien entendu, eux aussi, je peux les personnaliser) :

style burotique, business, commercial
* Dione (http://grapixmultimedia.blogspot.com est à la base du template Dione)
* Indicator
* Neptune
* Nite Life
* Piano Black
* Pristilo
* Rustic Portrait
* SnowBlind

style photographie
* Gallery Blogger
* sGallery

style musique
* Music Lovers

style agence de voyage

* Marino

* Tropica

style écrivant, blog privé, journal
* Attempt desk
* Bubblegum Baby
* Desk Mess Mirrored
* Old Magazine
* On The Highway
* Stubborn
* Vive La France
* Worksheet

styles divers
* Argyles Drudge
* Black Rock
* BlackMagik
* Component
* Connexion
* Cracked
* Creative Art
* Defne (http://proetnicum.blogspot.com/ est à la base du template Defne)
* Design Pile
* Dirty
* Dold Paper
* Gamerpress
* Grey Mag
* Greyzed
* Japan Style
* Massive Attack
* Motion
* Notebook
* Notebook 2.0
* Old Black
* Papyrus
* Vector Art
* WaterColor
* Worn Wall

Pour les autres options de la création d'un site web, veuillez cliquer sur le sujet Web-design.

N'hésitez pas me contacter, poser des questions et/ou demander un devis !

A qui payer votre nom de domaine - Avertissement

2011-04-01T19:34:00.012+02:00

J'ai reçu la lettre d'une certaine compagnie - Domain Renewal Group - qui m'invitait à renouveler mon nom de domaine pour le prix de 28 euros. Logiquement, je me suis demandé pourquoi passer par la filiale anglaise d'une société américaine, puisque j'ai acheté mon nom de domaine chez 1&1 et n'ai aucun contrat avec des Américains ou des anglais. Par curiosité, j'ai comparé le prix avec celui de mon hébergeur, et ma colère s'est renforcée : je paye 8 euros et quelques pour le domaine chez 1&1, contre 28 euros pour Domain Renewal Group ! Après une rapide enquête, j'ai trouvé un forum qui abordait le sujet...

Lien vers le forum : cliquez ici !
Le message de 1&1 sur le forum du 14/04/2010, 10h48 :

Domain Renewal Group scam
Bonjour à tous,

Nous souhaitons également avertir que de nombreux propriétaires de Nom de Domaines (NDD) sont la cible d'un scam similaire.

Des emails de demande de renouvellement de NDD sont envoyés au nom de "Domain Renewal Group".
Ces emails sont dangereux, totalement illégaux et vicieux. Nous vous conseillons de les supprimer au plus vite.

Comme l'explique le NeoDomaine, ce type de société récupère les adresses email depuis les whois non-anonymes.

Vous retrouverez ici un spécimen (fichier JPG) d'email envoyé par Domain Renewal Group.

Bonne journée à tous et soyez vigilent.

Cordialement,
__________________
1&1 Internet
Serveurs alimentés en énergie verte (RECS quality standards).
http://www.1and1.fr/offre/herbgementweb

Si vous allez recevoir une lettre pareille, vous pouvez la jeter directement à la poubelle !

Hébergement du site internet et nom de domaine

2011-04-01T14:47:00.039+02:00

Pour le moment je laisse mon article ci-dessous mais merci de bien ignorer : je déconseille fortement cet hébergeur (1&1) ! Quand vous êtes hébergé chez cette société, vous allez avoir leur newslettres et publicités sans arrêt, même si vous allez leur demander à suspendre les envoies. La négociation avec eux ne sers à rien, semble-t-il !

---------------------------------------------------------------------------------------------------------

A la base, le premier pas à faire avant de se présenter sur le net, c'est d'acquérir un nom de domaine. Si vous avez une idée, vous pouvez en vérifier la disponibilité ci-dessous.

Testeur interactif de disponibilité de nom de domaine

Pour héberger le contenant de votre site internet, vous avez besoin d'une espace sur le net. Moi, personnellement je suis hébergé chez 1&1, qui offre une solution pas chère, avec un service bien développé.

1 et 1 (ou 1&1, ou 1and1) vend plus d'1 million de produits d’hébergement chaque année et ils hébergent plus de 5 millions de sites web. Ils proposent des produits abordables en termes de prix, répondant aux besoins de chaque budget et adaptés à tous les niveaux de compétences.

Le service inclue :
- hébergement / tableau de bord,- boîte de messagerie,
- outils informatiques (album photo, blog, chat, boutique, formulaires, etc.),
- assistance de base de données MySQL, PHP dernière version,
- statistique,
- une assistance technique,
- et encore plus.

Si vous souhaitez visiter le site de 1&1, ou si vous décidez d'y acheter un espace web, merci de le faire en cliquant sur la bannière ci-dessous : j'ai une affiliation avec le site. Mon id d'affiliation : 193840. Merci de votre aide !

Si vous n'avez pas le moyen du tout de payer un tel service, il y a une autre solution pour héberger votre site gratuitement et sans publicité : 000webhost.

La seule difficulté, c'est que vous devez avoir un trafic régulier sur votre site (passage de visiteurs et surtout nouveaux éléments ou articles mis en ligne), sinon, l'hébergeur risque de fermer votre compte.

000webhost.com vous assure un sous-domaine, mais le nom variera selon un système d'attribution automatique, vous ne pouvez pas connaître le nom attribué à l'avance.
En résumé, je vous conseille d'utiliser une espace web payant.