MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Menú desplegable para blogger

Hola:
Te comparto un menú desplegable que es muy útil. Espero que te agrade.

Posteado por Luis Chavez de Ayuda de blogger


Es hora de compartir con ustedes un nuevo y espectacular menú desplegable para blogger con un estilo único. 
No necesitaras introducirlo en tu editor HTML de tu plantilla, solo lo vas ha instalar en un solo widget, Que te parece esta idea única 

¡ Blogger es realmente magnifico es el único sitio web que puede darte este maravilloso y único menú desplegable para blogger con un estilo totalmente diferente a los demás. 

En este nuevo menú desplegable para blogger no vamos a utilizar ningún javascript, solo un simple código CSS que hace que este menú sea único en su categoría. 

Solo tienes que seguir las instrucciones de configuración y lo podrás obtener y publicarlo en tu blog de blogger completamente gratis. 

Bueno a continuación mire su demostración en mi blog de demos



Vamos a instalarlo en nuestro blog de blogger
1 Ir a blogger

2 Da un clic en “Diseño

3 Busca un gadget “Añadir un gadget” y ábrelo

4 Se te desprenderá una nueva ventana en la cual tendrás que buscar el widget que dice “HTML/Javascript” ábrelo e inserta las siguientes líneas de código en su interior

<div id="menu">
<li><a href="http://ayudadeblogger.com/" class="drop">Inicio</a><!-- Empezar Inicio Item -->
<div class="dropdown_2columns"><!-- Begin  columns container by ayudadeblogger.com-->
<div class="col_2">
<h2>Bienvenidos a Ayudadeblogger.com!</h2>
</div>
<div class="col_2">
<p>Hola y bienvenidos! Esta es una muestra de las posibilidades de este impresionante menú desplegable para Blogger.</p>            
<p>Este artículo viene con una amplia gama de estilos de tipografía preparados, como encabezados, listas, etc</p>            
</div>
<div class="col_2">
<h2>SOPORTE</h2>
</div>
<div class="col_1">
<img src="http://1.bp.blogspot.com/-ghzmqWV-JVc/T_sb6dIHydI/AAAAAAAAGGI/KVKV6tgO-fM/s1600/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>Este menú ha sido probado en todos los principales navegadores.</p>
</div>
</div><!-- End 2 columnas container ayudadeblogger.com-->
</li><!-- End Home Item -->
<li><a href="#TU LINK AQUI" class="drop">Blogger</a><!-- Empezar 4 columns Item star ayudadeblogger.com-->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End primeras 4 columnas container by ayudadeblogger.com-->
</li><!-- End 4 columns Item -->
<li><a href="#TU LINK AQUI" class="drop">Diseño Web</a><!-- Empezar 4 columnas Item soport ayudadeblogger.com-->
<div class="dropdown_4columns"><!-- Empezar 4 columnas container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI ">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End 4 columnas container soport ayudadeblogger.com-->
</li><!-- End 4 columnas Item soport grupodelecluse.com-->
<li><a href="#TU LINK AQUI" class="drop">SEO Online</a><!-- Empezar 4 columnas Item -->
<div class="dropdown_4columns"><!-- Empezar 4 columns container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End 4 columnas container -->
</li><!-- End 4 columnas Item soport ayudadeblogger.com-->
<li><a href="#TU LINK AQUI" class="drop">Widgets para Blogger</a><!-- Empezar 4 columnas Item -->
<div class="dropdown_4columns"><!-- Empezar 4 columnas container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End 4 columnas container -->
</li><!-- End 4 columnas Item sopor by ayudadeblogger.com-->
<style type="text/css">
body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}
/* Navigation Bar star ayudadeblogger.com */
#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;
 /* Rounded Corners */
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 /* Background color and gradients */
 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
 /* Borders star by www.grupodelecluse.com*/
 border: 1px solid #002232;
 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}
#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;
 /* Background color and gradients */
 background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
 /* Rounded corners */
 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}
#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 7px;
}
/* Drop Down */
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;
 /* Gradient background */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px ;
z-index:444 !important;
    top:auto;
}
/* Columns */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
/* Right alignment */
#menu .menu_right {
 float:right !important;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}
#menu li:hover div a {
 font-size:12px;
 color:#015b86;
}
#menu li:hover div a:hover {
 color:#029feb;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;
 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 /* Shadow */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;
 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}
.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}
</style>
<a href="http://www.ayudadeblogger.com" title="Ayuda de Blogger" ><img src="http://img1.blogblog.com/img/blank.gif" /></a></div>

Realiza estos cambios:
Recuerda solo debes editar los pasos que te voy a indicar a continuación y no borres ni trates de cambiar nada ya que por un punto o coma o un código borrado no se mostrara el menú.
He marcado con cuatro diferentes colores en los cuales deberán remplazarlos tal como lo voy a explicar a continuación

El primer link que deberás borrar es http://ayudadeblogger.com/ y pon la dirección de tu blog en vez de mi dirección.

Cambia todas las palabras que están marcadas de color purpura Bienvenidos a Ayudadeblogger.com!, por una frase de bienvenida o lo que tu quieras

En las partes que están marcadas de color azul #TU LINK AQUI, deberás borrarlo y poner el link de la pagina que quieras mostrar.

Además, deberás borrar las palabras que están marcadas de color verde Aqui el titulo del Menu Ayudadeblogger.com y poner el titulo que tú quieras.

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
loading...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者