Tips para Blogger! Instalar Slider editable con enlaces a las entradas + Tutorial

9:00:00 Princess Aleka 0 Comentarios

tuto0

¡Qué bueno es hacer un tutorial nuevo! Siento que han pasado años desde el último que publiqué (y sólo han sido dos meses, así de loca estoy), pero estoy feliz de poder traerles este paso a paso que va a estar entretenido. Desde que cambié la plantilla del blog, muchas compañeras de la comunidad me han pedido que les muestre como colocar el slider en sus blogs, así que hoy es su día de suerte. Tendrán algo como esto al completar este tutorial:

tuto1

Eso sí, les advierto antes de empezar que no va a ser nada fácil. Concéntrense lo mejor que puedan y no se salten ningún paso. Empezamos:

Paso 1: Como siempre, empezamos en el escritorio de Blogger. Hoy trabajaré en mi Blog de Ejemplos para no molestar la plantilla de este. Dirígete al apartado “Diseño”.

tuto2

Paso 2: Añade un gadget, haciendo click en este enlace.

tuto3

Paso 3: Te aparecerá esta ventanita. Baja en la lista hasta que encuentres el que dice “HTML/Javascript”.

tuto4

Paso 4: Cuando lo consigas, haz click en el signo “+”.

tuto5

Paso 5: La ventana cambiará para pedirte el título y contenido del gadget. Como título, colocarás “Slider”. Por favor, coloca este nombre pues es vital para el resto del código. En el contenido escribe cualquier cosa, porque si lo dejas vacío Blogger no te dejará guardarlo (me pasó). Guarda los cambios.

tuto6

Paso 6: Arrastra el gadget hasta el sitio donde lo quieres dejar. Yo te recomiendo colocarlo sobre el contenido de las entradas del blog.

tuto7

Paso 7: Ahora deberás identificar el código del gadget. Al colocar el cursor sobre el enlace “Editar”, en la parte de abajo te mostrará la dirección a la que apunta. Anota lo que sigue a “widgetId”. Deberá empezar con HTML, seguido de un número. Este identificador es MUY IMPORTANTE.

tuto8

Paso 8: Ya que tengas el identificador, guarda los cambios (1) y dirígete al apartado “Plantilla” (2).

tuto9

Paso 9: Entraremos a “Editar HTML”. De aquí en adelante, ten muchísimo cuidado y paciencia.

tuto10

Paso 10: Como siempre, pisa Ctrl+F para abrir la cajita de búsqueda en el código HTML.

tuto11

Paso 11: En la cajita de búsqueda, coloca lo siguiente y pisa Enter.

]]></b:skin>;

Paso 12: Justo ARRIBA de la línea donde está b:skin,

tuto12

Pega el siguiente código de estilos (Las líneas comentadas son las que puedes modificar para adaptar el slider a tu página):

#HTML1 h2 { /*El número que sigue a HTML depende del identificador del gadget.*/
    display: none;
}

.fp-slider { /*Estilos del slider.*/
    background: none repeat scroll 0 0 #EEEEEE; /*Color y comportamiento del fondo.*/
    height: 333px; /*Altura.*/
    margin: 0 0 17px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 609px; /*Ancho.*/
}
.fp-slides-container {
}
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav { /*Estilo de las imágenes.*/
    width: 610px; /*Ancho.*/
}
.fp-slides, .fp-thumbnail {
    height: 299px;
    margin-left: 0;
    margin-top: 0;
    overflow: hidden;
    position: relative;
}
.fp-title {
    color: #FFFFFF;
    font: bold 18px Arial,Helvetica,Sans-serif;
    margin: 0;
    padding: 0 0 2px;
    text-shadow: 0 1px 0 #000000;
}
.fp-title a, .fp-title a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
.fp-content {
    background: none repeat scroll 0 0 #111111;
    bottom: 0;
    left: 0;
    margin-left: 0;
    opacity: 0.7;
    overflow: hidden;
    padding: 10px 15px;
    position: absolute;
    right: 0;
}
.fp-content p {
    color: #FFFFFF;
    line-height: 18px;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 0 #000000;
}
.fp-more, .fp-more:hover {
    color: #FFFFFF;
    font-weight: bold;
}
.fp-nav {
    height: 12px;
    margin-left: 12px;
    padding: 10px 0;
    text-align: center;
}
.fp-pager a {
    background-image: url("http://2.bp.blogspot.com/-9SMGe_e4Cnw/T4BYgcnG3WI/AAAAAAAAAt0/a4-6wqD8n2c/s1600/pages.png");
    background-position: 0 0;
    cursor: pointer;
    display: inline-block;
    float: none;
    height: 15px;
    line-height: 1;
    margin: 0 8px 0 0;
    overflow: hidden;
    padding: 0;
    text-indent: -999px;
    width: 16px;
}
.fp-pager a:hover, .fp-pager a.activeSlide {
    background-position: 0 -112px;
    opacity: 1;
    text-decoration: none;
}
.fp-prev-next-wrap {
    position: relative;
    z-index: 200;
}
.fp-prev-next {
    bottom: 130px;
    height: 37px;
    left: 0;
    position: absolute;
    right: 0;
}
.fp-prev {
    background: url("http://2.bp.blogspot.com/-teUsTTlsdJY/T4Bck1mIHHI/AAAAAAAAAuY/d6Vzuy12-Go/s1600/prev.png") no-repeat scroll left top transparent;
    float: left;
    height: 51px;
    margin-left: 10px;
    margin-top: -180px;
    width: 53px;
}
.fp-prev:hover {
}
.fp-next {
    background: url("http://4.bp.blogspot.com/-ft3kPf5BRY4/T4Bc2066aGI/AAAAAAAAAuk/ZDW2bKr8y0M/s1600/next.png") no-repeat scroll right top transparent;
    float: right;
    height: 51px;
    margin-right: 10px;
    margin-top: -180px;
    width: 53px;
}
.fp-next:hover {
}

Paso 13: Inmediatamente DESPUÉS de b:skin,

tuto13

Pega el siguiente código (Te recomiendo selccionar todo el contenido de la caja para no perder ni una línea. Esta es la parte crucial de la instalación):







Paso 14: Guarda los cambios. Si no salta ningún error, vas muy bien.

tuto14

Paso 15: ¿Recuerdas el identificador del gadget? Ahora lo usaremos. Busca en esta lista su ubicación. Solo tienes que hacer click en su nombre.

tuto15

Paso 16: Todo el código está resumido, así que para mostrarlo completo debes expandirlo haciendo click en las flechas negras de la izquierda. Despliega el código de tu gadget.

tuto16

Paso 17: Selecciona el código que te muestro a continuación, pues lo sustituirás.

tuto17

Paso 18: Pega el siguiente código, MIENTRAS EL CÓDIGO EN LA PLANTILLA ESTÉ SELECCIONADO. Esto lo sustituirá.

 /*El número que sigue a HTML es el identificador.*/

  
  
    


Paso 19: Guarda los cambios. Una vez más, si no errores vas muy bien.

tuto18

Paso 20: Es un buen momento para ver tu blog.

tuto19

Paso 21: Debe verse algo como esto, el gadget sin el título, solo el contenido.

tuto20

Paso 22: Vuelve a Blogger y dirígete al apartado “Diseño”.

tuto21

Paso 23: Ahora vamos a editar el contenido del gadget, es decir, agregaremos todo lo que se verá en el slider. De aquí en adelante, es lo que tendrás que hacer cada vez que quieras modificar las imágenes y los enlaces. Haz click en el enlace “Editar”.

tuto22

Paso 24: En la ventana que te aparece, borra el texto temporal que escribiste al crearlo.

tuto23

Y reemplázalo por este, colocando antes las direcciones correspondientes:



En Facebook

Photo A Day Junio


Se acabó Mayo

y con él también se terminó...

Paso 25: Al terminar, guarda los cambios.

tuto24

Paso 26: Guarda también el botón “Guardar Disposición”.

tuto25

Paso 27: Ahora mira tu blog (actualiza la página si es necesario), y disfruta de tu lindo slider.

tuto26

¡Felicidades! Ya instalaste completamente tu slider. Ahora siéntete orgulloso de tu trabajo y disfruta de los cumplidos de tus lectores. Si tienes alguna duda o pregunta, sabes que puedes dejármela en los comentarios o en el correo princess.aleka@gmail.com. Muchísimas gracias por ver este tutorial. Suerte,

Denise
Twitter

0 comentarios:

Deja tu huella en este Universo

Populares de la semana