MENÚ SENCILLO PARA BLOGGER

MENÚ SENCILLO PARA BLOGGER.

Este menu gris efecto 'tab' es simple, pero a la vez efectivo y elegante. Si quieres ponerlo en tu sitio, coloca este codigo en la parte CSS de tu web. En Blogger, seria en la plantilla HTML antes de ]]></b:skin

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:



1 Un clic en “Plantilla”
                                                                       

   2 Un clic en “Editar HTML”
                                                                   

  Ahora se te abrirá el Editor HTML de tu plantilla
                                                                               

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

3 Busca el siguiente código
                                                                                   

]]></b:skin>



4 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

#menu {padding:0; margin:0; list-style:none;}<br /> #menu li {float:left; margin-left:1px; padding-top:2px;}<br /> #menu li a {display:block; height:38px; line-height:38px; padding:0 20px 0 0; float:left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyphenhyphenchYJyi2MgKgpHEZCI9U0074d4bmyEOoxUwugP2yb3ikD8QD5GuG3sFX6d23kOEAgteb2CoX-vYGLqrYC7J2Cq9Gee-3P4R8Yx-KDKjLJkkdooMPy1PlHhumxpyca-ec_bSCUd2BGLGZ/s1600/tab_a.gif) no-repeat right top; color:#000; text-decoration:none;}<br /> #menu li a b {display:block; height:38px; float:left; padding:0 0 0 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2ioHge8g2L_nCYLJA9WDLBgy1eoWvUFDufp6GV6OIMOhN0E9kleN9OiKD_9iM-kubh-7J9dHUkuH9eggKSvkWD_UXM2bav89ZyXtO5Y614f20GbTe4mFoubgubsijbNTv2wE2MuLoH8T/s1600/tab_b.gif) left top; cursor:pointer;}<br /> #menu li a:hover, <br /> .home #menu li#home a,<br /> .single #menu li#single a,<br /> .dropdown #menu li#dropdown a,<br /> .dropline #menu li#dropline a,<br /> .flyout #menu li#flyout a,<br /> .support #menu li#support a,<br /> .contact #menu li#contact a<br /> {background-position:right -51px; margin-top:-2px; height:40px;}<br /> #menu li a:hover b,<br /> .home #menu li#home a b,<br /> .single #menu li#single a b,<br /> .dropdown #menu li#dropdown a b,<br /> .dropline #menu li#dropline a b,<br /> .flyout #menu li#flyout a b,<br /> .support #menu li#support a b,<br /> .contact #menu li#contact a b<br /> {background-position:left -51px; height:40px;}

Y ahora editamos un gadget HTML, lo ponemos donde queramos ubicarlo y en su interior añadimos:

Ir a Blogger

1-Un clic en “Diseño”
                                                                       

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo
                                                           
                                                                 

4-Coloca el siguiente codigo en el interior

<div id="menuContainer"><ul id="menu"><li class="first" id="Home">
<a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="single"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="dropdown"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="dropline"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="flyout"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
</ul></div>

Solo tenéis que cambiar las "URL"por la dirección que deseáis que se abra cuando cliquen el Enlace.

Fecha de la Publicación; 22-07-2019 Fuente; redeando
Publicado por;