Muchos me han preguntado si es posible instalar un menú para blogger con un solo widget y no entrar en el código HTML de su blog para poder insertarlo, la verdad si es posible,
hoy van a aprender como agregar un menú en su blog de blogger con un solo widget, es un solo paso.
Luego de que hayan visto la demostración y ver como funciona vamos a trabajar.
Dirigite a “Diseño”, de un clic donde dice “añadir un gadget” y busca un widget que dice “HTML/Javascript”,
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>
#ayudadebloggernavbar {
background: #3B5998;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#ayudadebloggernav {
margin: 0;
padding: 0;
}
#ayudadebloggernav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#ayudadebloggernav li {
list-style: none;
margin: 0;
padding: 0;
}
#ayudadebloggernav li a, #ayudadebloggernav li a:link, #ayudadebloggernav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;
}
#ayudadebloggernav li a:hover, #ayudadebloggernav li a:active {
background: #627AAD;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;
}
#ayudadebloggernav li {
float: left;
padding: 0;
}
#ayudadebloggernav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#ayudadebloggernav li ul a {
width: 140px;
}
#ayudadebloggernav li ul ul {
margin: -25px 0 0 161px;
}
#ayudadebloggernav li:hover ul ul, #ayudadebloggernav li:hover ul ul ul, #ayudadebloggernav li.sfhover ul ul, #ayudadebloggernav li.sfhover ul ul ul {
left: -999em;
}
#ayudadebloggernav li:hover ul, #ayudadebloggernav li li:hover ul, #ayudadebloggernav li li li:hover ul, #ayudadebloggernav li.sfhover ul, #ayudadebloggernav li li.sfhover ul, #ayudadebloggernav li li li.sfhover ul {
left: auto;
}
#ayudadebloggernav li:hover, #ayudadebloggernav li.sfhover {
position: static;
}
#ayudadebloggernav li li a, #ayudadebloggernav li li a:link, #ayudadebloggernav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#ayudadebloggernav li li a:hover, #ayudadebloggernav li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
#ayudadebloggernav li li li a, #ayudadebloggernav li li li a:link, #ayudadebloggernav li li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;
}
#ayudadebloggernav li li li a:hover, #ayudadebloggernav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
</style>
<div id='ayudadebloggernavbar'>
<ul id='ayudadebloggernav'>
<li>
<a href='/'>Inicio</a>
</li>
<li>
<a href='#'>Quienes somos</a>
</li>
<li>
<a href='#'>Contactos ▼</a>
<ul>
<li><a href='#'>Facebook 1</a></li>
<li><a href='#'>Twitter 2</a></li>
<li><a href='#'>Google+ 3</a></li>
</ul>
</li>
<li>
<a href='#'>Categorias ▼</a>
<ul>
<li><a href='#'>Temas 1</a></li>
<li><a href='#'>Temas 2</a></li>
<li><a href='#'>Temas 3</a></li>
</ul>
</li>
<li>
<a href='#'>Temas ▼</a>
<ul>
<li><a href='#'> Tema 1</a></li>
<li><a href='#'> Tema 2</a></li>
<li><a href='#'>Tema 3</a></li>
</ul>
</li>
<li>
<a href='#'>Sitemap ▼</a>
<ul>
<li><a href='#'> Tema 1</a></li>
<li><a href='#'> Tema 2</a></li>
<li><a href='#'>Tema 3</a>
<ul>
<li><a href='#'>Sub Tema 1</a></li>
<li><a href='#'>Sub Tema 2</a></li>
<li><a href='#'>Sub Tema 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
#ayudadebloggernavbar {
background: #3B5998;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#ayudadebloggernav {
margin: 0;
padding: 0;
}
#ayudadebloggernav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#ayudadebloggernav li {
list-style: none;
margin: 0;
padding: 0;
}
#ayudadebloggernav li a, #ayudadebloggernav li a:link, #ayudadebloggernav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;
}
#ayudadebloggernav li a:hover, #ayudadebloggernav li a:active {
background: #627AAD;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;
}
#ayudadebloggernav li {
float: left;
padding: 0;
}
#ayudadebloggernav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#ayudadebloggernav li ul a {
width: 140px;
}
#ayudadebloggernav li ul ul {
margin: -25px 0 0 161px;
}
#ayudadebloggernav li:hover ul ul, #ayudadebloggernav li:hover ul ul ul, #ayudadebloggernav li.sfhover ul ul, #ayudadebloggernav li.sfhover ul ul ul {
left: -999em;
}
#ayudadebloggernav li:hover ul, #ayudadebloggernav li li:hover ul, #ayudadebloggernav li li li:hover ul, #ayudadebloggernav li.sfhover ul, #ayudadebloggernav li li.sfhover ul, #ayudadebloggernav li li li.sfhover ul {
left: auto;
}
#ayudadebloggernav li:hover, #ayudadebloggernav li.sfhover {
position: static;
}
#ayudadebloggernav li li a, #ayudadebloggernav li li a:link, #ayudadebloggernav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#ayudadebloggernav li li a:hover, #ayudadebloggernav li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
#ayudadebloggernav li li li a, #ayudadebloggernav li li li a:link, #ayudadebloggernav li li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;
}
#ayudadebloggernav li li li a:hover, #ayudadebloggernav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
</style>
<div id='ayudadebloggernavbar'>
<ul id='ayudadebloggernav'>
<li>
<a href='/'>Inicio</a>
</li>
<li>
<a href='#'>Quienes somos</a>
</li>
<li>
<a href='#'>Contactos ▼</a>
<ul>
<li><a href='#'>Facebook 1</a></li>
<li><a href='#'>Twitter 2</a></li>
<li><a href='#'>Google+ 3</a></li>
</ul>
</li>
<li>
<a href='#'>Categorias ▼</a>
<ul>
<li><a href='#'>Temas 1</a></li>
<li><a href='#'>Temas 2</a></li>
<li><a href='#'>Temas 3</a></li>
</ul>
</li>
<li>
<a href='#'>Temas ▼</a>
<ul>
<li><a href='#'> Tema 1</a></li>
<li><a href='#'> Tema 2</a></li>
<li><a href='#'>Tema 3</a></li>
</ul>
</li>
<li>
<a href='#'>Sitemap ▼</a>
<ul>
<li><a href='#'> Tema 1</a></li>
<li><a href='#'> Tema 2</a></li>
<li><a href='#'>Tema 3</a>
<ul>
<li><a href='#'>Sub Tema 1</a></li>
<li><a href='#'>Sub Tema 2</a></li>
<li><a href='#'>Sub Tema 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Ahora solo da un clic en "Guardar" y listo, ya tienes un menú para tu blog de blogger.
Y si quieres aumentar más opciones a tu menú basta con poner el siguiente código después del cierre de </li>
<li>
<a href="#">Información</a>
</li>
Eso es todo espero te haya servido de mucha ayuda
Data de la Publicación; 03-09-2019
Fuente; ayudadeblogger
Publicado por;
