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
Comentarios
Disqus comments:
Google+ comments:
Facebook comments: