Menú desplegable para blogger nuevo estilo
Los menús desplegables para blogger le
dan a nuestro blog de blogger una estructura única de un diseño web
profesional. Obtener nuevos y fabulosos trucos para blogger es lo que van a
aprender en esta página web. Ayudadeblogger.com les presenta un nuevo menú desplegable
para blogger, para que lo utilicen en su blog de blogger profesionalmente. Este
nuevo menú desplegable para blogger funciona en todos los navegadores web como,
Firefox, Google Chrome, Internet Explorer etc. La inserción del código es muy fácil
de realizarlo, primero insertaremos un código CSS en el Editor HTML de nuestra
plantilla, luego copiaremos otro código y lo pondremos en un widget y listo
funcionara de maravilla en nuestro blog de blogger.
Anteriormente publique algunos Menús
desplegables para blogger, de los cuales les dejo los enlaces.
- Como agregar un menú para mi blog de blogger con un solo widget
- Como hacer un Menú vertical desplegable para mi blog de blogger
- Como hacer un menú horizontal con submenús y buscador integrado para blogger
- Crear un menú desplegable en Blogger
- Menu Jquery para blogger
- Menú desplegable para blogger
- Menú desplegable para blogger Mega menú V2
- Menú desplegable para blogger con imágenes
- Menú desplegable para blogger nuevo estilo CSS3
A continuación mire su demostración en
mi blog de demos
Les gusto verdad!
Vamos a trabajar
1 Ir a blogger
2 Da un clic en “Plantilla”
3 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
]]></b:skin>
|
Inserta el siguiente código CSS justo
arriba del código que encontraste
/* Drop Down Menu start by
ayudadeblogger.com */
ul.dropdown li a {
display: block;
padding: 3px 8px;
}
ul.dropdown li {
padding: 0;
}
ul.dropdown li.dir {
padding: 7px 20px 7px 12px;
}
ul.dropdown ul li.dir {
padding-right: 15px;
}
ul.dropdown ul a {
padding: 4px 5px 4px 12px;
}
ul.dropdown ul a:hover {
padding: 3px 5px 3px 11px;
border: solid 1px #ddd;
background-color: #eee;
font-weight: bold;
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
ul.dropdown {
font: bold 12px Arial, Helvetica,
sans-serif;
}
ul.dropdown li {
padding: 3px 12px;
background-color: #000;
color: #fff;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #222;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none; }
ul.dropdown a:hover { color: #fff; text-decoration: underline; }
ul.dropdown a:active { color: #fff; }
/* -- level mark -- */
ul.dropdown ul {
margin-left: -6px;
width: 170px;
padding-bottom: 9px;
background:
url(http://4.bp.blogspot.com/-MwgiNzVwW8Q/UIixwkBTy5I/AAAAAAAAFdg/0UQSjWZV1zU/s1600/dropdown_pane.png)
0 100% no-repeat;
color: #000;
font-size: 11px;
font-weight: normal;
}
ul.dropdown ul li {
background-color: transparent;
color: #000;
}
ul.dropdown ul li.hover,
ul.dropdown ul li:hover {
background-color: transparent;
}
ul.dropdown ul li.empty {
padding: 12px 12px 7px !important;
font-weight: bold;
}
ul.dropdown ul a:link,
ul.dropdown ul a:visited { color: #000; }
ul.dropdown ul a:hover { color: #000; text-decoration: none; }
ul.dropdown ul a:active { color: #000; }
/* -- level mark -- */
ul.dropdown ul ul {
display: none;
}
/* -- Supporting class `dir` -- */
ul.dropdown *.dir {
padding-right: 12px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
|
Ahora es momento de dar un clic en “Guardar
plantilla”
4 Da un clic en “Diseño”
5 Abre un gadget “Añadir un gadget”
6 Busca el widget que dice “HTML/Javascript”
ábrelo e inserta el siguiente código en su interior
<ul class="dropdown
dropdown-horizontal" id="nav">
<li><a
href="/">Inicio</a></li>
<li><a class="dir"
href="Su
link URL aqui">Blogger</a>
<ul>
<li class="empty">Blogger</li>
<li><a href="Su link URL aqui">Ganar
dinero</a></li>
<li><a href="Su link URL aqui">Internet</a></li>
<li><a href="Su link URL aqui">Blogs</a></li>
<li><a href="Su link URL aqui">Soluciones</a></li>
<li class="empty">Eventos</li>
<li><a href="Su link URL aqui">Diseño</a></li>
<li><a href="Su link URL aqui">Diseño
web</a></li>
<li><a href="Su link URL aqui">SEO</a></li>
<li><a href="Su link URL aqui">Marketing</a></li>
<li><a href="Su link URL aqui">Problogger</a></li>
<li><a href="Su link URL aqui">Widgets</a></li>
</ul></li>
<li><a class="dir"
href="Su
link URL aqui">Ganar Dinero</a>
<ul>
<li><a href="Su link URL aqui">Dinero</a></li>
<li><a href="Su link URL aqui">Ganar
dinero</a></li>
<li><a href="Su link URL aqui">SEO</a></li>
<li><a href="Su link URL aqui">Soluciones</a></li>
<li><a href="Su link URL aqui">Menus</a></li>
<li><a href="Su link URL aqui">Empresa</a></li>
<li><a href=" Su link URL
aqui ">Aplicaciones</a></li>
</ul></li>
<li><a class="dir"
href="Su
link URL aqui">Widgets para blogger</a>
<ul>
<li><a href="Su link URL aqui">Widgets</a></li>
<li><a href="Su link URL aqui">Blogger</a></li>
<li><a href="Su link URL aqui">SEO</a></li>
<li><a href="Su link URL aqui">Diseño
web</a></li>
<li><a href="Su link URL aqui">Plantillas</a></li>
<li><a href="Su link URL aqui">Mi
sitio</a></li>
</ul></li>
<li><a class="dir"
href="Su
link URL aqui">Slideshow</a>
<ul>
<li class="empty">Blogger</li>
<li><a href="Su link URL aqui">Slideshow</a></li>
<li><a href="Su link URL aqui">Blogger</a></li>
<li><a href="Su link URL aqui">Dinero</a></li>
<li><a href="Su link URL aqui">Menus</a></li>
<li class="empty">Plantillas</li>
<li><a href="Su link URL aqui">Plantillas
Blog</a></li>
<li><a href="Su link URL aqui">Profesional</a></li>
<li><a href="Su link URL aqui">Taggui</a></li>
</ul></li>
<li><a class="dir"
href="Su
link URL aqui">Servicios</a>
<ul>
<li><a href="Su link URL aqui">Blogger</a></li>
<li><a href="Su link URL aqui">Comunidad</a></li>
<li><a href="Su link URL aqui">Servicios</a></li>
<li><a href="Su link URL aqui">Marcas</a></li>
<li><a href="Su link URL aqui">Backlinks</a></li>
<li><a href="Su link URL aqui">Menus</a></li>
<li><a href="Su link URL aqui">Cuentas</a></li>
</ul></li>
<li><a class="dir"
href="Su
link URL aqui">Menus</a>
<ul>
<li><a href="Su link URL aqui">Menus
blog</a></li>
<li><a href="Su link URL aqui">Blogger</a></li>
<li><a href="Su link URL aqui">Dinero</a></li>
<li><a href="Su link URL aqui">Ganar
dinero</a></li>
<li class="empty">Internet</li>
<li><a href="Su link URL aqui">Servicios</a></li>
<li><a href="Su link URL aqui">Descargas</a></li>
</ul></li>
<li><a class="dir"
href="Su
link URL aqui">Widgets blogger</a>
<ul>
<li><a href="Su link URL aqui">Blogs</a></li>
<li><a href="Su link URL aqui">Blogger</a></li>
<li><a href="Su link URL aqui">Menus</a></li>
<li><a href="Su link URL aqui">Slideshow</a></li>
<li><a href="Su link URL aqui">Comunidad</a></li>
</ul></li>
<li><a class="dir"
href="Su
link URL aqui">Contacto</a>
<ul>
<li><a href="Su link URL aqui">Google
+</a></li>
<li><a href="Su link URL aqui">Facebook</a></li>
<li><a href="Su link URL aqui">Twitter</a></li>
</ul></li>
</ul>
|
Realiza estos cambios:
He marcado de tres diferentes colores en
los cuales ustedes tendrán que hacer sus cambios pertinentes.
Borra las palabras que están marcadas de
color azul donde dice Su link URL aqui y pon ahí la URL correspondiente
del post que quieras mostrar en tu menú desplegable.
Existen palabras que están marcadas de
color rojo, bórralas y pon ahí el nombre correspondiente de la categoría que
quieras mostrar en tu menú.
Las palabras que están marcadas de color
verde, tendrás que borrarlas y poner el nombre que tú quieras.
Y por último, los nombres de cada menú desplegable,
cámbialas todas por los nombres o categorías que quieras mostrar en tu nuevo menú
desplegable para blogger.
Eso es todo, ahora dale un clic en “Guardar”
y ubica tu nuevo menú desplegable debajo de la cabecera principal de tu blog de
blogger.
Fácil verdad
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
30 comentarios: