TUTORIALES DE BLOGGER: 2017

1.Vaya a Escritorio de Blogger > Plantilla > Editar HTML > buscamos </head>
2. Y antes de ello colocamos el script para desplegar con el código 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>

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

<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>

VER BLOG DE PRUEBA

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

1 Ir a Blogger

2 Un clic en “Editar HTML”

3 Busca este código

header1

PEGA DEBAJO ESTE CÓDIGO:

<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/AVvXsEilUdMIYyBfgfiF59QKD9TYMouzVl2ArEXgH8pUHt1LKD5W-c_ALKukHJ2FHTKbe3SgM4jLu1phRYFb3RbzPvxpG5wuAOVRoPW_b3XR-EyyzmHzd1pDSCT5XgnGhglHtfVnnJ-wF9S8tFg/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/AVvXsEilUdMIYyBfgfiF59QKD9TYMouzVl2ArEXgH8pUHt1LKD5W-c_ALKukHJ2FHTKbe3SgM4jLu1phRYFb3RbzPvxpG5wuAOVRoPW_b3XR-EyyzmHzd1pDSCT5XgnGhglHtfVnnJ-wF9S8tFg/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 {

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/AVvXsEilUdMIYyBfgfiF59QKD9TYMouzVl2ArEXgH8pUHt1LKD5W-c_ALKukHJ2FHTKbe3SgM4jLu1phRYFb3RbzPvxpG5wuAOVRoPW_b3XR-EyyzmHzd1pDSCT5XgnGhglHtfVnnJ-wF9S8tFg/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>

<li class="current"><a href="/">Inicio</a></li>

<li><a href="#">Noticias</a>

<ul>

</ul>

</li>

<li><a href="#">Espectaculos</a>

<ul>

</ul>

</li>

<li><a href="#">Deportes</a>

<ul>

</ul>

</li>

<li><a href="#">Entretenimiento</a>

<ul>

</ul>

</li>

<li><a href="#">Videos</a>

<ul>

</ul>

</li>

<li><a href="#">Musica</a>

<ul>

</ul>

</li>

<li><a href="#">Economía</a>

<ul>

</ul>

</li>

<li><a href="#">Contactos</a>

<ul>

</ul>

</li>

</ul></div>

<br/>

Menú vertical desplegable para blogger

COMO AGREGAR UN MENU DESPLEGABLE.SIMPLES PASOS