Slideshow para blogger con un solo widget
En este nuevo y fabulo tutorial de
Slideshow para blogger, van ha aprender a instalara un slideshow para blogger
en un solo widget. No vamos a ingresar a nuestro Editor HTML, lo vamos hacer
tan fácil y practico. Lo que va hacer nuestro nuevo widget es mostrarse de
forma automática en nuestro blog de blogger, lo que hará es mostrar las 8
ultimas publicaciones de nuestro blog, y si quieren aumentar las vistas en su
slideshow lo podrán hacer. El slideshow funciona en todos los navegadores como
Firefox, Google Chrome, Bing, etc.
Pueden ver como funciona este nuevo
Slideshow para blogger en mi página de demos. A continuación mire su demostración
Anteriormente publique 18 Slideshow para
blogger de los cuales les dejo los enlaces a continuación:
- Como agregar a mi blog de blogger un Slideshow automatico
- Como crear un Slideshow manual para mi blog de blogger
- Como crear una galería de imágenes para Blogger online Gratis – Como crear un Slideshow gratis para blogger
- Como hacer un Slideshow Carrusel basado en etiquetas para blogger
- Mostrar un Slideshow con mis entradas populares para blogger
- Necesito un Slider para mi blog de blogger
- SlideShow con control deslizante para blogger
- Slider para blogger en 3D
- Slideshow de Popular post o Entradas polulares para mi blog de blogger
- Slideshow para blogger blogspot con etiquetas
- Slideshow para blogger manual nuevo estilo
- Slideshow para blogger nuevo estilo
- Slideshow vertical para usarlo en blogger
- Widget Slider galería de imágenes acordeón para blogger
- Widget para blogger, Slideshow con Entradas Populares
- Slideshow para Blogger
- Slideshow con entradas populares nuevo estilo
- Instalar un Slideshow con un solo widget
Bueno vamos a trabajar
1 Ir a blogger
2 Da un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript”
ábrelo e inserta las siguientes líneas de código en su interior
<style
type="text/css">
#slides
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides
ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides
ul{height:250px}
#slides
li{width:49.9%;height:100%;position:absolute;display:none}
#slides
li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides
li:nth-child(4){display:block}
#slides
li:nth-child(1){left:0;top:0}
#slides
li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides
li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides
li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides
a{display:block;width:100%;height:100%;overflow:hidden}
#slides
img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#229322;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides
.overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg.png);background-position:50%
50%;background-repeat:repeat-x;border:4px solid #229322;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides
h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0
10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides
li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides
.label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides
li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides
.overlayx,#slides li{-webkit-transition:all .4s
ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s
ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s
ease-in-out}
#slides
li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin:
5px auto;text-align: center;background:#229322;width: 10%;}
#buttons
a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons
a::before{content:"";width:0;height:0;border-width:8px
7px;border-style:solid;border-color:transparent #535353 transparent
transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons
a#nextx::before{border-color:transparent transparent transparent
#535353;margin-left:-3px}
@media
only screen and (max-width:600px){
#slides ul{height:600px}
#slides
li:nth-child(1){width:100%;height:49.8%}
#slides
li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
#slides
li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
#slides
li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div
id="featuredpost"></div>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"></script>
<script
src="http://yourjavascript.com/1906523361/slider.js"
type="text/javascript"></script>
<script
type='text/javascript'>
//<![CDATA[
$(document).ready(function
() {
FeaturedPost({
blogURL:"http://ayudadeblogger.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
|
Realiza este cambio:
Ahora solo basta con borrar el link que
esta marcado de color azul http://ayudadeblogger.com/
y poner ahí el link de tu blog de blogger.
Si quieres aumentar el número de post
que se muestren en tu slider, tienes que borrar el número 8 que esta marcado de color rojo y
poner el número que tú quieras
Además si quieres cambiar el color del
slideshow solo tienes que encontrar los tres códigos que están marcados de
color verde 229322
y poner el código de color que tú quieras.
Eso es todo, ahora dale un clic en “Guardar”
y ubícalo en la cabecera principal.
Fácil verdad!
¿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
15 comentarios: