Afficher une carte Open Street Map (OSM) avec un marqueur géolocalisé sur votre site vous permettra de personnaliser votre page de contact. Très largement inspiré du blog Communication & Transformation Numériques des Territoires, voici la marche à suivre pour l’intégrer dans votre blog statique Hugo. J’ai déjà expliqué la démarche pour un affichage de Google Maps, comment afficher …

lire la suite

Les vidéos trop lourdes ne peuvent pas être publiées sur un site. Mon ami Michel fontaine me fait parvenir une vidéo à publier sur son site, elle pèse 403,5 Mo pour 3mn28 de lecture ; aucune chance pour que la lecture soit fluide. Il va falloir convertir ce fichier pour l’allèger. C’est là que VLC intervient. Tout d’abord, récupérons les informations sur cette vidéo. Informations …

lire la suite

Voici quelques balises HTML5 inline (pour la mise en forme du texte). Elles sont peu utilisées mais tout de même utiles. ‹kbd› Affiche un texte de type machine à écrire. Peut être utile (avec un petit Css) pour l’affichage des touches du clavier. ex. Les touches Ctrl + f permettent de chercher un mot dans une page Web. Le code CSS qui va bien : kbd { display: inline-block; …

lire la suite

Comment utiliser un moteur de recherche Google pour votre site ? Celui-ci recherchera uniquement vos articles en ouvrant dans un autre onglet les résultats de sa recherche. Comment procéder ? Dans le fichier header.html, qui se trouve dans le répertoire layouts/partials de votre thème, il faut placer (pour que la barre de recherche soit toujours visible) le code HTML suivant : <form …

lire la suite

La fonction hover permet de modifier un élément (un lien, une image) lors du survol de la souris. En utilisant le CSS voici quelques exemples d’effets à réaliser simplement. Un zoom sur image Le html <a class="zoom"><img src="url_de_l_image" /></a> Le css a.zoom{ display: inline-block; overflow: hidden; position: relative; text-decoration: none; } …

lire la suite