Les Ficelles d'Anna K. - Aide et astuces pour créer et personnaliser un blog
| Accueil | Publication | Flux RSS | Accès Mobile | Newsletter | Recommander | Contact |
|
|
Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
publié dans : Liens, listes, menus, curseurs - Tous blogs
13styles proposent des menus à réaliser en HTML et CSS, tel que celui-ci
Première étape :
Vous cliquez sur le menu désiré puis sur download the zip file
Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers.
Vous avez maintenant sur votre PC :
Deuxième étape :
Dans l'administration de votre blog - Documents - Mes images :
En HTML de l'endroit où vous voulez ce menu :
En rajoutant ce qui est en rouge
En personnisant les adresses des images en violet : vous les avez noté lors la deuxième étape.
Si votre blog est sur OverBlog, vous effacez ce qui est en rouge
En bleu, vous remplacez par les URL de destination
En vert, vous personnalisez avec ce qui apparaîtra au survol de la souris
En orange, vous remplacez par la dénomination de vos liens
Première étape :
Vous cliquez sur le menu désiré puis sur download the zip file
Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers.
Vous avez maintenant sur votre PC :
- un dossier comportant des images
- un fichier style.css
- un fichier index.html
Deuxième étape :
Dans l'administration de votre blog - Documents - Mes images :
- vous créez un répertoire ayant le nom de votre menu
- vous y enregistrez les images
- vous notez leur adresse
En HTML de l'endroit où vous voulez ce menu :
- vous collez le contenu du fichier style.css
<style type="text/css">
/* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%
font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;
background:#fff url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_bg.gif) repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent
url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893
url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_right-ON.gif) no-repeat top
right;height:33px;}
/* ---------------------- END Dolphin nav ---------------------- */
</style>
/* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%
font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;
background:#fff url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_bg.gif) repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent
url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893
url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_right-ON.gif) no-repeat top
right;height:33px;}
/* ---------------------- END Dolphin nav ---------------------- */
</style>
En rajoutant ce qui est en rouge
En personnisant les adresses des images en violet : vous les avez noté lors la deuxième étape.
- vous collez ensuite le contenu du fichier index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php //PHP ADODB document - made with PHAkt 3.6.0?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>13styles.com Dolphin Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Home</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus" class="current"><span>About Us</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Services</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Our Work</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Contact Us</span></a></li>
</ul>
</div>
</div>
</body>
</html>
<?php //PHP ADODB document - made with PHAkt 3.6.0?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>13styles.com Dolphin Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Home</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus" class="current"><span>About Us</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Services</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Our Work</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Contact Us</span></a></li>
</ul>
</div>
</div>
</body>
</html>
Si votre blog est sur OverBlog, vous effacez ce qui est en rouge
En bleu, vous remplacez par les URL de destination
En vert, vous personnalisez avec ce qui apparaîtra au survol de la souris
En orange, vous remplacez par la dénomination de vos liens
Publicité
Présentation
: Les ficelles d Anna K.
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
Recherche Rapide Sur le Site
Sommaires
Déco d'Hiver
Déco de Noël
Dernières Astuces
-
Design 35 - mauve - Fée - largeur fixe
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel...
-
Créer un couverture de magazine avec votre photo
Toujours dans le but de décorer son blog, un générateur de couvertures de magazine avec votre...
-
De la musique libre de droit sur Jamendo
Sur Jamendo, les artistes autorisent le partage de leur musique. C'est libre, légal et illimité....
-
Créer des encadrements sur les photos - FancyGens
Vous allez sur FANCYGENS Vous cliquez sur Browse pour chercher la photo sur votre PC, puis...
-
Un widget pour afficher vos fichiers pdf sur votre blog - Privilège
Allez sur PDFMENOT Vous avez la possibilité : soit de saisir l'adresse de votre...
-
Encadrer l'article des CGU
Il faut aller dans le CSS...
-
Placer la date devant le titre
Ainsi : On commence par la date. Vous allez dans le CSS et vous complétez la...
-
Design 34 - rouge et jaune - Lisa Simpson - largeur fixe
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel...
-
Créer un menu avec changement de fond au survol de la souris - Privilège
Allez sur GRSITES PREMIERE ETAPE : Créer votre menu Dénominations et URL des...
-
Afficher la liste des articles les plus lus du blog - Privilège
Le site est un peu long, mais le widget semble très sympa Allez sur Affiliatebrand....
Publicité
Coin Rencontre
Espace Connexion Internet
Achetez sur le Net!
| Articles les plus populaires | L'Univers des Ficelles |
|
|
Commentaires