Vous souhaitez mettre en place un menu design horizontal ou vertical sur votre site ou blog est cela en moins de 10 minutes ? Pour ça rendez-vous sur CSS Menu Maker un Générateur de menu 100% en CSS et 100% valide 3WC.
La création de menu c’est fait en 3 étapes :
- Tout d’abord, Choisir un modèle parmi la liste de style disponible sur le site (pour l’instant assez réduite).
- L’adaptez avec vos propres étiquettes et liens.
- En suite vous télécharger le code XHTML et CSS qui est inclue dans le fichier ZIP (avec un exemple qui vous explique comment ajouter le menu à votre page).
Pour finir, si vous maîtrisez la création de menu CSS, CSS Menu Maker lance une concours avec un iPhone comme trophée.
En a déjà vu comment créer un effet glace sur une image en utilisant un Js et aussi comme personnaliser c’est bouton radio et Checkboxes, Cette fois si nous allons voir comment créer et personnaliser la pagination de votre site ou blog en Xhtml/CSS .
Premier partie :
Téléchargez et placez le fichier pagination.css dans votre répertoire racine par exemple, ensuite ajoutez la balise qui va faire appel à ce style CSS entre <head> et </head> :
<link href="pagination.css" rel="stylesheet" type="text/css" media="screen" />
Faites attention au paramètre “src” qui indique l’emplacement du script.
Contenu du fichier CSS pagination.css
/*CSS style pagination*/
div.pagination {
padding: 3px;
margin: 3px;
text-align:center;
}
div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #AAAADD;
text-decoration: none; /* no underline */
color: #000099;
}
div.pagination a:hover, div.digg a:active {
border: 1px solid #000099;
color: #000;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;
font-weight: bold;
background-color: #000099;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;
color: #DDD;
}
Deuxième partie :
Ajoutez la class à la balise qui va servir de conteneur (div) pour afficher l’effet
<div class="pagination">
<span class="disabled">◄</span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>
...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2">►</a>
</div>
Le résultat final :
Voici 15 style possible pour votre pagination, il ne vous reste qu’a télécharger le fichier CSS du style que vous souhaite avoir et l’intègre comme je l’ai exemple dans le tutoria.
» lire la suite de l’article
author : MedBlog | 20 septembre 2007
DoTemplate a comme idée principale de proposer dans un premier temps des templates de base. L’étape suivante, après sélection du model choisi, est de customizer votre choix à l’aide une menu flottant ! Pour, à la fin, pouvoir le télécharger le fichier Zip gratuitement.
Voici un screenshot de ce que donne la page de customisation, avec le menu flottant à droite pour la modification de chaque partie.
Une fois le fichier ZIP télécharger il ne vous reste plus qu’à l’intégrer dans votre blog ou site . Dans le ZIP, vous trouverez le fichier CSS, les images ainsi qu’un fichier index.html (la premier page d’un site Web) qu’il vous faudra retravaillé pour l’intégration dans votre plate forme de blog. bien sûre pour cette étape il vous faudra un minimum de connaissance technique.
Pour mon 1 article j’ai choisi de vous parler de la création d’un théme et de l’instalation des plugin wordpress .
Avant l’ouverture de mon blog j’ai du passé de nombreuse nuits blanche à la création du théme et son implementation pour sela il m’a falu en premier lieu savoir comment le moteur wordpress fonctionne, et comment intégrer mon design.
bien sûre vous trouverez toute la documentation necessaire sur le web et de surcroit la communauté wordpress et assez numbreuse et active, mais pour ne pas trop coder et surtout pour ne pas finir avec des lunette, je vous conseille de faire un tour sur ces 2 sites qui vont vous permettre de générer et tester votre théme tres facilement
» lire la suite de l’article
