Recursos [B.D]: Modificación de gadget de entradas recientes

8 de julio de 2013

Modificación de gadget de entradas recientes

Aun no sabes como pasar eso de el doodle de Google,mi hermana ya lo hizo. Primero tienes que recoger la primera cosa que ves y después continuas. Ve al lado derecho, sube la escalera y toma esa cosa que ves ahí. Despues baja y toma el costal. Despues de eso tienes que volver y esta vez ve del lado izquierdo hasta que te encuentres con el animal que creo que es un toro aunque puede que sea una vaca. Toma la soga que lo sujeta y la vaca se soltara a comer el pasto. Ahora, con la soga y la cosa que agarraste de la escalera vas a tomar la parte de la nave que esta en el techo. Ahora tienes que irte del lado derecho hasta que te encuentres con la gallina, dale a la gallina el costal y toma su pluma. Ahora ve del lado izquierdo otra vez hasta encontrarte con la vaca, la vaca ya comio todo el pasto,y donde habia pasto ahora hay un hueco. Metete ahi y recoge ese envase que tiene algo que brilla verde, ahora usa ese envase en el arbol que tienes a un lado y veras que este crece. Subete al arbol para salir de ahi. 


Ahora ve hacia el lado izquierdo hasta que te encuentres con el lugar en que encontraste a la gallina, ahi veras un arbol. Usa el envase en el arbol y crecera. Subes al arbol y veras una chica durmiendo, toma la pluma e usala en ella, ahi veras la ultima parte de la nave. FIN. si quieres ver la verdadera entrada haz clic en leer mas,bitch.
Follow my blog with Bloglovin
Primero que todo, quiero darle creditos a los codigos: ciudadblogger & ayudadeblogger

 El gadget de entradas recientes es de ayudadeblogger (MEGAWIDGET V2) asi que tienes que tenerlo primero.

MEDIDAS: ANCHO Y LARGO

 ¿Como las modificamos? 
En la parte del codigo que dice "#post-gallery {
  width:304px;" Width es el ancho, y como las miniaturas son de 72x72 pues si quieres dos miniaturas en una linea tendras que poner "152px" /Esta perfectamente calculado, ya que yo habia puesto 144 y me salio que habia solamente una miniatura y se veia muy desordenado,asi que multiplicas 72 por el numero de miniaturas que quieres y le sumas ocho,entendes?/ El largo depende de cuantas entradas muestres y del tamaño de sus miniaturas. P.D: No te recomiendo cambiar las miniaturas,pero si quieres cambiarla tendras que cambiar dos partes del codigo:
Para cambiarla,tienes que buscar la parte que dice "#post-gallery .rp-item {" Al final del parrafo dice el tipico Width/ancho & Height/largo y ahi le cambias las medidas a tu gusto, y en el proximo parrafo (#post-gallery .rp-item img {) tambien tienes que cambiarles las medidas,asegurate de que en los dos parrafos en "Width" & "Height" tengan las mismas medidas que el otro parrafo.


ESTILO: BACKGROUNDS Y FONTS

Para cambiar la font del titulo tienes que buscar el parrafo "#post-gallery h2 {" y en donde dice "font:20px Arial,San-Serif" Solamente tienes que cambiar Arial por cualquier font que quieras. Yo la cambie por SoozieQs. Puedes cambiarle el color de font tambien /P.D:El html reconoce black & white solamente, si quieres un color fuera de eso visita paginas de colores html/ Tambien cambia el tamaño si es necesario en "20px" por el numero que prefieras. Para cambiar el fondo del titulo en "  background-color " Pon tu color html en #00000. Puedes cambiar la imagen de "loading" por otra en "#post-gallery .rp-item {" en donde dice "url" remplazarla por la url de tu imagen. Cambie el background: "  padding:8px;background-color:#81DAF5" Y reemplaza #81DAF5 por tu color html.

EXTRA: EFECTOS AL PASAR EL CURSOR EN LAS MINIATURAS

Codigos de ciudadblogger.

El que yo tengo; Al pasar el cursor se redondea.
Cambia los parrafos "#post-gallery .rp-item img {" por el siguiente codigo:
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item img:hover {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 12px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

  Alreves: al pasar el cursor se vuelve cuadrado otra vez.
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
  margin:0px 0px !important;
  padding:0px 0px !important;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item img:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}
 Al pasar el cursor se vuelve una forma personalizada.
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
  margin:0px 0px !important;
  padding:0px 0px !important;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item img:hover {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 12px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

Alreves.
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
  margin:0px 0px !important;
  padding:0px 0px !important;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item img:hover {
border-radius: 0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

Forma personalizada dos.
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
border-radius: 45% / 20%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
  margin:0px 0px !important;
  padding:0px 0px !important;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item img:hover {
border-radius: 0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

 El que yo tengo; efecto personalizado "yumee" de yukiiblog (originalmente para elite,modificado y adaptado a el gadget)
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
border-radius: 100px;
margin: 5px;
-moz-box-shadow: 0 0 1em #8C6C65;
-webkit-box-shadow: 0 0 5px #888;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  -webkit-filter:grayscale(1);
-webkit-transition-duration: 1.5s;
-webkit-transform: rotate(30deg) scale(1.1);
display:none;
}
#post-gallery .rp-item img:hover {
-webkit-filter: none;
-webkit-transform: rotate(0deg) scale(1.1) ;
opacity: .99;
-webkit-transition-duration: 1s;
border-radius: 5px;

}

 Efecto Zoom al pasar el cursor,bitch.

 #post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
  display:none;
}
#post-gallery .rp-item img:hover {
-webkit-filter: none;
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 35px white;
-webkit-box-shadow:0px 0px 35px white;
-moz-box-shadow:0px 0px 35px white;

}