Asociacion Blogguer: Hacer un slider de imagenes

Hola os vengo a hacer un post que me ha pedido una de las integrantes de la asociación, aunque de todas formas os valdrá para todos los que queráis, el slider que os voy hacer son para fotos de 1200x500 px, si queréis cambiar el tamaño deberéis cambiar algunas cosas vosotros mismos, yo os digo que es complicado pero podéis hacerlo lo que tenéis en cuenta es que si cambiáis el tamaño deberéis cambiar todo e incluso los botones, yo que lo personalicé os diré que me costo mucho lo que queremos hacer es algo como esto.

como veis se sale del blog pero es como yo se lo hice a mi amiga, aquí no queda bien,

Lo primero que debéis conocer o saber es poderlo poner en la cabecera debajo o encima de la misma normalmente no se puede hay que tocar el html donde aquí os lo digo:

Primero de todo crear una copia de seguridad del blog, para no meter la pata o coger el BLOG DE PRUEBA del que he hablado alguna vez.
Si veis en la imagen siguiente, los gadchet que tiene mi blog no puedo poner el slider lo que voy hacer es tocar el html para poder meter un gadchet ahi.

Vamos a Editar en html, y deberéis buscar lo siguiente:"header-wrapper" o "header" para encontrarlo le dais a ctrl+f y veréis lo siguiente o algo parecido.

lo que deberéis borrar es Maxwidgets='1' showaddelemente='no' no ocurre nada lo único que le estas indicando que debe dejar poner gadget, esto viene bien por si alguna de las plantilla no os dejan poner gadget buscar el gadget que no os deja poner y quitar esas mismas cosas . Viene muy bien para poner el gadchet de paginas por ejemplo encima de la cabecera.

Al quitar esos comandos os saldrá algo como esto

Y ahora lo que os recomiendo es que vayáis al blog de notas del ordenador y allí copies los siguientes códigos y hagáis los cambios allí, yo es lo que hago sobre todo si queréis modificarlo.

<style type="text/css">

#mcis {

display: none;

}

#sliderFrame {

position: relative;

width: 1200px;

margin: 0 auto;

margin-bottom:35px;

border:5px solid #000;

}

#ribbon {

width: 1200px;

height: 500px;

position: absolute;

top: -4px;

left: -4px;

background: url(imagen que debera ser en png - es lo que pone recetas del mes) no-repeat;

z-index: 7;

}

#slider {

width: 1200px;

height: 500px;

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5xFW2K1CQpj1cmRK6JJO-NWxzWHn7kNlRVXajCiSJH0orfInel7jPRTom3a7YxqhoJilVlWLrYg6sRwhmjhj8A7ftEdqgyi7c4jR-wKvApIBi0YICLjuzVE7Ftli6TghSXwBIc3W4hoKR/s32-no/loading.gif) no-repeat 50% 50%;

position: relative;

margin: 0 auto;

box-shadow: 0px 1px 5px #999999;

}

#slider img {

position: absolute;

border: none;

display: none;

}

#slider a.imgLink {

z-index: 2;

display: none;

position: absolute;

top: 0px;

left: 0px;

border: 0;

padding: 0;

margin: 0;

width: 100%;

height: 100%;

}

div.mc-caption-bg, div.mc-caption-bg2 {

position: absolute;

width: 100%;

height: auto;

padding: 0;

left: 0px;

bottom: 0px;

z-index: 3;

overflow: hidden;

font-size: 0;

}

div.mc-caption-bg {

background-color: black;

}

div.mc-caption {

font: bold 14px/20px Arial;

color: #EEE;

z-index: 4;

padding: 10px 0;

text-align: center;

}

div.mc-caption a {

color: #FB0;

}

div.mc-caption a:hover {

color: #DA0;

}

div.navBulletsWrapper {

top:400px;

left: 500px;

width: 1200px;

background: none;

padding-left: 20px;

position: relative;

z-index: 5;

cursor: pointer;

}

div.navBulletsWrapper div {

width: 11px;

height: 11px;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0sj8CgNHV2lqhKi7_8GkGb9NHiaQ5-F55I_kVFq-SL5fOv2DYc81nNDcdwnfzzcuvKiRFVi0GknZHYGZpbnviU-SSFrjVPrtfrZlAEbXGN-QNEpmtu7iciL5E8aoQlM1BTM8VnlhprYM/w11-h22-no/bullet.png) no-repeat 0 0;

float: left;

overflow: hidden;

vertical-align: middle;

cursor: pointer;

margin-right: 11px;

_position: relative;

}

div.navBulletsWrapper div.active {

background-position: 0 -11px;

}

#slider {

transform: translate3d(0, 0, 0);