Widget Acordeón para blogger V2
A continuación mire su demostración en mi blog de demos, el widget tiene el nombre
de “WIDGET ACORDEON PARA BLOGGER”
Les encanto 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.
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
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
esta bastante bien!
ResponderEliminarhttp://consejosdeblogger.blogspot.com.es/
Hola, mantente atento que si voy a publicar un tema sobre lo qu tu dices, recuerda suscribirte a mis nuevas actualizaciones.
ResponderEliminarSaludos.
Hola enviame la direccion de tu blog para poder verlo y decirte que es lo que puedes hacer,
ResponderEliminarSaludos.