Les contenus des pseudos classes :before et :after


La base

On peut donner des éléments à coté gauche et droite (ou avant et après) d'un autre élément, par exemple une espace vide (blank) avant le texte, une flèche après le texte ou des guillemets avant et après du texte, mais aussi une symbole de copyright ou une symbole monétaire après un champs de formulaire, etc. Il faut déclarer les sélecteurs en attachant les pseudos éléments/classes :before (ça veut dire "avant") et :after (ça veut dire "après") comme p:before , div:after, etc., et avec la propriété content et sa valeur qui doit être mise entre des guillemets (content : "").

Lire la suite

Template pour Blogger avec grille, date perso, responsive et plus

J'ai construit un modèle pour des sites types Blogger, idéal pour les journaux, des sites d'information mais peut être pour autre. J'ai intégré plusieurs éléments qui sont très recherchés sur le net : grille (grid) avec les hauteurs égales, chaque article avec une date personnalisable (et en format français), avec un bouton "haute de page", avec des pages numérotées, avec ou sans une troisième colonne et tout est adapté aux portables (smartphones, tablettes : responsive design).

Lire la suite

Types de pages Blogger

Pour afficher/placer un élément sur une page spécifique (on veut montrer le widget Archives par exemple seulement sur la page d'accueil), il faut comprendre la structure et connaitre les types de pages Blogger, puis on peut mettre l'élément à la place spécifique avec l'aide de "if condition".

Lire la suite

Date pour tous les articles de Blogger et sa personnalisation

Avez vous un problème avec la date des articles dans un blog Blogger ? Voulez vous une date qui s'affiche en haut de tous les articles mais en format français ?

Le problème avec le système Blogger c'est qu'on ne peut pas avoir beaucoup de choix : ou on choisie le format des en-têtes de date (<data:post.dateHeader/> mais qui n'apparait que dans le premier article de la journée, ou on choisie le format de date et d'heure (<data:post.timestamp/>) mais le menu offre seulement une date à l'américaine (m/jj/aaaa ou nom de jour, mois jour, an).

Ici, je vous propose une date à la française et pour tous les articles, même pour ceux qui sont écrits au même jour. On le fait avec une modification du code xml et à l'aide d'un script, puis on peut changer son style à un type calendrier ou en rond par exemple.

Lire la suite

Codage UTF-8 et caractères spéciaux (français) dans HTML

utf-8-caracteres-speciaux-htmlJ'ai cherché désespérément une solution à mon problème de codage, sans résultat pendant quelques années. Les caractères spéciaux comme le "é", "à", "ç", "î", etc. s'affichaient un � au coté HTML, surtout quand la page HTML a été générée par PHP (WordPress).

En essayant valider ma page avec W3C, il dit :

Lire la suite

Widget Commentaires Récents pour Blogger

widget-commentaires-recents-pour-blogger
Nous pouvons facilement installer un widget de Blogger pour les commentaires récents publiés dans les articles. Le widget affiche le nom de l'auteur, un extrait du commentaire et un avatar arrondi de l'utilisateur. En plus, on peut donner un avatar personnalisé pour les commentateurs anonymes. Vous pouvez voir l'exemple sur le blog Politi-kaka en bas de la barre latérale droite.

Lire la suite

Animer avec jQuery - types easing et effets

Avec jQuery, on peut animer un site HTML similairement au Flash et le rendre très dynamique. Même si vous ne connaissez pas javascript comme un expert, avec l'aide de jQuery et quelques recherches sur le net, vous pouvez intégrer des scripts d'animation facilement.

Dans notre exemple on va faire défiler un objet sur la scène à l'ouverture du site, puis on rajoute un bouton avec lequel on peut animer des objets et à la fin on va faire tout disparaitre de la scène. L'exemple vient du site Zen It.

Lire la suite