Créer un menu élégant semblable à celui d'Apple

C'est mon premier tutoriel sur l'ajout d'un menu sur blogger, après une longue absence de mon blog... Mais je reviens en force ces jours-ci pour vous proposer plusieurs autres tutos et astuces :-)

Donc, comme je l'ai precisé dans le titre, il s'agit d'un menu similaire à celui des sites d'Apple, et d'où j'ai tiré le CSS. Suivez donc ces 2 étapes pour l'ajouter à votre blog ou remplacer le vôtre .

Démonstration du menu

Etape 1: Appliquer le CSS.

Connectez vous à votre blog, puis vers Modèle > Modifier le code HTML.

Cliquez sur le bouton F3 de votre clavier, et tapez ' ]]></b:skin> ' .

Juste avant ce code, collez le code ci dessous:

/* Debut CSS du menu */
#appleNav { margin:40px 0; list-style:none;font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;       text-shadow: 0 -1px 3px #202020;    width:980px; height:34px;    -moz-border-radius:4px;    -webkit-border-radius:4px;    border-radius:4px;    -moz-box-shadow: 0px 3px 3px #cecece;    -webkit-box-shadow: 0px 3px 3px #cecece;    box-shadow: 0 3px 4px #8b8b8b;}
#appleNav li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);    background-color:#5f5f5f; /* Fallback */}#appleNav li:not(:last-child):hover {    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );    background-color:#383838; /* Fallback */    -moz-box-shadow: inset 0 0 5px 5px #535353;    -webkit-box-shadow: inset 0 0 5px 5px #535353;    box-shadow: inset 0 0 5px 5px #535353;}#appleNav li:not(:last-child):active {    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );    background-color:#383838; /* Fallback */        -moz-box-shadow: inset 0 1px 2px 2px #000;    -webkit-box-shadow: inset 0 1px 2px 2px #000;    box-shadow: inset 0 1px 2px 2px #000;}#appleNav li a { color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }
#appleNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;
    -moz-border-radius:10px;    -webkit-border-radius:10px;    border-radius:10px;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxhfPhXyHanN0AhJYcSwAt1MFz_ezxsi2wO0nZNG_4qAZIJgIDGUE84N0wK2fYy4AYxghgDBeoRkqnc33HB2hxNezkpa4i3K1YLFiWZvb-w6SEilvVRW25d1KqAceeS8J5ujaYJnFu0LPz/s1600/btrix_magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxhfPhXyHanN0AhJYcSwAt1MFz_ezxsi2wO0nZNG_4qAZIJgIDGUE84N0wK2fYy4AYxghgDBeoRkqnc33HB2hxNezkpa4i3K1YLFiWZvb-w6SEilvVRW25d1KqAceeS8J5ujaYJnFu0LPz/s1600/btrix_magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);    background-repeat: no-repeat;    background-color:#6E6E6E; /* Fallback */    -moz-box-shadow: inset 0 2px 1px 1px #363636;    -webkit-box-shadow: inset 0 2px 1px 1px #363636;    box-shadow: inset 0 2px 1px 1px #363636;}#appleNav li:first-child {    -moz-border-radius:4px 0 0 4px;    -webkit-border-radius:4px 0 0 4px;    border-radius:4px 0 0 4px;        border-left:none;}#appleNav li:first-child a img {   vertical-align:middle; margin-top:-2px;}#appleNav li:last-child {    -moz-border-radius:0 4px 4px 0;    -webkit-border-radius:0 4px 4px 0;    border-radius:0 4px 4px 0;    border-right:none;    width:124px;}/* Fade in animation (Webkit only) */@-webkit-keyframes showMenu {    from { opacity: 0; top:-20px; }    to   { opacity: 1; }}#appleNav {     -webkit-animation: showMenu 1s; position:relative;}​

Sauvegardez votre template en cliquant sur ' enregistrer le modèle '

Etape 2: Ajouter le menu.

Copiez le code ci-dessous dans votre fichier word, ou bloc note, en prenant soin de modifier les # par le lien de votre menu, et le code en bleu par le texte qui va apparaître dans votre menu.

<nav>
<ul id="appleNav">
   <li><a href="http://TONBLOG.blogspot.com/" title="Apple"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV2Z1NrC1XlxZlMaIYsvIBCg5tS8Xwz21qHv1mBdfSa5xY0Pc1w3Qk4V8dUxSanOfGBmcSrWDCVPZN7MI4BR2ZLFYxZUEkqOwpoYUpdvp1SaoZfREHDceYJKhc3Qqj631TIymW_PryHeZi/s1600/btrix_logo.png" alt="Apple Logo" /></a></li>
   <li><a href="#">Store</a></li>
   <li><a href="#" >Mac</a></li>
   <li><a href="#" >iPod</a></li>
   <li><a href="#" >iPhone</a></li>
   <li><a href="#" >iPad</a></li>
   <li><a href="#" >iTunes</a></li>
   <li><a href="#" >Support</a></li>
   <li>
        <form action='/search' method='get'>
        <input id='search' name='q' type='text' value='Search'/>
       </form>
   </li>
</ul>
</nav>​

PS: Vous pouvez changer l'image du logo d'apple, en rouge dans le code, par une icône ' home ', en remplacant le code en rouge par: ' http://i.imgur.com/rgESKE6.png '.
Remplacez le code en vert, par l'URL de votre blog.

Une fois le code est rempli par vos propres liens et titres, dirigez-vous vers la mise en page de votre blog, puis ajoutez un gadget ' HTML / JAVASCRIPT ', de préférence dans la section en haut des widgets, et mettez y ce code. (Voire photo ci-dessous. Cliquez dessus pour l'agrandir).

C'est bon :-)

Si vous avez un souci lors de l'ajout de ce menu, n'hésitez pas à laisser un commentaire ci-dessous.