Widget Acordeón para blogger V2


widget acordeon para blogger
Compartiré con ustedes un nuevo widget acordeón para blogger vertical con unos simples pasos. Obtener nuevos trucos para blogger e implementarlos en nuestros blogs de blogger es una forma de dar a conocer nuestros post antiguos o que estén promocionando algo de novedoso en su blog pero al seguir publicando nuevos temas sus post se van al final y muchos usuarios pasan desapercibidos al no encontrar algún tema interesante de su blog. Es por esto que Ayudadeblogger.com te ayudara con un simple código CSS para mostrar un widget acordeón y ubicar los temas más integrantes de su blog de blogger. Lo que vamos hacer es poner un código en el Editor HTML de nuestra plantilla y luego abrir diseño e insertar el código en un gadget HTML/Javascript y hacer unos cambios. Lo que va hacer el widget acordeón para blogger es mostrarse en su sidebar o en el lugar que ustedes prefieran, ahorrando espacio al expandirse en su blog. En una anterior publicación di a conocer un widget acordeón para blogger, del cual les dejo el enlace: Widget acordeón para blogger V1

A continuación mire su demostración en  mi blog de demos, el widget tiene el nombre deWIDGET ACORDEON PARA BLOGGER


Les encanto verdad!

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Plantilla


widget acordeon para blogger

3 Un clic en “Editar HTML

widget acordeon para blogger

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

widget acordeon para blogger

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.

widget acordeon para blogger

4 Busca este código

]]></b:skin>

Una vez que hayas encontrado el código, tendrás que insertar las siguientes líneas de código justo arriba del código que encontraste

/* Acordeon blogger start by ayudadeblogger.com

------------------------------------------------*/

.verticalaccordion>ul {

margin: 0;

padding: 0;

list-style:none;

width: 580px;

}

.verticalaccordion>ul>li {

display:block;

overflow: hidden;

margin: 0;

padding: 0;

list-style:none;

height:40px;

width: 580px;

/* Decoracion CSS */

background-color:#f0f0f0;

/* CSS3 Efecto de transicion */

transition: height 0.3s ease-in-out;

-moz-transition: height 0.3s ease-in-out;

-webkit-transition: height 0.3s ease-in-out;

-o-transition: height 0.3s ease-in-out;

}

.verticalaccordion>ul>li>h3 {

display:block;

margin: 0;

padding:10px;

height:19px;

/* DecoracionCSS */

border-top:#f0f0f0 1px solid;

font-family: Arial, Helvetica, sans-serif;

text-decoration:none;

text-transform:uppercase;

color: #000;

background: #cccccc;

/* CSS3 Efecto Gradient  */

background: -moz-linear-gradient( top, #999999, #cccccc);

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";   /* IE 8 */

}

.verticalaccordion>ul>li>div {

margin:0;

overflow: auto;

padding:10px;

height:260px;

}

.verticalaccordion>ul>li:hover {

height: 300px;

}

.verticalaccordion:hover>ul>li:hover>h3 {

/* Decoracion en CSS */

color:#fff;

background: #000000;

/* CSS3 Gradient Effect */

background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */

background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";   /* IE 8 */

}

.verticalaccordion>ul>li>h3:hover {

cursor:pointer;

}

Ahora es momento de dar un clic en “Guardar plantilla

5 Da un clic en “Diseño

widget acordeon para blogger

6 Abre un gadget “Añadir un gadget

widget acordeon para blogger

7 Busca el widget que dice “HTML/Javascript” ábrelo e inserta las siguientes líneas de código en su interior

widget acordeon para blogger

<div class="verticalaccordion">

<ul>

<li>

 <h3>Plantillas para Blogger</h3>

 <div>

  <a href="http://www.ayudadeblogger.com/2012/11/plantilla-de-blogger-para-mi-blog-de-noticias.html">Plantilla gratis - Noticias </a><br/>

  <a href="http://www.ayudadeblogger.com/2013/04/plantillas-para-blogger-linea-buenas-noticias-tutorial-blogger.html">Plantilla gratis - Buenas Noticias</a><br/>

 </div>

</li>

<li>

 <h3>Widgets para blogger</h3>

 <div>

  <a href="http://www.ayudadeblogger.com/2013/05/agregar-un-buscador-en-blogger-con-un-solo-widget.html">Widget buscador para blogger</a><br/>

  <a href="http://www.ayudadeblogger.com/2013/03/caja-de-seguidores-de-facebook-popout-para-blogger.html">Caja de seguidores Facebook</a><br/>

 </div>

</li>

<li>

 <h3>SEO</h3>

 <div>

  <a href="http://www.ayudadeblogger.com/2012/05/10-pasos-para-llegar-google-y-quedarse.html">10 Pasos para llegar a Google</a><br/>

  Este es un ejemplo del poder de blogger.........
<br/>
Es una muestra de lo que podrán realizar con esta caja
<br/>
acordeón vertical para blogger
 </div>

</li>

<li>

 <h3>Slideshow para blogger</h3>

 <div>

  <a href="http://www.ayudadeblogger.com/2012/10/como-agregar-a-mi-blog-de-blogger-un-slideshow-automatico.html">Slideshow para Blogger V1</a><br/>

  <a href="http://www.ayudadeblogger.com/2012/12/como-crear-un-slideshow-manual-para-mi-blog-de-blogger.html">Slideshow para blogger V2</a><br/>
<a href="http://www.ayudadeblogger.com/2012/07/como-crear-una-galeria-de-imagenes-para.html">Slideshow para Blogger V3</a><br/>

  <a href="http://www.ayudadeblogger.com/2012/11/como-hacer-un-slideshow-carrusel-basado-en-etiquetas-para-blogger.html">Slideshow para blogger V4</a><br/>
<a href="http://www.ayudadeblogger.com/2013/09/como-inserta-un-slideshow-en-blogger-simples-pasos.html">Slideshow para Blogger V5</a><br/>

  <a href="http://www.ayudadeblogger.com/2013/08/galeria-de-imaganes-para-blogger.html">Slideshow para blogger V6</a><br/>

 </div>

</li>

</ul>

</div>

Realiza estos cambios:

He marcado de 3 diferentes colores en los lugares en donde ustedes tendrán que hacer sus respectivos cambios.

Cambia los textos que están marcados de color rojo por el título que tú quieras

Las URLs que están marcadas de color azul son las responsables de mostrar los post, bórralas y pon las URLs de los post que quieras dar a conocer

Borra las palabras que están marcadas de color verde por el nombre del post que vas a mostrar en este widget.

Nota: Si quieres aumentar más puestos de post en tu widget acordeón basta con insertar una línea de código después del <br/>

href="http://www.ayudadeblogger.com/2013/08/galeria-de-imaganes-para-blogger.html">Slideshow para blogger V6</a><br/>

Eso es todo ahora dale un clic en “Guardar

Ubica tu nuevo widget acordeón donde tú quieras y ahorra espacio en tu blog de blogger

Fácil verdad!

Recuerda suscribirte y todos los días recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

¿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
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

6 comentarios:

  1. esta bastante bien!

    http://consejosdeblogger.blogspot.com.es/

    ResponderEliminar
  2. Hola Luis, muy bueno el widget :D. Ahora quisiera preguntarte si sabras de alguno de este tipo "acordeon" pero que se pueda usar en una entrada del blog. Gracias por tu atencion.

    ResponderEliminar
    Respuestas
    1. Hola, mantente atento que si voy a publicar un tema sobre lo qu tu dices, recuerda suscribirte a mis nuevas actualizaciones.
      Saludos.

      Eliminar
  3. Hola soy yo de nuevo xD, queria saber si alguien sabe como achicar el tamaño de la letra de los links porque por alguna razon se me ven grandes y en el demo estan chicos =/. ¿Alguna idea?

    ResponderEliminar
    Respuestas
    1. Hola enviame la direccion de tu blog para poder verlo y decirte que es lo que puedes hacer,
      Saludos.

      Eliminar
    2. Ya lo pude arreglar, gracias igual por la ayuda.
      Saludos!

      Eliminar