Ultimas entradas

blogger

MENÚ VERTICAL DESPLEGABLE AZUL PARA BLOGGER

By Blogs Famag - domingo, agosto 18, 2019

MENÚ VERTICAL DESPLEGABLE AZUL PARA BLOGGER .






Tras un largo periplo de widgets y gadgets para Blogger vuelvo de nuevo con un menú vertical desplegable y totalmente responsive con subspestañas por lo que podremos agregar enlaces a cada sección del menú
.
Al ser responsive se adapta a cualquier anchura de la sidebar.

Para añadir este menú, siga los siguientes pasos:

.Vete al Escritorio de Blogger > Plantilla > Editar HTML > buscamos </head>

. Y antes de ello colocamos el script para desplegar con el código siguiente:

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


</head>




Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:








<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function()
{
$("#amor p.menu-inicio").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings()
});
$("#secondpane p.menu-inicio").mouseover(function()
{
$(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings()
});
});
//]]>
</script>


 Ahora entra en Diseño | Añadir un gadget | HTML/Javascript, y ahí pegas el siguiente código:

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







<style type="text/css">
.menu-inicio {color: #fff;margin: 2px 0 0 0; padding: 0;margin-top: 10px; background: #057ED5; display: block; border-radius: 4px; transition: all 0.5s ease;font-size: 14px; padding: 20px 0 10px 10px; border-radius: 4px; }
.menu-inicio a{color: #fff;}
.menu_body {width:100%;display:none;}
.menu_body a{background: #7CC6FA; display: block; padding: 10px 0 10px 10px; font-size: 14px; outline: 0; transition: all 0.5s ease; border-radius: 4px; line-height: 28px;color: #fff;}
.menu_body a:hover{
background: #057ED5; color: #fff; transition: all 0.5s ease; display: block; border-radius: 4px;}
</style>
<div class='menu-amor' id='amor'>
<p class='menu-inicio'><a href='URL del enlace'>INICIO</a></p>
<p class='menu-inicio'>Pestaña 1</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 2</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 3</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 4</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div></div>


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




Ya sólo cambia el nombre de las pestañas, de las subpestañas, y agrega las URLs de los enlaces donde se indica.



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

 Fuente;  amorsevillista

 Publicado por;                                                                 





  • Share:

You Might Also Like

1 comentarios