Ultimas entradas

MENÚ SENCILLO PARA BLOGGER

By Blogs Famag - domingo, agosto 18, 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 implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:



 Un clic en “Plantilla”



  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,



 Busca el siguiente código


]]></b:skin>

 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/AVvXsEgYSIY-kwZ4iDqVvQyq5mFykUnXt31HEEIkRd-DfZwTnMlUBFH8u_WW7ZzHw5kcqJK-E4JT2AYWjeAWKsVBr-GLK-Yc4_jxiC9bC699NBh9TpmfLjd-JbJFUTLaO84IvhGkX2n-umwAQdO7/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/AVvXsEhbgoZdMlHWc2aloLC9KDr7IJlz_OYYqWhmbTK110bbQgvcUZJZHrqHkeEbHJrb4sSU3ZwO7ymGIrgZzaNWtFaM5Pkl0j5xL0iPnjwdaG0l6Ozgli-w2FcWU4y7PuD1r684rPPckCQdoI_f/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:

Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:



 Un clic en “Diseño”



 Clic en “Añadir un gadget”



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



 Coloca el siguiente código 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>




Después de haber insertado el código, un clic en  "Guardar"





Data de la Publicación;18-08-2019

 Fuente; redeando

 Publicado por;                                                                     





  • Share:

You Might Also Like

0 comentarios