Our Blogger Templates ABC: BLOG & BLOGGER: Créer un menu déroulant Selon vos possibilités, votre niveau , vous pouvez réaliser de vrais menus plus ou moins sophistiqués. Toutefois il faudra obligatoirement travailler en mode HTML et modifier en partie le code des menus. Si cela vous semble trop complexe, vous pouvez, via les liens et les libellés, établir des menus plus simples (voir notre article) Plan1-Rappel des bases: notion de lien2-Un Menu classique avec divers niveaux possibles (sous menu)-Menu avec 2 niveaux de sous Menu-Menu avec un seul niveau de sous Menu (conseillé pour débuter !)3-Explications pour comprendre les items du menu4-Explications pour adapter et personnaliser les items/liens du menu5-Explications pour adapter et personnaliser l'aspect du menu (couleurs)5-D'autres types de Menu (6-Un autre beau Menu classique mais... qui fonctionne mal avec le HTTPS.) 1-Les bases : notion de lien Lors de l'édition d'un article ou d'une page, il est aisé de faire un lien à l 'aide du Menu "Associer" En mode HTML, voici le code : devient 5-3 en anglais
w.bloggar Menu déroulant en CSS Si vous voulez avoir tout de suite un aperçu du type de menu décrit dans cette page, vous pouvez visiter notre page de démonstration. Et pour garder le script proposé au chaud sur votre PC, vous pouvez aussi le télécharger. Avec ou sans javascript ? Lorsqu'on peut se passer de javascript, il est prudent de le faire. Les principes utilisés pour créer les menus hiérarchiques sont malheureusement incompatibles avec Internet Explorer versions 6 et antérieures. Notre choix a consisté à mettre au point un menu à 2 vitesses qui fonctionne : Sans javascript pour Firefox, Opera, Mozilla et IE7Avec javascript pour IE 5.5 et 6 Ce choix permet à notre menu de rester pleinement opérationnel pour la quasi-totalité des visiteurs. Une partie de cache-cache En réfléchissant au principe de base d'un menu déroulant, vous constaterez qu'il s'agit essentiellement d'une partie de cache-cache : certaines parties en sont masquées et n'apparaissent que lorsque l'utilisateur survole le menu principal. La ligne :
Tutoriaux pour blogger listes Le but de cette page est d'expliquer comment réaliser un menu déroulant conçu avec les langages HTML et CSS. Le modèle de menu déroulant proposé doit fonctionner sur les navigateurs modernes (Internet explorer 6 est donc exclu). La programmation se veut le plus simple possible. Le choix effectué pour cette page est de limiter la liste déroulante à un seul niveau. Merci beaucoup au site "CSS facile" qui m'a aidée à concevoir cette liste déroulante, tout particulièrement grâce à cette page L'application directe de ce mode opératoire est à visionner sur cette page : Effectuer une copie des lignes de code encadrées de rouge ci-dessous. Créer un nouveau document html5 dans BlueGriffon. Dans le Code Source de Bluegriffon, effacer le code existant. Coller. Vous devriez obtenir la liste déroulante proposée ci-dessus. DECRYPTAGE du code utilisé pour obtenir la liste déroulante proposée ci-dessus 2. Rappel 1 :
Blogger Backup - Home Un menu déroulant en CSS3 Developpez.com tiens à vous informer que le support du CSS par les navigateurs a évolué. Par conséquent, certaines propriétés proposées dans les codes ont aujourd'hui été adoptées ou rejetées. Nous vous invitons à vous renseigner à ce sujet, par exemple sur ce site : CSS3 Browser Support Voyons d'abord comment se présente ce menu. Si vous êtes pressé, vous pouvez déjà voir un exemple en ligne. Comme vous pouvez le constater ci-dessous, la structure HTML ne contient rien de plus que ce qui est nécessaire, elle est minimale et facile à comprendre. <ul id="menu"><li><a href="#">Home</a></li><li><a href="#">Categories</a><ul><li><a href="#">CSS</a></li><li><a href="#">Graphic design</a></li><li><a href="#">Development tools</a></li><li><a href="#">Web design</a></li></ul></li><li><a href="#">Work</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul> Une dernière chose, mais néanmoins importante, le code HTML est sémantiquement correct. Voir un exemple en ligne.
Free Blogger Templates & Premium WordPress Themes CSS Debutant : Boite à outils CSS Aller aux menus #CSS {débutant;} Vous êtes ici > CSS Débutant | Boite à Outils Boite à Outils CSS Générateur de CSS Formulaire permettant d'obtenir le code d'une feuille de style. Outils de développement NotePad++ : éditeur html en code source gratuit ;BlueGriffon : éditeur html et CSS wysiwyg réalisé par Daniel Glazman (co-chairman CSS au W3C et papa du feu Nvu) ;KompoZer : éditeur html wysiwyg successeur de Nvu ;TopStyle : éditeur de CSS. Outils de développement pour Firefox Très pratique pour pourvoir tester, visualiser et modifier des codes (x)html et CSS au sein même du navigateur. Transformations d'unités de tailles L'EM-calculator : application en ligne très pratique pour calculer l'équivalence des pixels en em. Choisir ses couleurs Générateurs Liste de Discussion Si vous désirez faire partager ou approfondir vos connaissances sur les feuilles de style et le (x)html, vous pouvez rejoindre notre liste de discussion. Liens Utiles Haut Contact : pascale at mammouthland.net Premiers pas en CSS
50 More Beautiful Blogger Templates Are you tired of looking at the default 16 templates that Blogger provides? We decided to search for some of the different-looking Blogger templates and found dozens of pretty creations, many inspired by themes from Wordpress and other blog hosts. Below is a list of some select 2,3 and 4 column Blogger templates and themes sourced from across the blogosphere. Enjoy. See also our previous post, BLOGGER.COM TOOLBOX: 30+ Templates & Tools for Blogger 2-column templates Andreas02 - Lots of tab links above the header. Andreas08 - From the same author of the one above. Agua - A minimalistic clean template giving a pure white look. Cajas - A blog tittle in a header that looks like the Blogger navbar and five menu links with multi-color backgrounds that tool the place of the traditional blog header. Colibri - This reminds you of a garden, doesn't it? Dead - This one can be described as heavy metal/rock style - sinister and dark. Eclipse - Another dark theme that brings werewolves to mind.