miércoles, 27 de junio de 2012

Blockquote como yo

Algunas chicas me han preguntado sobre el blockquote que tengo ahora bueno es muy sencillo y tiene un efecto muy bonito.

Shalalaaaaa ~~~Aqui mi blockquote ^^ el efecto se mira mejor en google chrome okis


empezemos

Interfaz antigua:

Diseno >> Elementos de Pagina >> Edicion Html

nueva Interfaz:

Diseno >> Plantilla >> Edicion html >> y poner continuar al mensaje

Buscamos:

/* ----- BLOCKQUOTE ----- */ o .blockquote {

y pegamos justo abajo este codigo

background-image: url(http://i1208.photobucket.com/albums/cc361/Letthalicious/Backgrounds/back06.gif);border:2px solid #F5A9F2;border-left:10pt double #F5A9F2;padding: 3px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;}
.post blockquote:hover { background: #CEECF5;-webkit-transition-duration: 2.5s;background-image:url(http://sl.glitter-graphics.net/pub/1189/1189758upmz0ul25h.gif);background-position:bottom right;background-repeat:no-repeat;border:2px dashed #81DAF5;border-right:10pt double #81DAF5 ;}


Da clic para guardar

Y ahora si quieres editar:


Azul:
Direccion o url de primer fondo
Rosita: direccion o url del gif
Naranja: es para editar lo grueso, forma y color del borde
Lila: el color del segundo fondo.

Ahora para los que NO encontraron el codigo blockquote o no lo tienen solo copia el codigo completo osea este que pongo a continuacion y pegalo justo arriba de ]]></b:skin> :

/* ----- BLOCKQUOTE ----- */
blockquote {
background-image: url(http://i1208.photobucket.com/albums/cc361/Letthalicious/Backgrounds/back06.gif);border:2px solid #F5A9F2;border-left:10pt double #F5A9F2;padding: 3px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;}
.post blockquote:hover { background: #CEECF5;-webkit-transition-duration: 2.5s;background-image:url(http://sl.glitter-graphics.net/pub/1189/1189758upmz0ul25h.gif);background-position:bottom right;background-repeat:no-repeat;border:2px dashed #81DAF5;border-right:10pt double #81DAF5 ;}
y luego guardas ^^

34 comentarios:

  1. Respuestas
    1. es la cajita rosita donde pongo los codigos

      Eliminar
  2. Hola annyz, podrias hacer un tuto de como poner lo que pusiste en la flecha de subir y bajar pero no el muñeco de subir el normal que vemos en todas las paginas espero que me entiendas porque no se como poner ese rosa y celeste que deseo tanto (subir y bajar) no muñeco ¿he? besos n.n

    ResponderEliminar
    Respuestas
    1. el tuto que buscas es este

      http://annyz-kawaii.blogspot.com/2010/07/como-cambiar-entradas-antiguas-entradas.html

      el de rosita celeste no es de subir .. es de entradas antiguas o recientes.. osea adelante atras.

      Eliminar
    2. Annyz no es eso lo que busco viste donde esta la muñequita a la derecha del blog que dice subir bueno al lado de la muñeca de la derecha del de subir esta rosa y celeste con corazones pero es al lado de la muñeca de subir xD bueno espero que tengas un tuto de como poner el subir y bajar de alado de la muñeca de subir porque quiero ver como se hace besos batataflor.

      Eliminar
    3. creo q ella habla del scrollbar O.o

      Eliminar
    4. ooooooooohhh es verdaadd valiitOp tiene razOn xD sabes es que como veo la pagina en mozilla y no se visualiza en esta version por eso no daba con lo que me pedia xD

      disculpame batata T.T claro ya te paso el link donde puedes hacer eso del scroll bar

      http://annyz-kawaii.blogspot.mx/2012/04/personalizando-el-scroll-bar.html


      gracias valiitOp n.n

      Eliminar
    5. sii esee pero necesito saber algo mas me pasas el url de tu scrollbar porfis gracias annyz y como siempre tu blog esta genial!

      Eliminar
  3. Una pregunta...Puse el codigo todo bn,pero ¿Como ago para que me aparesca? o sea,no se como ponerlo! pliss respondeme :)

    ResponderEliminar
    Respuestas
    1. aww pame dices que lo pusiste y todo bien, pero luego dices que no sabes como ponerlo u.u no te entendi nena :(

      Eliminar
    2. pame yo tampoco entendia como poner pero mira es asii! subrayas el texto q quieres q vaya dentro de la caja y luego mientras esta el texto subrayado solo haces clic sobre las comillas q hay en el editor de entrada!!
      y listo^^

      Eliminar
    3. valiitOp mi salvadOra =D grax por responder.. no se ultimamente traigo la cabeza hecha bola y algo estresada por tanta cosa....me ayudaste bastante respondiendole a batata y a pame grax =D

      Eliminar
    4. Graciias a las dos!! jaja,Annyz necesitas ayudantas!! no podes con todo jeje :p Besoos ¬¬

      Eliminar
  4. Respuestas
    1. hola amu es que tienes la plantilla minima y en esa plantilla asi no funcionan los codigos te recomiendo la plantilla picture windows que es la que yo uso.

      Eliminar
  5. Hola ! anniz,tengo una dudita,yo tambien tengo un blog con RECURSOS para blog,y cuando quiero poner un codigo,eso no me aparece,decime que ago,o decime como pongo algun cartelito para los codigos,Gracias!

    ResponderEliminar
    Respuestas
    1. amm si es que necesitas el convertidor de html pq muchos signos bloguer no los lee

      te paso la pagina donde yo los convierto es de ciudad blogger muy util la herramienta

      http://ciudadblogger.com/p/conversor-de-html-texto-plano.html

      saludos

      Eliminar
  6. Hola, Annyz-Chan! ^^
    Tengo un problema D: puse el blockquote, pero, cuando le paso el cursor por encima, no cambia el fondo ni sale el gif... :(

    ResponderEliminar
  7. mm pq sera?? muchas veces el navegador es el problema o tambien la plantilla?? cual esas usando kagami?? fui a ver tus blogs pero no supe en cual lo instalaste xD

    ResponderEliminar
    Respuestas
    1. Yo uso el Google Chrome. Y tengo la plantilla clásica. Lo instalé en Kurumi Pink.

      Probé a ver como se veía en una entrada con cursores. Solo se ve la parte rosa, cuando le pongo el cursor encima, ni cambia de color, ni sale el gif ._.

      Estoy empezando a pensar que Blogger me odia xDD! Muchos besoss ^w^

      Eliminar
    2. mm que raro pero sabes creo que son los navegadores porq lo probe en una version de mozilla diferente y tampoco se veia el color y en otro de chrome y se veian los fondos pero no el gif o.O es muy raro deben ser las versiones o algo asi

      Eliminar
  8. muy bueno me sirvio a la perfeccion!! pero no lo cambie para nada solo le cambie la imagen xqq ya asii como esta combiina muy bien con mi blog^^
    graciias x el tuto
    xoxo

    ResponderEliminar
  9. Necesito saber algo mas me pasas el url de tu scrollbar porfis gracias annyz y como siempre tu blog esta genial!

    ResponderEliminar
    Respuestas
    1. okei el codigo que yo tengo es este

      ::-webkit-scrollbar {
      height: 12px;
      width: 15px;
      background-image:url(http://i1085.photobucket.com/albums/j433/Annyz-chan/cutefondobyannyzblog.gif);
      }

      ::-webkit-scrollbar-thumb {
      background-image:url(http://i1085.photobucket.com/albums/j433/Annyz-chan/cutefondobyannyzblog3.gif);
      -Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
      }

      Eliminar
  10. disculpa por las molestias pero no me funciono (ahora mi platilla es pictor windom)
    no encontre el codigo así que busque lo sengundo b skin y pues lo copie todo y ningún problema pero no me sirvió :(( no se ve el efecto se supone que funciona cuando selecciona el texto y le pones BLOCKQUOTE luego lo publicas y se tiene que ver pero no se vee ?¿¿ :( ¿?
    espero no darte tantas molestias
    saludos

    ResponderEliminar
  11. mm cual navegador utilizas?? sabes es que en algunos navegadores el efecto es diferente o.o

    ResponderEliminar
  12. Me encantan tus tutoriales *o*
    Y me fascino este *w* Muchas gracias x)
    Que andes super bien :D
    Saludos

    ResponderEliminar
  13. Me salio me salio me salio me salioooooooooooooooooooooooo♥ Graciaaaaaaaaaaaaaaaaaasssssssss Adoro tus tutoriales

    ResponderEliminar
  14. Annyz bendita seas *-*probé de todo para poder personalizarlo, probé con tus otros tutoriales, busque por todos lados pero ninguno me funcionaba, y este si resultó :'3 muchisimas gracias!

    ResponderEliminar
  15. Hola he puesto los codes en edicion html, pero no se como poner blockquote en una entrada jejej podrias ayudarme ?
    Espero tu respuesta

    ResponderEliminar
    Respuestas
    1. claro mira yo hice una pequena explicacion hace tiempo te la paso y espero te sirva

      http://annyz-kawaii.blogspot.mx/2011/07/personalizando-el-blockquote.html

      si sigues teniendo duda... no dudes en preguntarme de nuevo.. besos

      Eliminar
    2. Grax pero no me funciono

      Sera que lo hice mal nose jejejej...Ves a mi blog :http://stefanyjuntossomosmas.blogspot.com.es/...besos

      Eliminar
    3. Como se hace un boton paraque te afilien...Ya he visto el tuto de como hacerlo pero lo raro es que no me sale la imagen...me podrias hacer uno??...espero tu respuesta...besos >.<

      Eliminar

Nota: solo los miembros de este blog pueden publicar comentarios.