Slider Carrusel con las 12 últimas publicaciones

Slider Carrusel con las 12 últimas publicaciones

Ayudadeblogger.com 

(NOTA:  no lo he probado todavía.)

Espectacular Slider Carrusel para que lo utilices en tu blog de blogger de una forma rápida y sencilla, la cual no le causara ningún error en la estructura de tu plantilla. Este nuevo Slider Carrusel para blogger funciona perfectamente en todos los navegadores web como, Google Chrome, Internet Explorer, Firefox etc. Lo que va a mostrar nuestro Slider Carrusel será las 12 últimas publicaciones que hayamos publicado en nuestro blog de blogger, con esto aumentara las vistas de los usuarios que visitan su blog. Una forma muy útil para los blogs. Bueno no voy hacer muy larga esta explicación.

A continuación mire su demostración en mi blog de demos

Les gusto 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 arriba del código que encontraste

#carousel {background:url();width: 970px; position: relative; float: left; margin:0 0 10px 0;height:230px;overflow:hidden;} #carousel .judul{margin-left:10px;font:18px Oswald;padding:5px;color:#422929} #carousel .container {position: absolute;left: 0px;width: 970px;overflow:hidden;} #carousel ul{width:10000px;position: relative;overflow:hidden;margin-top:0px;} #carousel ul li {display: inline; float: left; margin:1px 0px 2px 10px; padding:1px; width: 180px; overflow: hidden;height:178px} #carousel .thumb{height:128px;width: 170px;background:#fff;padding:4px;border:1px solid #ccc;box-shadow:0 0 4px #bbb;-moz-box-shadow:0 0 4px #bbb;-webkit-box-shadow:0 0 4px #bbb;} #carousel  #previous_button { position: absolute; top:8px;right: 39px; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dD7vEtwQd-2b7-OI8lZ3XL4QTnGiLdo_2xBjPkHGZwPoWkXs3cJUzZP-C5CSbMGunMeOtjEApaPn-xnvl10tRiuNfRxtkVHrRcHZCxXoJdhi12HAgNmi2lTf6obvbCHhqFot1W375Uky/s1600/paginate.png) no-repeat; background-position: 0 0; } #carousel #next_button { position: absolute; top:8px; right:10px; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dD7vEtwQd-2b7-OI8lZ3XL4QTnGiLdo_2xBjPkHGZwPoWkXs3cJUzZP-C5CSbMGunMeOtjEApaPn-xnvl10tRiuNfRxtkVHrRcHZCxXoJdhi12HAgNmi2lTf6obvbCHhqFot1W375Uky/s1600/paginate.png) no-repeat; background-position: -27px 0; } #carousel #next_button:hover, #previous_button:hover { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } #carousel ul li a.slider_title{color:#422929;display:block;text-align:center;font:bold 12px Arial;margin-top:8px} #carousel ul li a.slider_title:hover{color:#111} /* Slide Content ----------------------------------------------- */ .slide1-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left; word-wrap: break-word; overflow: hidden;} .slide1 ul {list-style:none;margin:0;padding:0;} .slide1 .widget {margin:0} #bot-wrapper {padding-top:10px;width:970px;float:left;word-wrap:break-word;overflow:hidden} #bot1-wrapper{width:620px;float:left;word-wrap:break-word;overflow:hidden} #bot2-wrapper{padding-left:10px;width:340px;float:right;word-wrap:break-word;overflow:hidden} .bot .widget,.bot1 .widget,.bot2 .widget{margin:0;padding:0 0 8px} .bot ul,.bot1 ul,.bot2 ul {list-style:none;margin:0 0 0;padding:0 0 0;}

5 Busca este otro código

</head>

Inserta el siguiente código justo arriba del código que encontraste

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> <script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ imgr=new Array();imgr[0]=" ";showRandomImg=true;aBold=true;summaryPost = 100;summaryPost1 = 200;numposts=6;numposts1=10;numposts2=6;numposts6=3;Title1="Adventure";Title2="Action";Title3="Bike Game";Title4="Dress-Up";Title5="Strategy";Title6="Sport Game";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s} function showrecentposts0(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=m+' '+day+' '+y;var trtd='<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';document.write(trtd);j++}}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';document.write(trtd);j++}} function showrecentposts2(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'"><span class="play-dong"></span><img width="170" height="128" src="'+img[i]+'"/></a></div><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd);j++}} function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts2;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"><a href="'+posturl+'"><span class="play-button"></span><img class="column_img" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2></div>';document.write(trtd);j++}} //]]> </script>

Nota: Si ya utilizas un script jQuery ya no tendras que poner solo el código que esta marcado de color amarillo, y si no utilizas ningun jQuery inserta todo el código tal como esta

6  Ahora con mucho cuidado vamos a dar un clic en la pestaña que dice “Ir al widget”, mire la imagen

Y vamos a dar un clic en el “Header1” para que nos muestre el código directamente en donde tendremos que insertar nuestra última línea de código

Al dar un clic en “Header1” nos mostrara un código como el siguiente, mira la imagen

En este punto con calma vamos a buscar la última línea del cierre que dice </div> en el cual abajo de ella vamos a insertar el siguiente código

<div id='slide1-wrapper'>  <div id='carousel'> <div class='judul'>Slider Carrusel</div> <div id='previous_button'/> <div id='next_button'/> <div class='container'> <ul> <script> document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;); </script>         </ul><div class='clear'/> </div> <div class='clear'/> </div> <script type='text/javascript'>                                    (function($) { $(document).ready(function(){                                                $(&quot;#carousel .container&quot;).jCarouselLite({                                                                                                                                  auto:0,                                                                                                                       scroll: 1,                                                            speed: 400,                                                                visible: 5,                                                            start: 0,                                                            circular: false,                                                            btnPrev: &quot;#previous_button&quot;,                                                            btnNext: &quot;#next_button&quot;                                                });                                    })})(jQuery)    </script> </div>

Eso es todo ahora dale un clic en “Guardar plantilla”

Mira tu nuevo Slider Carrusel para blogger insertado debajo de la cabecera principal de tu blog de blogger