FOTOMILKS: Tutorial como insertar un slider carrusel en blogger

Tutorial como insertar un slider carrusel en blogger

http://www.ayudadeblogger.com/2013/10/tutorial-como-insertar-un-slider-carrusel-en-blogger.html

Tutorial para blogger, como insertar un slider carrusel en blogger simples pasos? Es la pregunta que todo mundo hace en google, bueno para concretar esta respuesta, voy a explicar con un simple código como realizar este grandioso truco para blogger y así poderlo implementar en nuestro blog de blogger. Los slider carrusel sirven para mostrar nuestras categorías que queremos dar a conocer a nuestros usuarios que visitan nuestro blog de blogger y así promocionar nuestros post. Lo que vamos hacer es insertar un simple código en un widget y realizar algunos cambios, en las imágenes en las URLs que se dirigirán hacia los post que quieran mostrar. Las imágenes que vayan a insertar en el slider carrusel tienen que tener la misma dimensión, por ejemplo, todas las imágenes tienen que tener el mismo tamaño como 400x300 o 300x200 etc. Si los tamaños de las imágenes no son iguales no se mostrara correctamente el slider carrusel, así que primero deberán asegurarse de que sus imágenes tengan la misma dimensión.

Anteriormente publique algunos Slider Carrusel para blogger, de los cuales les dejo los enlaces

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

Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript” ábrelo

5 Ingresa las siguientes líneas de código en su interior

.flex-container a:active,

.flexslider a:active,

.flex-container a:focus,

.flexslider a:focus{

outline:none;

}

.slides,

.flex-control-nav,

.flex-direction-nav{

margin:0;

padding:0;

list-style:none;

}

/* FlexSlider Stilos****/

.flexslider{

margin:0;

padding:0;

}

.flexslider .slides > li{

display:none;

-webkit-backface-visibility:hidden;

-moz-backface-visibility:hidden;

-ms-backface-visibility:hidden;

-o-backface-visibility:hidden;

backface-visibility:hidden;

}

/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img{

width:100%;

display:block;

}

.flex-pauseplay span{

text-transform:capitalize;

}

/* Clearfix for the .slides element */

.flexslider a.intro {

bottom:0;

color:rgba(0, 0, 0, 0.1);

font-size:14px;

position:absolute;

right:0;

text-decoration:none;

z-index:99999;

}

.slides:after{

content:".";

display:block;

clear:both;

visibility:hidden;

line-height:0;

height:0;

}

html[xmlns] .slides{

display:block;

}

* html .slides{

height:1%;

}

/* No JavaScript Fallback */

/* If you are not using another script, such as Modernizr, make sure you

* include js that eliminates this class on page load */

.no-js .slides > li:first-child{

display:block;

}

/* FlexSlider Default Theme ******/

.flexslider{

margin:0 0 60px;

background:#fff;

border:4px solid #fff;

position:relative;

-webkit-border-radius:4px;

-moz-border-radius:4px;

border-radius:4px;

-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);

-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);

box-shadow:0 1px 4px rgba(0,0,0,.2);

zoom:1;

}

.flex-viewport{

max-height:2000px;

-webkit-transition:all 1s ease;

-moz-transition:all 1s ease;

-o-transition:all 1s ease;

transition:all 1s ease;

}

.loading .flex-viewport{

max-height:300px;

}

.flexslider .slides{

zoom:1;

}

.carousel li{

margin-right:5px;

}

/* Direction Nav */

.flexslider li {

border: 0 none !important;

padding: 0 !important;

text-indent: 0 !important;

}

.flex-direction-nav a{

width:30px;

height:30px;

margin:-20px 0 0;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxb890U-3a2WKAXeyIhRYl2IMxPq0Cy3fketnptVWqwqG9BMc91ib683KggMmJdIvKCypXDKD94qpLlndmb9U7EmSumfZCZZWAfqH4Pa516M1D309d7IQ9cush__abNmlcN8be9rY1s7M/s1600/ayudadeblogger.PNG) no-repeat 0 0;

position:absolute;

top:50%;

cursor:pointer;

text-indent:-9999px;

opacity:0;

-webkit-transition:all .3s ease;

-moz-transition:all .3s ease;

-o-transition:all .3s ease;

transition:all .3s ease;

}

.flex-direction-nav .flex-next{

background-position:100% 0;

right:-36px;

}

.flex-direction-nav .flex-prev{

left:-36px;

}

.flexslider:hover .flex-next{

opacity:0.8;

right:5px;

}

.flexslider:hover .flex-prev{

opacity:0.8;

left:5px;

}

.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{

opacity:1;

}

.flex-direction-nav .disabled{

opacity:.3!important;

filter:alpha(opacity=30);

cursor:default;

}

/* Control Nav */

.flex-control-nav{

width:100%;

position:absolute;

bottom:-40px;

text-align:center;

}

.flex-control-nav li{

margin:0 6px;

display:inline-block;

zoom:1;

*display:inline;

}

.flex-control-paging li a{

width:11px;

height:11px;

display:block;

background:#666;

background:rgba(0,0,0,0.5);

cursor:pointer;

text-indent:-9999px;

-webkit-border-radius:20px;

-moz-border-radius:20px;

border-radius:20px;

-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);

-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);

box-shadow:inset 0 0 3px rgba(0,0,0,0.3);

}

.flex-control-paging li a:hover{

background:#333;

background:rgba(0,0,0,0.7);

}

.flex-control-paging li a.flex-active{

background:#000;

background:rgba(0,0,0,0.9);

cursor:default;

}

.flex-control-thumbs{

margin:5px 0 0;

position:static;

overflow:hidden;

}

.flex-control-thumbs li{

width:25%;

float:left;

margin:0;

}

.flex-control-thumbs img{

width:100%;

display:block;

opacity:.7;

cursor:pointer;

}

.flex-control-thumbs img:hover{

opacity:1;

}

.flex-control-thumbs .active{

opacity:1;

cursor:default;

}

</style>

$(document).ready(function(){

$(window).load(function() {

$('.flexslider').flexslider({

animation: "slide",

animationLoop: false,

itemWidth: 210,

itemMargin: 0,

minItems: 1,

maxItems: 4

});

</script>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7aYUPk6WSVXZ7adNuN7yYJx7gf-Ws1KNeD-ZJVrQyNnhdExavDTsurcckeI-lvvnHT1D-6GgpoktQioMytb9BfX1-7A0SdbIQFV3dvE9Wl-pe67utPNYsgsAAX0dR6NUzN7wgCUEL_m8Q/s1600/ayudadeblogger+1.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEwiR6KSt5xo3VecvVjx7zH3F8C1ZMOp0nJ4cBAlJl2eoUDysSe8LdPpB6NQKm8JvtyYFVNFZQlK_525-yTTzKK6wXUnFaI3x8MALPdAIThxNaLt7OklVh9zVY7SZeeg_RCAmLl1crMtxk/s1600/ayudadeblogger+2.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDeE5sbbb_PM6rqZ5cs-7Jdo6K_CJL_o8WlMmfR-SVOU9SS6_EiRbnoB3nKuMQNSbrePxsyUjsZqydUJSAp5kEEyOKLIm0UHEre8O2Ca-UqK_ADMXJDtykdm2-a5wqkEkmcyTN2eU1TRMC/s1600/ayudadeblogger+3.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQPgV9Nlr0YR4B8yncnUS-O4w9giFyiWkj0gs6XKMJahHv77XfWw_G0EfvYexwSEf_jckVR4ZsQMae6qR8e-Vq0f0-R5RK4LAalCjKO4jvTX1CkoTvMzn1i5dNL59KmQ6tDsVMPgHnX97i/s1600/ayudadeblogger+7.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGL34PfHv_brSLhBWkAhQibFRm3ISoLvxciMadHEQm5nbIYZ3tk69jARIlc9WL0goUhbbcepfTItXMmCHEG08S30xlwS1OqPqSt2wdP_7pQfaE164ymHPY8H-kyXSG9V0lxkJF-YHM3x3k/s1600/ayudadeblogger+4.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV3DcBqk3ZQaQOO23npHCT6Wdu8ZzNsLqpqrB_YxrGgMoVF4OvpFJhGRMTurHsHL6G4CbXv2CIrRpfodQqa0O8JBLlCurKcphbCn7X_fD6RMShV1z7ymlYBRbnBpqrpxpUE2cXcP7z_FET/s1600/ayudadeblogger+5.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYjtZjjvRx46JVtDn0jVGuqgqnoU4jNhBhdiaR_cT4-wccQ28CTwkW5oXf4Di3al1tcL1WDotW6gtN1yr8FgH8hNp6h78A3CdOI8A5yZo4rXtHyUOIwQ9BzuhJaONpRV5N_u2az5rDdsqm/s1600/ayudadeblogger+6.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

</li>

<li>

</li>

<li>

<a href=" AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEwiR6KSt5xo3VecvVjx7zH3F8C1ZMOp0nJ4cBAlJl2eoUDysSe8LdPpB6NQKm8JvtyYFVNFZQlK_525-yTTzKK6wXUnFaI3x8MALPdAIThxNaLt7OklVh9zVY7SZeeg_RCAmLl1crMtxk/s1600/ayudadeblogger+2.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href=" AQUÍ LA DIRECCION URL "><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7aYUPk6WSVXZ7adNuN7yYJx7gf-Ws1KNeD-ZJVrQyNnhdExavDTsurcckeI-lvvnHT1D-6GgpoktQioMytb9BfX1-7A0SdbIQFV3dvE9Wl-pe67utPNYsgsAAX0dR6NUzN7wgCUEL_m8Q/s1600/ayudadeblogger+1.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

</li>

</ul>

</div>

Realiza estos cambios:

He marcado de tres diferentes colores en los lugares que ustedes deberán realizar sus diferentes cambios

Cambia donde dice AQUÍ LA DIRECCION URL e inserta la dirección URL del post que quieras dar a conocer

Borra todas las URLs que están marcadas de color rojo, esas direcciones son las responsables de mostrar las imágenes en el slider carrusel, recuerda insertar la URL de la imagen y que tengan todas las mismas dimensiones.

Borra donde dice La descripción del texto aqui e ingresa el título del post que quieras dar a conocer en el slider carrusel

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo Slider Carrusel debajo de la cabecera principal de tu blog de blogger.

VERSION 2:

Quieres insertar un Slider Carrusel en tu blog de blogger y no sabes cómo hacerlo o tal vez ya lo hiciste y te produce un error en el código o no sabes muy bien cómo funciona este truco para blogger!Ayudadeblogger.com te presenta un 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.

Como insertar un Slider Carrusel en blogger

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/AVvXsEi9GXrS9DZfxHCYuMMbbrsNqoV7-4pYNVioCyaROdvvHhNLcFjajGANhkyuRWTBmI3m2pSv13ygEzJIVulNUmqnOePrLMRYa3NYVOI46f-vc26D52vMRLAX29dj1zkisOZK6QF0aAnkmEmV/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/AVvXsEi9GXrS9DZfxHCYuMMbbrsNqoV7-4pYNVioCyaROdvvHhNLcFjajGANhkyuRWTBmI3m2pSv13ygEzJIVulNUmqnOePrLMRYa3NYVOI46f-vc26D52vMRLAX29dj1zkisOZK6QF0aAnkmEmV/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

//<![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}

//]]>

</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 class='judul'>Slider Carrusel</div>

<ul>

document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");

</script>

</ul><div class='clear'/>

</div>

</div>

(function($) { $(document).ready(function(){

$("#carousel .container").jCarouselLite({

auto:0,

scroll: 1,

speed: 400,

visible: 5,

start: 0,

circular: false,

btnPrev: "#previous_button",

btnNext: "#next_button"

});

})})(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

FOTOMILKS

sábado, 1 de noviembre de 2014

Tutorial como insertar un slider carrusel en blogger

Tutorial como insertar un slider carrusel en blogger

VERSION 2:

No hay comentarios:

Publicar un comentario

fondo animado de http://redeando.blogspot.com.es/2012/02/tu-blog-con-fondo-de-colores-animado.html

PACMAN

FOTOMILKS