Blog

PRUEBAS INICIALES

Entrada destacada

PÁGINA DE BIENVENIDA

PÁGINA DE BIENVENIDA

MENÚ SENCILLO PARA BLOGGER

by - julio 31, 2019

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/AVvXsEg0B4NF4NMrHbbZVI_Dg7GZqDxrWr8Sr28O-lMXkhgYbyQZwFcDw4nnHStljzNC1M7nJh_061OQ6oIT-p95WseX2TKtqIwoPXs798SrT5XYZZsbUt1E_rFzYZBCHjCFtVNaJwR8qFZCBDXi/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/AVvXsEi_eicdv81FLkpHcX6D511g2yldf9kkXV9zAL4QhXrL3cOUp_W2TQo49_63y_wkZUt9Ur8fbgSFrTYoe5GLFAk9NA_GCiMVaGsApfvUI87shEU25udIMGxzux16wj_mn0zsJPo6MyQR6kZW/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: 

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>



Despues de haber insertado el código, un clic en  "Guardar"






Fecha de la Publicación;30-07-2019

 Fuente; redeando

 Publicado por;                                                                            





You May Also Like

0 Comments

Paginacion