MENÚ DESPLEGABLE PARA BLOGGER. 

Los menús desplegables para blogger, le dan al usuario que visita tu blog a escoger las diferentes categorías que las destacASTE  en tu menú. 

Obtener nuevos y fabulosos menús desplegables para blogger y que funcionen en cualquier blog de blogger, es lo que LA PAGINA DE KIKO DE BLOGGER. te ayudara. 

Renueva tu blog de blogger con temas únicos e interesantes, convirtiéndote en un experto en blogger.
El menú desplegable para blogger que os voy a presentar solo tendrás que insertarlo en un solo widget y no necesitaras introducirlo en el editor HTML de tu plantilla, 

es un código CSS simple que se inserta en un widget de tu blog de blogger, tendrás que realizar unos simples cambios para que se muestre las categorías que vosotros queráis.

Además este nuevo menú desplegable para blogger, funciona perfectamente en todos los navegadores como Firefox, Google Chrome, Internet Explorer etc.

 Vamos a trabajar


 Da un clic en “Diseño”

 Un clic en el gadget “Añadir un gadget”

 Busca el widget que tiene como nombre “HTML/Javascript”

 Inserta las siguientes líneas de código en su interior

<style>

    /*------Stard by Ayudadeblogger.com--------*/

    #ayudadeblogger-menu, #ayudadeblogger-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #ayudadeblogger-menu {

    width: 960px;

    margin: 60px auto;

    border: 1px solid #222;

    background-color: #111;

    background-image: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background-image: -webkit-linear-gradient(#444, #111);

    background-image: -o-linear-gradient(#444, #111);

    background-image: -ms-linear-gradient(#444, #111);

    background-image: linear-gradient(#444, #111);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777;

    -webkit-box-shadow: 0 1px 1px #777;

    box-shadow: 0 1px 1px #777;

    }

    #ayudadeblogger-menu:before,

    #ayudadeblogger-menu:after {

    content: "";

    display: table;

    }

    #ayudadeblogger-menu:after {

    clear: both;

    }

    #ayudadeblogger-menu {

    zoom:1;

    }

    #ayudadeblogger-menu li {

    float: left;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #ayudadeblogger-menu a {

    float: left;

    padding: 12px 30px;

    color: #999;

    text-transform: uppercase;

    font: bold 12px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #ayudadeblogger-menu li:hover > a {

    color: #fafafa;

    }

    *html #ayudadeblogger-menu li a:hover { /* IE6 only */

    color: #fafafa;

    }

    #ayudadeblogger-menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#444, #111);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#444, #111);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #ayudadeblogger-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #ayudadeblogger-menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #ayudadeblogger-menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #ayudadeblogger-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #ayudadeblogger-menu ul a {

    padding: 10px;

    width: 130px;

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #ayudadeblogger-menu ul a:hover {

    background-color: #B40404;

    background-image: -moz-linear-gradient(#B40404, #B40404);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#B40404), to(#B40404));

    background-image: -webkit-linear-gradient(#B40404, #B40404);

    background-image: -o-linear-gradient(#B40404, #B40404);

    background-image: -ms-linear-gradient(#B40404, #B40404);

    background-image: linear-gradient(#B40404, #B40404);

    }

    #ayudadeblogger-menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #ayudadeblogger-menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #ayudadeblogger-menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #ayudadeblogger-menu ul li:first-child a:hover:after {

    border-bottom-color: #B40404;

    }

    #ayudadeblogger-menu ul ul li:first-child a:hover:after {

    border-right-color: #B40404;

    border-bottom-color: transparent;

    }

    #ayudadeblogger-menu ul li:last-child > a {

    -moz-border-radius: 0 0 3px 3px;

    -webkit-border-radius: 0 0 3px 3px;

    border-radius: 0 0 3px 3px;

    }


    </style>


    <ul id="ayudadeblogger-menu">
    <li><a href="/">Inicio</a></li>
    <li>
    <a href="#">Temas</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
    <li>
    <a href="#">Farandula</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
<li>
    <a href="#">Deportes</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
<li>
    <a href="#">Entretenimiento</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
<li>
    <a href="#">Musica</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
    <li><a href="#">Contactos</a></li>
    </ul>

 Realiza estos cambios:

He marcado de tres diferentes colores en las cuales se identifica, los cambios que tendrán que realizar.

Los numerales que están marcados de color azul #, tendrán que insertar las URLs correspondientes en cada una de ellas.

El texto que esta marcado de color rojo, es el nombre principal de cada puesto del menú, cámbialos por el nombre de la categoría que quieras mostrar.

Y por ultimo el texto que esta marcado de color naranja, tendrán que cambiarlos por lo nombres que ustedes quieran.

Eso es todo, ahora dale un clic en “Guardar” y ubíquenlo debajo de la cabecera principal.

Nota: Si desean cambiar el color rojo del desplegable, solo basta con buscar este código B40404 y remplazar todos los códigos de color que tienen esa descripción por el código de color que quieran.

Fecha de la Publicación; 08-08-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                       

ÁREA DE CONTENIDO CON MÚLTIPLES PANELES.

Al momento de ahorrar espacio en nuestro blog de Blogger es necesario realizar varios trucos utilizando varios códigos con los cuales nos creara una caja con tres títulos múltiples y dentro de cada uno de ellos se puede ingresar contenido, este truco de Blogger lo pueden insertar en un widget o en una entrada, dependiendo el uso que lo quieran dar.

La inserción del código es muy fácil de realizarlo, parte del código se ingresa en la plantilla y el ultimo código en el cual está el contenido y los títulos se lo ingresa de forma manual en nuestra entrada o en un widget, a este método se lo conoce como Tab Múltiple.

 Al momento de ahorrar espacio en nuestro blog de Blogger es necesario realizar varios trucos utilizando varios códigos con los cuales nos creara una caja con tres títulos múltiples y dentro de cada uno de ellos se puede ingresar contenido, este truco de Blogger lo pueden insertar en un widget o en una entrada, dependiendo el uso que lo quieran dar. La inserción del código es muy fácil de realizarlo, parte del código se ingresa en la plantilla y el ultimo código en el cual está el contenido y los títulos se lo ingresa de forma manual en nuestra entrada o en un widget, a este método se lo conoce como Tab Múltiple.



Pueden ver su demostración en el siguiente blog de demos

Ver demostración en un widget de Blogger

Vamos a trabajar


 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.

4 Busca este código

<head>


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

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"></link>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Busca este código

</head>

Ingrese el siguiente código justo arriba del código que encontró

<script>

  $(function() {

    $( "#tabs" ).tabs();

  });

  </script>

  Un clic en “Guardar plantilla”

 Ahora dirígete a “Diseño”

 Un clic en “Agregar un gadget”

 Busque el widget que dice “HTML/Javascript” ábrelo

 Ingresa las siguientes líneas de código en su interior

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Adsense</a></li>
    <li><a href="#tabs-2">Teléfonos</a></li>
    <li><a href="#tabs-3">Móvil</a></li>
  </ul>
  <div id="tabs-1">
    <p>AdSense para búsqueda móvil permite a los editores obtener ingresos de sus páginas web para móviles mediante anuncios Google orientados. En AdSense para búsqueda móvil, Google hace coincidir los anuncios con el contenido de su sitio web para móviles y usted obtiene ingresos cuando los usuarios de dicho sitio hacen clic en sus anuncios.</p>
  </div>
  <div id="tabs-2">
    <p>Los dispositivos móviles antiguos con capacidad para Internet (conocidos como teléfonos de gama media) utilizan el protocolo de aplicaciones inalámbricas (WAP, Wireless Application Protocol) y solo pueden acceder parcialmente a Internet. Los sitios web que admiten dichos dispositivos suelen estar escritos en un lenguaje de marcas, como el lenguaje de marcas inalámbrico (WML, Wireless Markup Language) o HTML extensible estricto (XHTML estricto). En determinadas regiones del mundo, los dispositivos utilizan i-mode para acceder a los sitios web escritos en HTML compacto (CHTML).</p>
  </div>
  <div id="tabs-3">
    <p>Con el desarrollo de teléfonos como iPhone y Android, un número cada vez mayor de navegadores para móviles puede interpretar ahora JavaScript y HTML. Los dispositivos con estos navegadores pueden acceder a prácticamente las mismas funcionalidades de Internet que ofrecen los ordenadores (con algunas limitaciones debidas a su tamaño, la disponibilidad del operador, etc.) y se llaman teléfonos de gama alta.</p>
  </div>
</div>

Realiza los cambios en los tres títulos que están marcados de color rojo por los nombres que desees.

Realiza los cambios en las tres descripciones que están marcados de color verde por el texto que quieras dar a conocer

 Eso es todo un clic en “Guardar”

 Ubica el Widget Tab Múltiple donde quieras

Para mostrar el Widget Tab Múltiple en una Entrada de st blog de Blogger, deberás abrir st entrada y habilitar la casilla en modo “HTML” y pegar todo el código del paso 10 de este tutorial.

Fecha de la Publicación; 07-08-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                           

CAMBIAR LAS ETIQUETAS POR UN MENÚ DESPLEGABLE .

Es momento de traeros nuevas formas de embellecer a nuestro blog de Blogger, con un widget de etiquetas, el cual nos mostrara un menú desplegable de todas sus etiquetas de blog de Blogger.

 Este servicio solo sirve para los que usan la plataforma de Blogger.

 Ahora la configuración de la etiqueta y para transformarlo en un menú desplegable es tan simple como abrir su blog de blogger.

 Los pasos son muy sencillos, he tratado de ser lo mas explicativo posible. Con este menú de etiquetas ustedes podrán ahorrar espacio en su sidebar. 

Luego de haberos explicado un poco cual es su función, nos dirigimos a ver primero nuestro blog de pruebas en la cual podreis ver su funcionamiento, 

el widget que se encuentra alojado en mi blog de demos se llama “Categorías”, cuando ingresen ahí podrán ver su funcionamiento.

Primero mire su demostración en nuestro blog de demos

Luego de que hayan visto su demostración ahora si vamos a trabajar.

1 Dirígete a diseño

2 Abre “Añadir un gadget”

3 Busca un widget que dice “Etiquetas”, ábrelo y cambia el nombre por el que tu quieras o déjalo tal como esta, luego le das un clic en “Guardar”, ubícalo donde quieres que se muestre, y si ya tienes habilitado el widget de etiquetas, sáltate este paso y dirígete al siguiente.

4 Ahora vamos abrir “Plantilla” y damos 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:loop values='data:labels' var='label'>

Luego de que hayas encontrado el código, te mostrara un código como el que te dejo a continuación: código de muestra

 <ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>

El código que encontraste debes borrarlo y sustituirlo por el siguiente código a continuación:

<br/>
<select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecciona una categoría</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select

Luego de que hayas insertado el código, dale un clic en “Guardar plantilla” y dirígete a tu blog para que mires tus cambios, eso es todo.

Fecha de la Publicación; 07-08-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                            

CARRUSEL DE IMÁGENES 3D GIRATORIO .

Así quedaría

<div class="containercarrusel3d">
  <div id="carrusel3d">
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
   <figure><img src="URL IMAGEN" height="116" width="186"></figure>
  </div>
 </div>

<style>
.containercarrusel3d{
 margin: 4% auto;
 width: 210px;
 height: 140px;
 position: relative;
 perspective: 1000;
}
#carrusel3d{
 width: 100%;
 height: 100%;
 position: absolute;
 transform-style: preserve-3d;
 animation: rotation 20s infinite linear;
}
#carrusel3d:hover{
 animation-play-state: paused;
}
#carrusel3d figure{
 display: block;
 position: absolute;
 width: 186px;
 height: 116px;
 left: 10px;
 top: 10px;
 background: black;
 overflow: hidden;
 border: solid 5px black;
}
#carrusel3d figure:nth-child(1) { transform: rotateY(0deg) translateZ(288px);}
#carrusel3d figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carrusel3d figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carrusel3d figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carrusel3d figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carrusel3d figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carrusel3d figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carrusel3d figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carrusel3d figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}

#carrusel3d img{
 -webkit-filter: grayscale(1);
 cursor: pointer;
 transition: all .5s ease;
}
#carrusel3d img:hover{
 -webkit-filter: grayscale(0);
  transform: scale(1.2,1.2);
}

@keyframes rotation{
 from{
  transform: rotateY(0deg);
 }
 to{
  transform: rotateY(360deg);
 }
}
</style>

Hay muchas maneras de presentar imagenes, de hecho, en este blog ya te he formulado unas cuantas.
Pues por si fuera poco, aqui te traigo otra alternativa muy interesante.

 Como ya lo digo en el titulo, se trata de una especie de noria animada en 3D y con zoom al pasar el cursor sobre ellas.

¿Como se consigue este diseño, con Javascript? Pues no, simplemente aplicando bien estilos CSS (CSS3), por lo que el tiempo de carga del carrusel sera muy reducido.

Para añadirlo a vuestro blog o web, simplemente copia este codigo y lo pones alli donde quieras que se vea.

El texto en color rojo lo sustituyes por las direcciones URL de las imagenes que desees poner (hasta un total de 9).

Fecha de la Publicación;07-08-2019

 Fuente; redeando

 Publicado por;