Como saber hacer un Slideshow Carrusel basado
en etiquetas para blogger
En este tutorial voy a mostrar como crear un sencillo de cómo crear un slidershow carrusel automático basado en sus
etiquetas para uso exclusivo en blogger. Todo lo que necesitaran hacer es solo sustituir un
nombre con su propia etiqueta y el regulador del slider carrusel esto tambien funcionará
sobre la base de la etiqueta que se agrega en la Edicion de HTML.
El uso de este slider
carrusel es muy sencillo y sólo utilizaran un guión de jCarousellite sin la
adición de efectos de aceleración o rueda del ratón. Los efectos son automáticos
y para realizar este truco es muy simple. En mis publicaciones anteriores
publique algunos tipos de Slideshow automáticos que sirven para mostrar sus
ultimas entradas de blogger, les dejo algunos de los enlaces para que los vean.
- Iniciar nuestra cuenta de bloger
- Hacer click en el boton plantilla y otro en editar HTML
- SIGUIENTE se habrira la plantilla de edicion como se muestra en la imagen
En este punto deberás presionar la tecla “CONTROL ” de tu teclado seguido de la tecla “F” para de esta manera aparece el bucador integrado de la edicion html en la parte superior derecha , 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.- tienes que pegar Copialo con CONTROL + C y Pegalo con CONTROL + v
copia este codigo ]]></b:skin> y pegalo en el buscador de la plantilla editora
- Inserta encima de ]]></b:skin> El siguiente codigo /* Slideshow carrusel create by www.xdquequeressaber.blogspot.com----------------------------------------- */#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFXY1bagDO_CazvorVrLO85HX8-bKOvHmpb8O-fhgs4dqP1OF80Gib2meCnAup-39rHr3eGNI4jo1uznFGHIakOHN7v8bYHz1Q2GpUAr4inDFwIDnbRa5PbWPuvlA2vaLhsgg2p6ROXUA/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6XDDCoVsz_i_amzJV_ZRUF6QxOqzmcwzJ-SI8nSZQ_jGSTl05VBTxWKiDfn1NE_owgFVFZThz412bTac7mNPz1soUD0zDdNABJ7d5yzsyyze4U5obo61NvJA7MyttOdLCMEOAD2KtNHI/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-wN9umdywD_V18pBPQv5yllvdOArer3Npn6ujjs2WSKrnEwQz0DN0clnZk6gres1TorbHfaYkv4Ln0EOJZFcFrAzL_5PwMZXr1TrQrMlOJxIBg0eqUA5pwPVTjJ5XNkDTNxRpL6qFx2U/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFav-Bk9QeyPGHwc7jeQFnd18dVttfkpBmxKSzbsFhtQjR4lTP3tPc2AtjPAJ2f9CPrE7GpeAf7qn7dSGJrpGOq_XZkdYYU8PG6DCLRJYMiioBWIirG4r1JY2PpF29IXNTWDyWaIFozSs/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1d3XvcQ0NAq1Lpo5RTjXzbv_rjgzT8jM6BUmjzBQS4iCIckhvv6zgsYx-M02CFvs7TPiG4RRi1HUQtPXo0FVj3YB-wbo3OKSiMgVNSo0QNao0X74-ShrSoKWhnsNbwwZTc-m4CqIzjfA/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEVbjV3fC8nTjkPnAk2QN3B8dFhkqoqLhyVMtMrcb51QFlANITGY1EKGMM0m3pzSncjZMgHWZtegyhB5lmH8f6nl7jCyWuF3-PiHuKHZPN8Ae7MBTZHgSDqRMs3dRVK4af3DnIStBEC8U/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}7. Mira los números que están marcados de color azul width:950px;height:185px,los podrás editar por la anchura y la altura que quiera mostrar en su blog. Esto sirve para hacerle más grande o más pequeño a nuestro Slider Carrusel.8.Ahora busca este codigo de la misma manera que antes </head> y pega ensima el siguiente codigo<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/30533011062/jCarouselLite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDzJ062Wqe0waw7opZ-l4NbqJoocdr371jFyLW_D2zQZ4-78L-24XlGfHKuZn0_S_mBU-FhoLMmyciXF1dI4avmidFA1CmD5wbdtXVqsxGKZVOxEVeSU92KK0uryNwibcncHcV4wO269w/s1600/www.kizoa.com_collage_2014-03-31_10-20-21.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 10;
label1 = "Widgets carrusel";
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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
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+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>9.Ahora busca este código de la misma manera
<b:if cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if>10.Hora Dale un clic en “Guardar plantilla” y listo mira tu nuevo y renovado Slider Carrusel en tu blog de blogger.Espero les alal sido de ayuda este tutorial ,cualquier consulta no ducen en preguntar o conectarse con las redes sociales facebook
