Slideshow con Entradas Populares Nuevo estilo
Es indispensable para cada blog de
blogger tener nuevos trucos y que funcionen, es por esto que les traigo un
nuevo Slideshow para blogger. Este Slideshow para blogger funciona con sus
entradas populares, la incrustación del código es muy simple de realizarlo,
solo deberán seguir mis instrucciones al pie de la letra y lo podrán obtener
completamente gratis. Los Slideshow son muy apetecidos por todos los bloggers, la
facilidad con que les voy a presentar este nuevo Slideshow para blogger es muy fácil,
Ayudadeblogger.com te ayudara con dos códigos, con el cual hará que se muestre
este Slideshow. Lo que vamos hacer es habilitar nuestro widget de Entradas
Populares, una vez que ya este habilitado, nos dirigiremos al Editor HTML de
nuestro blog para insertar dos códigos, eso es todo, esto hará que cambie nuestra
Entrada Popular a un Slideshow. El Slideshow se mostrara en nuestra pagina
principal, luego cuando habrán cualquier post ya no se mostrara, ya que esta
configurado para que se muestre solo en nuestra pagina principal de blogger.
Anteriormente publique algunos Slideshow
para blogger de los cuales les dejo los enlaces:
- 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
A continuación mire su demostración en
mi blog de demos
Te gusto!
Vamos a configurar nuestro Slideshow en
blogger
1 Ir a blogger
2 Da un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Una vez que hayas abierto un nuevo
gadget, tendrás que buscar el widget que dice “Entradas populares”, habilítalo y
luego le das un clic en “Guardar”, y ubícalo en la cabecera principal de tu
blog. Si ya tienes habilitado el widget de Entradas populares en tu blog, sáltate
este paso.
5 Ahora dale un clic en “Plantilla”
6 Luego un clic en “Editar HTML” una vez
que ya estas en el Editor HTML de tu plantilla, vas a encontrar un icono en la
parte de arriba del Editor la cual dice “Ir al widget”, tienes que dar un clic
en ese icono, y se te desprenderá todas las secciones de tu blog, en el cual tendrás
que dar un clic en “Entradas populares”, y te llevara a la posición del código de
tus Entradas populares, mira la imagen a continuación
En este punto deberás dar un clic en la
parte izquierda donde se encuentran los números de posición para que se muestre
todo el código de tu Entrada popular, mira la imagen a continuación:
Se te mostrar un código como el
siguiente:
<b:widget id='PopularPosts1' locked='false' title='Entradas
populares' type='PopularPosts'>
<b:includable
id='main'>
<b:if
cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content
popular-posts'>
<ul>
<b:loop
values='data:posts' var='post'>
<li>
<b:if
cond='data:showThumbnails == "false"'>
<b:if
cond='data:showSnippets == "false"'>
<!-- (1) No
snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show
only snippets -->
<div
class='item-title'><a
expr:href='data:post.href'><data:post.title/></a></div>
<div
class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if
cond='data:showSnippets == "false"'>
<!-- (3) Show
only thumbnails -->
<div
class='item-thumbnail-only'>
<b:if
cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a
expr:href='data:post.href' target='_blank'>
<img
alt='' border='0' expr:height='data:thumbnailSize'
expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div
class='item-title'><a
expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div
style='clear: both;'/>
<b:else/>
<!-- (4) Show
snippets and thumbnails -->
<div
class='item-content'>
<b:if
cond='data:post.thumbnail'>
<div
class='item-thumbnail'>
<a
expr:href='data:post.href' target='_blank'>
<img alt='' border='0'
expr:height='data:thumbnailSize' expr:src='data:post.thumbnail'
expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div
class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div
class='item-snippet'><data:post.snippet/></div>
</div>
<div
style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include
name='quickedit'/>
</div>
</b:includable>
</b:widget>
|
Realiza este cambio:
Borra todo el código que encontraste y remplázalo
por el siguiente código:
<b:widget id='PopularPosts2'
locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url ==
data:blog.homepageUrl'>
<style scoped='' type='text/css'>
#coin-slider-pop img {width: 100%;height:
300px;}
#coin-slider-pop {margin: 0
auto;}
.coin-slider { overflow: hidden;
zoom: 1; position: relative; }
.coin-slider a{ text-decoration:
none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding:
10px; float: left; }
.cs-buttons a { margin-left: 5px;
height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF;
text-indent: -1000px; }
.cs-active { background-color: #B8C4CF;
color: #FFFFFF; }
.cs-title {width: 97%;padding: 10px
1.5%;background-color: #000000; color: #FFFFFF;}
.cs-prev,
.cs-next { background-color: #000000;
color: #FFFFFF; padding: 0px 10px; }
</style>
<div class='widget-content popular-posts'>
<div id='coin-slider-pop'>
<b:loop values='data:posts' var='post'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img expr:alt='data:post.title' src='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif'/>
</b:if>
<span>
<strong><data:post.title/></strong>
<p><data:post.snippet/></p>
</span>
</a>
</b:loop>
</div>
<script type='text/javascript'>
//<![CDATA[
function resizeimage(e,b){var
c=document.getElementById(e),d=c.getElementsByTagName("img");for(var
a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b);d[a].width=b}}
resizeimage("PopularPosts2",630);
//]]>
</script>
<script src='http://yourjavascript.com/72231211327/coin-slider-min.js'
type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$('#coin-slider-pop').coinslider({width:630,height:300});
//]]>
</script>
</div>
</b:if>
</b:includable>
</b:widget>
|
Una vez hecho esto, presiona la tecla
Control seguido de la tecla F de tu teclado para que se muestre el buscador de
tu Editor HTML.
Busca este código
</head>
|
Arriba del código que encontraste
inserta las siguientes líneas de código
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b);d[a].width=b}} //]]> </script>
<script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('headEnd'); </script>
|
Eso es todo, ahora dale un clic en “Guardar
plantilla” y mira tu nuevo y espectacular Slideshow basado en Entradas
populares.
Felicidades ahora ya tienes un nuevo
Slideshow para blogger
Espero haber sido lo mas explicativo
posible, en este tutorial para blogger.
¿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
Amigo como le coloco el nombre de Lo Mas Visto? a este slideshow?
ResponderEliminarHola, no es posible...
EliminarBuenas.. Me encanta tu blog, siempre paso a ller tus articulos.. Pero esta vez tengo una duda y me atrevo a escribirte por aqui ya que no veo algun post similar.. Tienes alguna idea de como controlar el tamaño de las imagenes que agregamos en los gadgets de Blogger "Imagen".. El mismo se ajusta automaticamente al ancho que decidimos que tenga la barra latera, y no quiero que quede asi!
ResponderEliminarDesde ya gracias por todo, ya que sin saberlo, me haz sido de gran ayuda siempre!
Hola enviame la direccion de tu correo electronico para poder enviarte el codigo que necesitas,y explica en tu mensaje que es lo que necesitas..
EliminarSaludos.
Necesito simplemente poder controlar el tamaño de las imagenes que agrego en los gadgets, no que se reduzcan automaticamente en relacion al ancho de las barras laterales. valeforlan@hotmail.com
EliminarMi primera pregunta, necesitas saber si tu cargas la imagen a un widget y luego lo pones en tu sidebar..
EliminarResponde saludos.
Luis quiero felicitarte por la informacion que nos prestas a traves de tu blog...Es impresionante la informacion y muy practica....Que tengas muchos mas exitos.....
ResponderEliminarBuenas, he estado haciendo el tutorial y bueno, no estoy contento con el resultado, lo noto bugueado, es decir el fondo se queda raro y tambien me gustaria que la imagen que sale en las entradas populares no salga en mosaico, gracias y espero respuesta.
ResponderEliminarVisita mi blog para que veas como quedo.
http://elblogdeabramsm1a2.blogspot.com.es/
¿qué puuedo hacer?
Hola he visto tu blog, el problema es que las imagenes que tienes publicado en tu blog son pequeñas, como minino una imagen debe tener entre 350x350 pixeles, es por eso que te sale en mosaico..
EliminarSaludos.
aaaaa, ok ahora las publicare con mayor tamaño, gracias
Eliminaramigo hice todos los pasos en mi blog pero las imagenes no las muestra solo los link el fondo qda gris http://lazonalternativa.blogspot.com/ mi correo es josealberto525@gmail.com
ResponderEliminarHola he visto tu blog, el problema es que no estas subiendo tu mismo las imaganes y las estas copiando desde otra pagina externa, mira he visto que tienes imaganes incrustadas de otros sitios web como esta: http://www.tandildiario.com/thumb/63449/280-194-92/0003405258.jpg: el cual te da problemas al mostrar la imagen en tu blog, sube la imagen desde tu PC a blogger en tu entrada has eso en todas y veras que te funciona.
EliminarSaludos.
Hola. Lo he integrado y ha quedado estupendo, pero un poco grande. Es posible cambiar el tamaño?
ResponderEliminarMi Blog para ver el resultado: http://almoradi1829.blogspot.com.es/
Gracias.
Hola he visto tu blog y el slideshow esta perfecto. y en este punto es en donde podras cambiar el tamaña: {width:630,height:300}
EliminarSaludos.
hola yo lo que quiero cambiar es el numero de entradas que solo me muestre 5 no mas aunque si publico ams al dia solo quiero que muestre 5 es posible? un saludo y espero pronta repuesta me urge gracias
ResponderEliminarIngresas a "Diseño" de tu blog y buscas el widget de “Entradas populares” lo abres yhabilitas solo el numero 5, eso es todo
EliminarSaludos
muchisimas gracias perdon mi ignorancia :) que padre contar con alguien que ayuda desinteresadamente
EliminarHola amigo, esta muy interesante y muy util este slideshow, gracias por compartirlo amigo! una pregunta, como podria hacer que este slideshow se vea pero no en un widget, si no en una de las paginas de blogger? intente mover los divs pero no se ve nada.
ResponderEliminarEpsero tu respuesta! Gracias