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


Slideshow acordeón

Gracias a  Ayudadeblogger.com

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. 


Puedes ver la demostración en éste mismo blog, al lado derecho de la pantalla.

1 Ir a blogger
2 Da un clic en “Plantilla
3 Un clic en “Editar HTML

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.

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
6 Abre un gadget “Añadir un gadget
7 Busca el widget que dice “HTML/Javascript” ábrelo e inserta las siguientes líneas de código en su interior

<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

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

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