martes, 5 de mayo de 2015

DIY: Gadget con entradas más recientes.

¡Hola!

Bueno pues ahora os traigo un DIY para mimar un poquito a nuestros blogs. La verdad es que es muy fácil (si lo hice yo, imaginaos lo fácil que debe ser) y me lo pidieron mucho hace mucho tiempo así que aquí os lo traigo.

(Tenía la entrada hecha y se me olvidó subirla en el día, ¡perdón!)

Antes de nada, sabed que esto es muy fácil. Puede dar un poco de miedo pero os aseguro que cualquiera puede hacerlo. Antes de empezar a crear el gadget, leed bien la entrada ENTERA y después hacedlo siguiendo los pasos. Si empezáis a hacerlo a la vez que la leéis os agobiaréis y lo dejaréis y os aseguro que va a ser cuestión de dos o tres minutos.

¡Suerte! Aunque es tan fácil que no la necesitáis.


Para añadir este gadget, tendremos que elegir el gadget de HTML/JavaScript y poner este código:

<style scoped="" type="text/css">
#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}
.coin-slider{overflow:hidden;zoom:1;position:relative}
.coin-slider a{text-decoration:none;outline:none;border:none}
.cs-buttons{font-size:0;padding:10px;float:left}
.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
.cs-active{background-color:#B8C4CF;color:#FFFFFF}
.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
.cs-title strong{display:block;font-size:120%}
.cs-title p{margin:0}
.cs-title cite{font-size:90%}
.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
var AutoCoinConfig = {
 url_blog: "http://5sentidosangy.blogspot.com.es/",
 MaxPost: 7,
 cmtext: "Comentarios",
 MonthNames : ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],
 pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
 NoCmtext : "Puestos para comentarios",
 imageSize :300,
 SumChars : 100,
 tagName:false,
 width: 500,
 height: 250,
 spw: 7,
 sph: 5,
 delay: 3000,
 sDelay: 30,
 opacity: 0.7,
 titleSpeed: 500,
 effect: '',
 navigation: true,
 links : true,
 hoverPause: true,
 prevText: 'prev',
 nextText: 'next'
};
</script>
<script src="http://fianetmu-com.googlecode.com/files/autocoin.js" type="text/javascript"></script>


¡Lo sé! Da miedito pero tranquil@s que es súper fácil de manejar.
Ya veréis.


En esta parte (que viene a ser a partir de la segunda línea), podéis editarlo. Como veis podéis elegir un márgen, las dimensiones... ¡Hasta la fuente!

#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}

Debajo, tenéis "coin slider" y "cs buttons". También los podéis evitar. Como veis, las opciones aparecen entre los corchetes como en las líneas anteriores así que sólo tenéis que cambiar los números. Yo os recomiendo que si no sabéis muy bien cómo hacerlo probéis sin más número al azar a ver qué sale o dejarlo tal cual si os gusta como está porque sino os vais a liar.

Para lo que si os voy a ayudar es para elegir los colores, ya que es una cosa demasiado fácil.
Podéis ir a esta página: http://www.color-hex.com/ y allí encontraréis los códigos de todos los colores, en serio. Todas esas letras en mayúsculas (con números) que van detrás de una almohadilla son colores.

Pero... ¿qué pasa si no lo queremos editar?
¡Pues que nos solucionamos al vida de una manera fácil y rápida!
Simplemente, buscamos esta línea:

 url_blog: "http://5sentidosangy.blogspot.com.es/",

Como este es el código de mi blog está la dirección de mi blog pero sólo tenéis que cambiarla por la del vuestro... ¡Mucho cuidado de no quitar las comillas!


Y... ¿qué es ese chorizo de debajo?
Es para continuar con la edición del gadget así que si no te interesa, con cambiar la dirección te basta.
Si te interesa la edición, vamos por partes:

MaxPost: 7,

Esto básicamente es el número de entradas que quieres que aparezcan.
Yo tengo puestas 7, pero podéis poner las que queráis.

 cmtext: "Comentarios",

Esto es lo que queráis que aparezca para nombrar a los comentarios ya que cada vez que aparece una entrada pone el número de comentarios que hay.

 MonthNames : ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],

Esto, como podéis ver, son tan solo los nombres de los meses.

Y... ¿véis todo esto?
Bien, pues yo lo fui cambiando al azar y me quedó como podéis ver al final del blog.
No es muy difícil adivinar qué modifica cada número por lo que pone delante de los mismos.
Por ejemplo, está el tamaño de la imagen (ya que tiene que salir una imagen para cada diapositiva que se pone sola, si la entrada no tiene imágenes será un espacio oscuro sin más), la altura, la anchura, la velocidad con la que cambia de entrada a entrada...

 NoCmtext : "Puestos para comentarios",
 imageSize :300,
 SumChars : 100,
 tagName:false,
 width: 500,
 height: 250,
 spw: 7,
 sph: 5,
 delay: 3000,
 sDelay: 30,
 opacity: 0.7,
 titleSpeed: 500,
 effect: '',
 navigation: true,
 links : true,
 hoverPause: true,
 prevText: 'prev',
 nextText: 'next'
};
</script>
<script src="http://fianetmu-com.googlecode.com/files/autocoin.js" type="text/javascript"></script>

¡Y esto es todo!

Si os gusta como está sólo tenéis que cambiar la dirección de mi blog por la del vuestro y, si no, con pequeños cambios podéis conseguir el gadget que queréis.

Pero vamos, que con los códigos de los colores, el tamaño del gadget y algunas cosillas más lo podéis cambiar fácil y rápidamente.

No sé si me he explicado bien pero es que yo no sé mucho de esto y no sé si es bueno porque en parte todo el vocabulario que uso es corriente por lo que no hay nada que podáis no entender pero claro a lo mejor  preferíais una explicación más técnica.

No sé, bueno, esto es lo que he podido hacer.

¡Besitos!

(¡MAÑANA CONCIERTO!)

-A



4 comentarios:

  1. Hola Angy! Me pasaba para decirte que ¡ya lo he conseguido!, lo he puesto en un santiamén y creo que me ha quedado bastante bien, no lo he retocado demasiado porque igual la liaba pero igual algún día poco a poco lo cambio, muchísimas gracias por publicarlo!! También me pasaba a preguntarte una cosa, ¿el club de lectura ese sobre los Juegos del Hambre que tienes en un lado del blog ya existe? Porque me encantaría apuntarme, porque como sabrás Los Juegos del Hambre es mi trilogía favorita y tengo muchísimas ganas de volverla a leer, así que cuenta conmigo!!
    Muchos besos.
    PD: Ya me he acabado Cazadores de Sombras y me ha encantado, pronto me pasaré por tu reseña:)

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Acabo de comentarte en tu blog pero veo que voy a tener que volver jajaja.
      Eso que has visto... En fin... ¡Me has pillado! No quería decirlo hasta dentro de un par de días pero voy a lanzar una iniciativa o un reto o lo que sea para re-leer Los Juegos del Hambre. No sabía si se iba a notar mucho el cambio con la imagen pero veo que sí jaja. De momento ya sigo que podéis esperar la entrada con toda la información para el final de la semana.
      ¡Besos!
      -A

      Eliminar
    2. Si! Ya he visto el comentario, ahora a ver cuando puedo contestarte, espero que pronto. Pues no sabes lo feliz que me haces con esta iniciativa/reto!!! Sin falta este finde me paso por aquí:) Y no te preocupes, no se nota tanto, simplemente lo vi por casualidad:)
      Muchos besos!!

      Eliminar
    3. Vale♥♥ Me alegro mucho de que te apetezca jeje El sábado o el domingo subiré la entrada. ¡Besis! -A

      Eliminar

¡Hola! Muchas gracias por pasarte. Ahora, si nos dedicaras unos segundos para comentar el contenido que has venido a visitar, te estaríamos muy agradecidas. ¡Gracias por comentar! Besos <3