Archive Pages Design$type=blogging

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

Sur le même sujet:


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("http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/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("http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/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="http://2.bp.blogspot.com/-ZMpJmyf5SNs/UOPAiNI2EdI/AAAAAAAAASU/h2MpEi9JbZI/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.


COMMENTAIRES

BLOGGER : 2
Loading...
Nom

astuces Facebook feature gadget Google Menu news Pages Réseaux Sociaux slider automatique templates Traduction trafic tutoriel
false
ltr
item
Blogger Pour Les Nuls: Créer un menu élégant semblable à celui d'Apple
Créer un menu élégant semblable à celui d'Apple
http://3.bp.blogspot.com/-4tNzPJN9bO4/UQm8kBtco2I/AAAAAAAACP8/UVI7_8wjFTY/s200/menu.png
http://3.bp.blogspot.com/-4tNzPJN9bO4/UQm8kBtco2I/AAAAAAAACP8/UVI7_8wjFTY/s72-c/menu.png
Blogger Pour Les Nuls
http://blogger-pourlesnuls.blogspot.com/2013/01/creer-un-menu-elegant-semblable-celui.html
http://blogger-pourlesnuls.blogspot.com/
http://blogger-pourlesnuls.blogspot.com/
http://blogger-pourlesnuls.blogspot.com/2013/01/creer-un-menu-elegant-semblable-celui.html
true
7261274087058654712
UTF-8
Aucun article trouvé VOIR TOUS Lire la suite Répondre Annuler la réponse Supprimer Par Accueil PAGES ARTICLES Voir tous RECOMMANDE POUR VOUS LIBELLE ARCHIVE SEARCH Aucun article ne répond aux critère de votre requête Back Home Dimanche Lundi Mardi Mercredi Jeudi Vendredi Samedi Dim Lun Mar Mer Jeu Ven Sam Janvier Février Mars Avril Mai Juin Juillet Août Septembre Octobre Novembre Décembre Jan Fév Mar Avr Mai Jun Jul Août Sep Oct Nov Déc maintenant il y a une minute Il y a $$1$$ minutes il y a une heure Il y a $$1$$ heures Hier Il y a $$1$$ jours Il y a $$1$$ semaines il y a plus que 5 semaines