En los últimos tiempos se están poniendo de moda las plantillas tipo "magazine" para Blogger; en esas plantillas suele haber un carrusel o "slide" de fotos que gráficamente queda muy bien.
Demo
Me han preguntado como ponerlo en un blog. Vamos a ver como hacerlo.
Primero antes de ]]></b:skin> pegar:
#myslides{background:#2c3133;}
.stepcarousel{position: relative; /*no tocar*/
overflow: scroll; /*no tocar*/
width: 950px; /*Anchura total del carrusel*/
height: 165px; /*Altura total del carrusel */
margin: 0px 14px 5px 14px;
background:#2c3133;
}
.stepcarousel .belt{
position: absolute; /*no tocar*/
left: 0;top: 0;
}
.stepcarousel .panel{
float: left; /*no tocar*/
overflow: hidden; /*no tocar*/
margin: 10px 17px ; /*margen de cada foto*/
width:220px; /*Anchura de cada foto*/
background:#202325;
height:140px;
border:1px solid #393f42;
}
.stepcarousel .panel p{
text-align: left; /*no tocar*/
overflow: hidden; /*no tocar*/
margin: 5px 5px ; /*margen de cada foto*/
}
.stepcarousel .panel h2{
text-align: left; /*no tocar*/
height:20px;overflow: hidden; /*no tocar*/
margin: 2px 5px ; /*margen de cada foto*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*no tocar*/
background:#040404; /*fondo de la imagen*/
margin: 10px 10px 10px 10px; /*margen de cada foto*/
padding:0px 0px;
}
Aquí deberiamos modificar ancho, alto, background, etc. para adaptarlo graficamente a nuestro blog.
Segundo, antes de
</head> pegar:
<script src='URL TU ALOJAMIENTO DE jquery.js' type='text/javascript'/>
<script src='URL TU ALOJAMIENTO DE slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--sfHover = function() {var sfEls = document.getElementById("menu").getElementsByTagName("LI");var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=" sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" sfhover\\b"), "");}}}if (window.attachEvent) window.attachEvent("onload", sfHover);//--><!]]></script>
Los
ficheros .js se pueden descargar
aquí.
Tercero, poner lo siguiente donde queramos poner el Carrusel (normalmente estará bien antes de
<div id='content-wrapper'>) :
<!-- Casing -->
<div id='casing'>
<!-- Myslides -->
<div id='myslides'>
<script type='text/javascript'>
stepcarousel.setup({galleryid: 'mygallery', //id of carousel DIVbeltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVspanelclass: 'panel', //class of panel DIVs each holding contentpanelbehavior: {speed:500, wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 2, leftnav: ['http://web2feel.com/images/rem1.jpg', -14, 60], rightnav: ['http://web2feel.com/images/rem2.jpg', 0, 60]},statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panelscontenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']})</script><div class='stepcarousel' id='mygallery'><div class='belt'><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div></div></div></div></div>
Cambiar
YOUR-POST-LINK por la dirección url (enlace) que queramos que se dirija cuando se pinche en la foto.
Cambiar
YOUR-POST-TITLE por el título que queramos que salga cuando se pase el ratón por encima.
Cambiar
URL_IMAGEN por la dirección de vuestra foto.
Parece más dificil de lo que realmente es. :)
Visitas
