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 .
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/AVvXsEi1U29c7C2I7owprNF47in-h4FnEa19b46sEMmU4iwzTpHJ5jacERJTMdmSrUQdVzJAj39AMSqeAMLsvr8pfzX7b9K9gihRMIlG0O5KkZnm0JKPgw28aw8_McnTE-25-E9H5iB_qYlbfPI7/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/AVvXsEi1U29c7C2I7owprNF47in-h4FnEa19b46sEMmU4iwzTpHJ5jacERJTMdmSrUQdVzJAj39AMSqeAMLsvr8pfzX7b9K9gihRMIlG0O5KkZnm0JKPgw28aw8_McnTE-25-E9H5iB_qYlbfPI7/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>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 '.
<ul id="appleNav">
<li><a href="http://TONBLOG.blogspot.com/" title="Apple"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNBZg-mk-2ZCs8d0upD2ZGYt3s5gMhPBljEfWRWBMYQzFRaF0Iz7R_udsjWCnCJFU8TSPsc8Ht5XzwEZs1zK4acXw3-p1vSBLfq9AsBbXEENtSF4IOLmUgw20SuUiW-cgtOC_pK4BMW5yE/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>
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.
