Slider automático para mostrar las ultimas entradas en blog de blogger | Sliders

Code CSS

Puedes poner este codigo en una hoja de estilo o en un  ]]></b:skin>

/* Easy Slider (Automático)

-------------------------------------------------------------------- */

#slide-container {

width:480px;

height:320px;

position:relative;

}

#slider {

width:480px;

height:320px;

left:25px;

overflow-x:hidden;

overflow-y:hidden;

position:relative;

}

.slide-desc {

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxT3JCjkcHA-rUcci0Cppx-tmYQI2pDMWPcNrU1QJ_9U-phWuNJXaHvaBzcrF5u8mdgYlFHAUCsPPgQjmJUmIiy6EmDaR-sTPvQYaovBxFPdfBVxmcGgGBFDm7BE9iQHgPLTsgWw1Tjek/s30/bgtransparent.png) repeat scroll 0 0;

color:#FFFFFF;

padding:10px;

position:absolute;

text-align:left;

bottom:0;

width:100%;

z-index:99999;

}

.slide-desc h2{

display:block;

color:#f2f2f2;

font-size:14px;

}

.crosscol .widget-content {position:relative;}

#slider ul, #slider li {

margin:0;

padding:0;

list-style:none;

}

#slider li {

width:480px;

height:320px;

overflow:hidden;

}

#prevBtn, #nextBtn {

display:block;

width:30px;

height:77px;

position:absolute;

left:-30px;

text-indent:-9999px;

top:71px;

z-index:1000;

}

#nextBtn {

left:500px !important;

}

#prevBtn, #nextBtn {

display:block;

left:0;

position:absolute;

top:132px;

width:30px;

height:77px;

z-index:1000;

}

#prevBtn a, #nextBtn a {

display:block;

position:relative;

width:30px;

height:77px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdNLWIKHUdHCSUOEfHVH1EFURZGcOpwcMIMozrDS1hxZFFvVFM9-APi0Rz2I4Mj37E_4rnnAoNRMaHeVgGwYZez9k4num0K7uLOLMKJi-VrSSZPEUC-kB6J9B5-vzkEc7MdmE-rCODBcA/s77/flecha-prev.png) no-repeat 0 0;

}

#nextBtn a {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkeEXuLZf4a1TksJrYrWG5uWu4f8gMVt5RTfjML4ab3Ug8TlyfZjB1wTMDk-kc2sDBuvlFbpEtl6p0IyQvuSrARj3H14R8jNtweNGEt3FuM3_l8xN-TNhZomnJBqTnbD7gJVoSiXKLuVk/s77/flecha-next.png) no-repeat 0 0;

}

/* Estilos de los números */

ol#controls{

margin:8px 25px;

padding:0;

height:28px;

}

ol#controls li{

margin:0 4px 0 0;

padding:0;

float:left;

list-style:none;

height:28px;

line-height:28px;

}

ol#controls li a{

float:left;

height:28px;

line-height:28px;

border:1px solid #000; /* Borde de los números */

background:#0B243B; /* Color de fondo de los números */

color:#fff; /* Color de los números */

padding:0 10px;

text-decoration:none;

}

ol#controls li.current a{

background:#5DC9E1; /* Color de fondo del número activo */

color:#fff; /* Color del número activo */

}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

Code JAVASCRIPT antes de </head>

Debes pegar este codigo antes de </head>

<script>

//<![CDATA[

var showpostthumbnails_gal = true;

var showpostsummary_gal = true;

var random_posts = false;

var numchars_gal = 150;

var numposts_gal = 10;

function showgalleryposts(json) {

var numPosts = json.feed.openSearch$totalResults.$t;

var indexPosts = new Array();

document.write('<ul>');

for (var i = 0; i < numPosts; ++i) {

indexPosts[i] = i;

}

if (random_posts == true){

indexPosts.sort(function() {return 0.5 - Math.random()});

}

if (numposts_gal > numPosts) {

numposts_gal = numPosts;

}

for (i = 0; i < numposts_gal; ++i) {

var entry_gal = json.feed.entry[indexPosts[i]];

var posttitle_gal = entry_gal.title.$t;

for (var k = 0; k < entry_gal.link.length; k++) {

if ( entry_gal.link[k].rel == 'alternate') {

posturl_gal = entry_gal.link[k].href;

break;

}

}

if ("content" in entry_gal) {

var postcontent_gal = entry_gal.content.$t

}

s = postcontent_gal;

a = s.indexOf("<img");

b = s.indexOf("src=\"", a);

c = s.indexOf("\"", b + 5);

d = s.substr(b + 5, c - b - 5);

if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {

var thumburl_gal = d

} else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5C0ETUGw-PVKym5sIqfHyhgHVmcY6DCWppVbr75fb-ReIk42DoqStoABDp1TdKxHM1aehxY6KihEQel-32Bk9qHJDAT9bbtQ8aQtb85NSkBa_9f6jbdGu8ic4DxZp-WWNyPvKzx1btW4/s0/sin-imagen.png';

document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');

document.write(posttitle_gal + '</h2>');

var re = /<\S[^>]*>/g;

postcontent_gal = postcontent_gal.replace(re, "");

if (showpostsummary_gal == true) {

if (postcontent_gal.length < numchars_gal) {

document.write(postcontent_gal);

document.write('</span>')

} else {

postcontent_gal = postcontent_gal.substring(0, numchars_gal);

var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");

postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);

document.write(postcontent_gal + '...');

document.write('</span>')

}

}

document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="320"/></a></div>');

document.write('</li>');

}

document.write('</ul>');

}

//]]>

</script>

Code JAVASCRIPT antes de </body

Debes pegar este codigo antes de </body>

<script>

//<![CDATA[

var showpostthumbnails_gal = true;

var showpostsummary_gal = true;

var random_posts = false;

var numchars_gal = 150;

var numposts_gal = 10;

function showgalleryposts(json) {

var numPosts = json.feed.openSearch$totalResults.$t;

var indexPosts = new Array();

document.write('<ul>');

for (var i = 0; i < numPosts; ++i) {

indexPosts[i] = i;

}

if (random_posts == true){

indexPosts.sort(function() {return 0.5 - Math.random()});

}

if (numposts_gal > numPosts) {

numposts_gal = numPosts;

}

for (i = 0; i < numposts_gal; ++i) {

var entry_gal = json.feed.entry[indexPosts[i]];

var posttitle_gal = entry_gal.title.$t;

for (var k = 0; k < entry_gal.link.length; k++) {

if ( entry_gal.link[k].rel == 'alternate') {

posturl_gal = entry_gal.link[k].href;

break;

}

}

if ("content" in entry_gal) {

var postcontent_gal = entry_gal.content.$t

}

s = postcontent_gal;

a = s.indexOf("<img");

b = s.indexOf("src=\"", a);

c = s.indexOf("\"", b + 5);

d = s.substr(b + 5, c - b - 5);

if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {

var thumburl_gal = d

} else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5C0ETUGw-PVKym5sIqfHyhgHVmcY6DCWppVbr75fb-ReIk42DoqStoABDp1TdKxHM1aehxY6KihEQel-32Bk9qHJDAT9bbtQ8aQtb85NSkBa_9f6jbdGu8ic4DxZp-WWNyPvKzx1btW4/s0/sin-imagen.png';

document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');

document.write(posttitle_gal + '</h2>');

var re = /<\S[^>]*>/g;

postcontent_gal = postcontent_gal.replace(re, "");

if (showpostsummary_gal == true) {

if (postcontent_gal.length < numchars_gal) {

document.write(postcontent_gal);

document.write('</span>')

} else {

postcontent_gal = postcontent_gal.substring(0, numchars_gal);

var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");

postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);

document.write(postcontent_gal + '...');

document.write('</span>')

}

}

document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="320"/></a></div>');

document.write('</li>');

}

document.write('</ul>');

}

//]]>

</script>

Code HTML que va en el body

Este codigo pegalo en la seccion BODY

<div id="slider">
<script style="text/javascript">//<![CDATA[
var numposts_gal = 10; // Número de entradas a mostrar
var numchars_gal = 150; // Número de caracteres en el resumen
var random_posts = false; // Cambiar por true si se quieren aleatorios
</script>
<script src="http://todoweb1.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999">//]]></script>
</div>

Cambia el nombre de tu blog donde se indica y listo.
Si deseas cambiar las medidas del slider cambia todos los width:480px; y height:320px; que encuentres.
Las flechas son imagenes, así que si deseas modificarlas en color o forma tendrás que cambiar las URLs que se encuentran en el primer código.

About TWN

Tecnología Web y Noticias. Podrás encontrar una gran variedad de cosas sobre el mundo Tecnológico.