By
GALERÍA DE IMÁGENES PARA BLOGGER NUEVOS ESTILOS.





By
CREAR UN MAPA DEL SITIO CON UNA ETIQUETA ESPECIFICA .



By
INSERTAR BOTONES SOCIALES EN LAS IMÁGENES Y ASI COMPARTIRLO .





By
MENÚ HORIZONTAL CON SUBMENUS Y BUSCADOR INTEGRADO .






En este tutorial para blogger voy a explicar, como realizar un menú horizontal que contiene varios submenús y un buscador integrado en la barra del Menú para uso exclusivo en blogger. Si estabas buscando un tutorial sumamente explicativo para usarlo en tu blog de blogger has llegado al sitio adecuado. Si no tienes un menú en tu blog de blogger hoy te voy a proporcionar un menú realmente estupendo, para que lo utilices en tu blog de blogger.

Bueno ahora vamos a trabajar

En primer lugar si usted esta utilizando un plantilla del diseñador de plantillas de blogger, necesitara seguir los siguientes pasos y si no usa la plantilla del diseñador de plantillas de blogger omita este pasó.

Para configurar el menú en una plantilla del diseñador de plantillas de blogger realice lo siguiente:

1 Abrir “Plantilla” y dele un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación



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, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.


2 Busca este código




<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Borre el código que esta marcado de color azul class='tabs' .

4 También deberas buscar este otro código




/* Tabs
----------------------------------------------- */

Y vas a ver que tienes un código extenso tal como se muestra en

                                                                     este ejemplo

/* Tabs
----------------------------------------------- */
.tabs-inner {
  margin: .5em $(tabs.margin.sides) $(tabs.margin.bottom);
  padding: 0;
}

.tabs-inner .section {
  margin: 0;
}

.tabs-inner .widget ul {
  padding: 0;

  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

  -moz-border-radius: $(tabs.border.radius);
  -webkit-border-radius: $(tabs.border.radius);
  -goog-ms-border-radius: $(tabs.border.radius);
  border-radius: $(tabs.border.radius);
}

.tabs-inner .widget li {
  border: none;
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .5em 1em;
  margin-$endSide: $(tabs.spacing);

  color: $(tabs.text.color);
  font: $(tabs.font);

  -moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  -webkit-border-top-left-radius: $(tab.border.radius);
  -webkit-border-top-right-radius: $(tab.border.radius);
  -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;

  background: $(tab.background);

  border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
  padding-$startSide: 1.25em;

  -moz-border-radius-top$startSide: $(tab.first.border.radius);
  -moz-border-radius-bottom$startSide: $(tabs.border.radius);
  -webkit-border-top-$startSide-radius: $(tab.first.border.radius);
  -webkit-border-bottom-$startSide-radius: $(tabs.border.radius);
  -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
  -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);
  border-top-$startSide-radius: $(tab.first.border.radius);
  border-bottom-$startSide-radius: $(tabs.border.radius);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;

  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
  color: $(tabs.selected.text.color);

  -moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
}

/* Headings
----------------------------------------------- */

Recuerda borrar todo el código que esta en esta sección hasta el termino de  /* Headings
----------------------------------------------- */

Y remplázalo por el siguiente código





#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

Bueno luego de que hayan hecho todo le damos un clic en Guardar plantilla, ahora nos dirigimos a incrustar el código para que funcione el menú en nuestro blog de blogger, recuerda que los pasos anteriores eran para las personas que utilizan las plantillas del diseñador de plantillas de blogger, y si usted no utiliza una de estas plantillas omita los pasos anteriores y diríjase a realizar las siguientes instrucciones para colocar el código en su blog de blogger. Para las personas que utilizan plantillas del diseñador de plantillas de blogger deberán también seguir los siguientes pasos para que funcione el menú.




A continuación realice los siguientes 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





/* by www.ayudadeblogger.com by www.grupodelecluse.com
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:# A62222; /* Color de fondo */
border-radius:20px; /* Bordes redondeados */
}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3RQJ83W9BpjI4OVBsHQHrPw-Nc52MXmNhZ2r_gSwTDqqWwHyCIUtBH5nKtzH-d6ctQBuEDRI2x6I0L5xxZ8tulARkUSfzGgh87j41iWfVBQsDjsWfYWO8qkevk8nx_Sxn8v28LiHqBYg/s35/separador.gif) bottom right no-repeat;
color:#cccccc; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pestaña */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Color de las pestañas al pasar el cursor */
color:#FFFFFF; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Color de fondo del submenú */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submenú */
z-index:100;
border-top:1px solid #fff; /* Borde superior del submenú */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 20px 20px; /* Borde de las subpestañas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Color de las subpestañas al pasar el cursor */
color:#ffffff;
text-decoration:none;
}

#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEh07GaZOQBOAJ5sx1-eyn5LTBbUWs15oTHWEf-JbCvnmdCyxzgxFOL6NMr1aytJLK6EVLDqWXAADpUlADNp8ruiu-dDWhM9DYCL7rzXOVdBl2HP78DfL_3Lj8Ml-vnLr_NSavjYN_qw/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

3 Ahora dale un clic en “Guardar plantilla”


Dirígete a “Diseño” y dale un clic en “Añadir un gadget” y busca el widget que dice “HTML/javascript” e inserta el siguiente código en su interior.

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='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL del enlace">Inicio</a></li>
<li><a href="#">Contacto</a>
<ul>
<li><a href="URL del enlace">Mi blog</a></li>
<li><a href="URL del enlace">Facebook</a></li>
<li><a href="URL del enlace">Twitter</a></li>
<li><a href="URL del enlace">Google +</a></li>
</ul>
</li>
<li><a href="#">Informacion</a>
<ul>
<li><a href="URL del enlace">Mi blog</a></li>
<li><a href="URL del enlace">Informacion</a></li>
<li><a href="URL del enlace">Temas</a></li>
<li><a href="URL del enlace">Encuestas</a></li>
</ul>
</li>

<li><a href="#">Mi blog</a>
<ul>
<li><a href="URL del enlace">mi blog</a></li>
<li><a href="URL del enlace">Informacion</a></li>
<li><a href="URL del enlace">Temas</a></li>
<li><a href="URL del enlace">Encuestas</a></li>
</ul>
</li>

</ul>


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>

</div></div>

 Luego de insertar el código podrás realizar los siguientes cambios al gusto tuyo

Donde dice URL del enlace inserta el link de tu página, y cambia el nombre por el que tu quieras Mi blog y así haces con los demás.

Ahora dale un clic en “Guardar” y visita tu blog, espero haya sido de mucha ayuda este tutorial para blogger.




Data de la Publicación; 20-09-2019

  Fuente;  ayudadeblogger

  Publicado por;                                                                       





By
INSERTAR UN MENÚ EN MI BLOG DE BLOGGER.





Con unos simples pasos podrás insertar un Menú en su blog de Blogger, lo que vamos hacer es implantar un código en un widget HTML/Javascript y luego ubicarlo debajo de la cabecera principal de nuestro blog. La facilidad de crear un nuevo Menú en su blog de Blogger y sobre todo que tenga un hermoso diseño es lo que aprenderás a realizarlo con unos simples pasos en este tutorial de Blogger.

 No le causara ningún error en la estructura de su blog, además este Menú de Blogger funciona perfectamente en todos los navegadores web.


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>
#ayudadeblogger-nav {
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;
  text-transform:uppercase;
}

#ayudadeblogger-nav ul {
  height:50px;
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

#ayudadeblogger-nav li {
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#ayudadeblogger-nav a,
#ayudadeblogger-nav a:before {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:50px;
  color:white;
  text-decoration:none;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  /* Transicion CSS */
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#ayudadeblogger-nav a:before {
  content:attr(data-clone); /* Atribucion */
  position:absolute;
  top:100%;
  left:0px;
  display:block;
  background-color:white;
  background-image:-webkit-linear-gradient(top, #ddd, white);
  background-image:-moz-linear-gradient(top, #ddd, white);
  background-image:-ms-linear-gradient(top, #ddd, white);
  background-image:-o-linear-gradient(top, #ddd, white);
  background-image:linear-gradient(top, #ddd, white);
  border-top:2px solid rgba(0,0,0,0.2);
  color:#333;
}

#ayudadeblogger-nav a:hover {
  margin-top:-50px;
  margin-bottom:1px;
}
</style>
<nav id='ayudadeblogger-nav'>
    <ul>
        <li><a href='/' data-clone='Inicio'>Inicio</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Noticias'>Noticias</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Entretenimiento'>Entretenimiento</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Farandula'>Farandula</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Deportes'>Deportes</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Inversiones'>Inversiones</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Videos'>Videos</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Contactos'>Contactos</a></li>
    </ul>
</nav>


Realiza estos cambios:

He marcado de dos diferentes colores en los lugares que tendrás que realizar sus diferentes cambios

Borra las palabras que están marcadas de color azul, y remplázalos por las direcciones URLs de los artículos que quieras dar a conocer

Además, tienes que borrar todas las palabras que están marcadas de color rojo y remplazarlas por un título en particular

Eso es todo, es momento de dar un clic en “Guardar” y ubica tu nuevo Menu debajo de la cabecera principal de tu blog








Data de la Publicación; 19-09-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                           




























By
MENÚ PARA MI BLOG DE BLOGGER CON UNOS POCOS PASOS .







Es divertido aprender nuevos trucos para Blogger y saberlos implementar correctamente en nuestro blog de Blogger.

Este nuevo menú desplegable para Blogger utiliza solo estilos CSS3 y nada de jQuery, esto hará que sea frágil al momento de cargar en nuestro blog y no le causara ningún daño a su estructura.

 Además funciona correctamente en todos los navegadores web, a excepción de Internet Explorer, ya que el IE7 siempre carece de compatibilidad con CSS3, pero solo en sus bordes redondeados.
Debemos insertar el código CSS3 en el Editor HTML de nuestra plantilla, pero también sirve para insertarlo en un widget.


Ahora vamos a insertar este menú desplegable en el Editor HTML de nuestra plantilla y lo ubicaremos arriba del encabezado principal de nuestro blog



 Un clic en “Editar HTML”





Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación



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, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.


 Busca este código

header1

Una vez que hayas encontrado el código te mostrara así como la siguiente imagen, claro que con el título respectivo de tu blog, esto es solo un ejemplo de guía.



AQUÍ VAMOS A UBICAR NUESTRO CODIGO” imagen





Debemos insertar el siguiente código donde está especificado en la imagen y dice “AQUÍ VAMOS A UBICAR NUESTRO CODIGO”


<style>
#ayudadeblogger-Container {
    font: normal 1em Arial, Helvetica, sans-serif;
     width:100%; float:left;
}
a {
    color: #333;
}
#ayudadeblogger {
    margin: 0;
    padding: 7px 6px 0;
    background: #DF0101 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVdJlxEM15lG8oqcEFNQL5uFX36PDBtKUlDTWZSjKXGnXt_90FrlRUFfVEjk3cq02tg2OKB_FHtSo9E5anccRp4SAUjCYxm6K30qARg3qOv2aLEM_CiyayQHiPGNu1pV_81yL2-Ds0p8/s1600/gradient.png) repeat-x 0 -110px;
    line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#ayudadeblogger li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none; }

/* main level */
#ayudadeblogger a {
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding:  8px 20px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;

    text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#ayudadeblogger a:hover {
    background: #000;
    color: #fff;
}
/* main level hover */
#ayudadeblogger .current a, #ayudadeblogger li:hover > a {
    background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVdJlxEM15lG8oqcEFNQL5uFX36PDBtKUlDTWZSjKXGnXt_90FrlRUFfVEjk3cq02tg2OKB_FHtSo9E5anccRp4SAUjCYxm6K30qARg3qOv2aLEM_CiyayQHiPGNu1pV_81yL2-Ds0p8/s1600/gradient.png) repeat-x 0 -40px;
    color: #444;
    border-top: solid 1px #f8f8f8;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    box-shadow: 0 1px 1px rgba(0,0,0, .2);
    text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels hover */
#ayudadeblogger ul li:hover a, #ayudadeblogger li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
#ayudadeblogger ul a:hover {
    background: #DF0101 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVdJlxEM15lG8oqcEFNQL5uFX36PDBtKUlDTWZSjKXGnXt_90FrlRUFfVEjk3cq02tg2OKB_FHtSo9E5anccRp4SAUjCYxm6K30qARg3qOv2aLEM_CiyayQHiPGNu1pV_81yL2-Ds0p8/s1600/gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
text-align:left;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#ayudadeblogger li:hover > ul {
    display: block;
}
/* list 2 */
#ayudadeblogger ul {
    display: none;
text-align:left;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVdJlxEM15lG8oqcEFNQL5uFX36PDBtKUlDTWZSjKXGnXt_90FrlRUFfVEjk3cq02tg2OKB_FHtSo9E5anccRp4SAUjCYxm6K30qARg3qOv2aLEM_CiyayQHiPGNu1pV_81yL2-Ds0p8/s1600/gradient.png) repeat-x 0 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#ayudadeblogger ul li {
    float: none;
    margin: 0;
    padding: 0;
}
#ayudadeblogger ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
}
/* list */
#ayudadeblogger ul ul {
    left: 181px;
    top: -3px;
}
/* rounded corners of first and last link */
#ayudadeblogger ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}
#ayudadeblogger ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}
/* clearfix */
#ayudadeblogger:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#ayudadeblogger {
    display: inline-block;
}
</style>

<div id="ayudadeblogger-Container">
<ul id="ayudadeblogger">
  <li class="current"><a href="/">Inicio</a></li>
<li><a href="#">Noticias</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Espectaculos</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Deportes</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Entretenimiento</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Videos</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Musica</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Economía</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
<li><a href="#">Contactos</a>
<ul>
<li><a href="#">Sub menú 1</a></li>
<li><a href="#">Sub menú 2</a></li>
<li><a href="#">Sub menú 3</a></li>
</ul>
</li>
</ul></div>
<br/>


Realiza estos cambios:

Cambia las palabras que están marcadas de color rojo por el nombre que quieras mostrar

Cambia las palabras que están marcadas de color verde por el nombre que quieras mostrar

Y borra los símbolos numerales # por las URLs de los post que quieras dar a conocer en el menú.

Eso es todo, es momento de dar un clic en “Guardar plantilla” y mira los nuevos cambios en tu blog.






Data de la Publicación; 05-09-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                        







By
MENÚ DESPLEGABLE PARA BLOGGER .







Con tres simples pasos instalaras un Menú desplegable en su blog de Blogger, ¡Como hacerlo! Debes seguir las instrucciones de este grandioso tutorial.

Características:

- Carga ligera
- Optimizado
- Diferentes colores
- Fácil de instalar
- Funciona en todos los navegadores web como Firefox, Google Chrome, Internet Explorer, etc.
- Se puede modificar su tamaño
- SEO



 Un clic en “Plantilla”





 Un clic en “Editar HTML”





Ahora se le abrirá el Editor HTML de tu plantilla




En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.



4 Busca este código

]]></b:skin>


Ingresa los siguientes estilos de código justo arriba del código que encontraste




#menu{
background: #4f7ca1;
color: #fff;
height: 50px;
z-index:9;
width:970px;
margin:0 auto;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:50px;width:970px}
#menu li{float:left;display:inline;position:relative;font:normal 0.9em Oswald; text-transform:uppercase;}
#menu a{display: block;
line-height: 48px;
padding: 0 30px;
text-decoration: none;
color: #fff;
}
#menu li a:hover{
color: #fff;
background: #0099cc;
}
li.home a{background:#4f7ca1; color:#fff;}
li.second a{background:#5fa03f}
li.third a{background:#ff0000}
li.fourth a{background:#e89319}
li.fifth a{background:#72347d}
li.sixth a{background:#fc0}
li.seventh a{background:#E71838}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Oswald;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 190px;
background: #000;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:bold 12px Arial;
text-transform: none;
text-shadow: none;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #222;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

Nota: Puedes cambiar el tamaño del menú en los dos lugares que están marcados de color amarillo: 970

 Busca otra vez este código

]]></b:skin>

Ingresa las siguientes líneas de código justo abajo del código que encontraste






<script type='text/javascript'>
      //<![CDATA[
      /*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *            http://www.opensource.org/licenses/mit-license.php
 *            http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */
      ;(function($){
        $.fn.superfish = function(op){
          var sf = $.fn.superfish,
              c = sf.c,
              $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
              over = function(){
                var $$ = $(this), menu = getMenu($$);
                clearTimeout(menu.sfTimer);
                $$.showSuperfishUl().siblings().hideSuperfishUl();
              },
              out = function(){
                var $$ = $(this), menu = getMenu($$), o = sf.op;
                clearTimeout(menu.sfTimer);
                menu.sfTimer=setTimeout(function(){
                  o.retainPath=($.inArray($$[0],o.$path)>-1);
                  $$.hideSuperfishUl();
                  if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
                },o.delay);       
              },
              getMenu = function($menu){
                var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
                sf.op = sf.o[menu.serial];
                return menu;
              },
              addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
          return this.each(function() {
            var s = this.serial = sf.o.length;
            var o = $.extend({},sf.defaults,op);
            o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
              $(this).addClass([o.hoverClass,c.bcClass].join(' '))
              .filter('li:has(ul)').removeClass(o.pathClass);
            });
            sf.o[s] = sf.op = o;
            $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
              if (o.autoArrows) addArrow( $('>a:first-child',this) );
            })
            .not('.'+c.bcClass)
            .hideSuperfishUl();
            var $a = $('a',this);
            $a.each(function(i){
              var $li = $a.eq(i).parents('li');
              $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
            });
            o.onInit.call(this);
          }).each(function() {
            var menuClasses = [c.menuClass];
            if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
            $(this).addClass(menuClasses.join(' '));
          });
        };
        var sf = $.fn.superfish;
        sf.o = [];
        sf.op = {};
        sf.IE7fix = function(){
          var o = sf.op;
          if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
            this.toggleClass(sf.c.shadowClass+'-off');
        };
        sf.c = {
          bcClass     : 'sf-breadcrumb',
          menuClass   : 'sf-js-enabled',
          anchorClass : 'sf-with-ul',
          arrowClass  : 'sf-sub-indicator',
          shadowClass : 'sf-shadow'
        };
        sf.defaults = {
          hoverClass               : 'sfHover',
          pathClass  : 'overideThisToUse',
          pathLevels               : 1,
          delay                          : 800,
          animation : {opacity:'show'},
          speed                        : 'normal',
          autoArrows             : true,
          dropShadows : true,
          disableHI   : false,                  // true disables hoverIntent detection
          onInit                         : function(){}, // callback functions
          onBeforeShow: function(){},
          onShow                    : function(){},
          onHide                      : function(){}
        };
        $.fn.extend({
          hideSuperfishUl : function(){
            var o = sf.op,
                not = (o.retainPath===true) ? o.$path : '';
            o.retainPath = false;
            var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
            .find('>ul').hide().css('visibility','hidden');
            o.onHide.call($ul);
            return this;
          },
          showSuperfishUl : function(){
            var o = sf.op,
                sh = sf.c.shadowClass+'-off',
                $ul = this.addClass(o.hoverClass)
            .find('>ul:hidden').css('visibility','visible');
            sf.IE7fix.call($ul);
            o.onBeforeShow.call($ul);
            $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
            return this;
          }
        });
      })(jQuery);
      //]]>
</script>

 Busca este código

<body>

Un clic en “Plantilla”




 Un clic en “Editar HTML”




Ahora se le abrirá el Editor HTML de su plantilla



En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.



 Coloca este código en el buscador y dale un "Enter"


<body>



Ingresa las siguientes líneas de código justo abajo del código que encontraste





<nav id='menu'>
<input type='checkbox'/>
<label>
        &#8801;
        <span>
          Clic&#160;Aqui
        </span>
</label>
<ul>
<li class='home'>
<a href='/'>
            Inicio
          </a>
</li>
<li class='second'>
<a href='#'>
            Música
          </a>
</li>
<li class='third'>
<a href='#'>
            Menú desplegable
            <font size='1'>
              &#9660;
            </font>
</a>
<ul class='menus'>
<li>
<a href='#'>
                Menú desplegable 1
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 2
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 3
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 4
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 5
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 6
              </a>
</li>
</ul>
</li>
<li class='fourth'>
<a href='#'>
            Contactos
          </a>
</li>
<li class='fifth'>
<a href='#'>
            Menú desplegable 2
          <font size='1'>
              &#9660;
            </font>
</a>
<ul class='menus'>
<li>
<a href='#'>
                Menú desplegable 2.1
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 2.2
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 2.3
              </a>
</li>
</ul>
</li>
<li class='sixth'>
<a href='#'>
            Menú
          </a>
</li>
<li class='seventh'>
<a href='#'>
            Videos
          </a>
</li>
</ul>
</nav>

Realiza estos cambios:

Cambia los nombres que están marcados de color rojo por el nombre que desees

Elimina todos los símbolos numerales (#) que están marcados de color azul y remplázalos por las direcciones URLs de los posts que vas a dar a conocer en el menú.



 Eso es todo, es momento de dar un clic en “Guardar plantilla”





 Data de la Publicación; 05-09-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                      





By