Buscador para blogger "Pika Moustache"

KAWAIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII!!!!!!!!!!!!!

Discúlpenme, es que me quedó bello ＼(*T▽T*)／ SI! Ese buscador para blogger que ves aquí arriba (↑↑↑) es creación mía. Lo hice especialmente para mi sister (blog: tumamalagordota.blogspot.com) ¿Por qué? Bueno porque le conté que crearía unos buscadores para blogger y ella me pidió uno de Pikachu Moustache. LOL.

Así es, estoy creando buscadores para blogger (aunque este es recién el primero. LOL). Si quieres uno no sufras(?) pronto estaré publicando mis primeras creaciones ＼( ｀.∀´)／ Pero si quieres uno con otro personaje en especial o algún otro detalle dimelo (déjalo en comentarios).

Bueno es todo ya me iré a descansar! ヾ(。￣□￣)ﾂ AH! Por cierto, obviamente el código del buscador Pika Moustache no te lo puedo dejar ya que, este lo diseñé como pedido especial. Ahora si...bye bye!

Pack de Onigiris

Estuve (y continuo) en una recolecta de todos los emoticones de onigiris, por hoy les dejo un pack de 10 emoticones ＼(・｀(ｪ)・)/

¿Por qué demora en cargar mi blog? (Sitio Web)

Ok! Ok! ¿Este ES UN PROBLEMA? Claro que SI, para todo buen bloggero (escritor) y bloggerfan (lector) es una molestia tener que esperar mas de 3 segundos para poder leer el blog de su bloggero favorito, y ni pensar el tener que esperar 10 segundos o más! Σ(-`Д´-ﾉ；)ﾉ OMG NOOOOOOOOOOOOOOOOOOOO!

Bueno hoy yo TRAIGO LA SOLUCION!!!!!!!!!! ᕙ(⇀‸↼‶)ᕗ -pose de macho- LOL. Pero antes de la solución te contaré algo muy importante.

¿Quieres saber quienes son los culpables de que tu sitio web o blog demore en cargar?

Pues los culpables de todo esto son las imágenes (img) muy pesadas, los botonsillos que dirigen a otras webs, los banners de afiliación por ejemplo. Y por último, el abuso extremo de los programas para blogs o mejor dicho los script. Los Script son pequeños programas o aplicaciones que colocas en el blog (relojes, reproductores, efectos de mouse, etc.), estos no pesan mucho pero si pones demasiados (MUCHÍSIMOS) de ellos obviamente tu blog demorará más del promedio normal de carga.

SOLUCIÓN:

• Cuidado con las imágenes pesadas (muy grandes) trata de que sean del tamaño que delimita tu blog.
• En lo posible a sus afiliados téngalos en una página aparte de la página principal del blog. Podrían colocarlos en una Nueva entrada o una Página.
• Y por favor!! Evita totalmente el USO EXAGERADO de Script. Son muy bonitos y todo (hasta yo tengo algunos), pero usar demasiados debería ser un delito ヽ(#`Д´)ﾉ (?) ok no jajaja. Pero en serio no abuses de ellos.
• Otra cosas es analizar tu blog o sitio web ¿Cómo? Bueno existe una web que te permite realizar análisis de tu blog, y lo mejor es que es gratis (ﾉﾟ▽ﾟ)ﾉ La página es Pingdom.com (←click para ir a la web) y pegamos la URL de nuestro blog, y nos mostrará lo sgte.

Perf. grade = Grado de rendimiento
Requests = Solicitudes
Load time = Tiempo de carga
Page size = Peso de la página

El resultado lo divide por el tipo de elemento y tiempo de carga.

Para saber cual es el culpable de la carga lenta de tu blog, le damos clic a la flecha y seleccionamos, Sort by file size. Ya hecho esto puedes identificar el o los elemento más pesado en tu blog y corregirlo para mejorar carga. El peso promedio en un blog es de 300 a 500 Kb, si es mas de eso se hace más pesada la carga (click y lee sobre ¿Cuáles son los limites de mi cuenta blogger? para más información)

Y para finalizar, si el promedio de carga de tu blog es menor o igual a 3 segundos, se considera muy bueno. Y si está entre 3 a 5 segundos no es muy buena, pero si aceptable. Más de eso se considera LENTO.

Bueno espero haber sido de ayuda ＼(・｀(ｪ)・)/ Es todo por hoy me retiro ya. Bye! Bye!!

TAREA TERMINA!! con ayuda jejeje

Hermosos fonditos para blogger, twitter, tumblr

Bueno hoy les traigo, o mejor dicho, lo que my little sister les trae hoy (〜￣▽￣)〜 SI! leyeron bien, hoy los recursos para blogger (twitter, tumblr, etc.) los trae mi hermana ¿Y que son? Son unos bellísimos, hermosísimos, kawaiiosos! (...osos *0*) fondos.

A QUE SON KAWAIIS (*0*)

Y estos son sólo algunos, como una pequeña muestrilla (¬ w¬). Si quieres más fonditos kawaiiosos pásate por el blog de mi loca sister (ノ￣ω￣)ノ

Le dejo el URL de su blog ahí abajo↓↓↓
tumamalagordota.blogspot.com

Bueno es todo por ahora, regreso más tarde que debo continuar con la tarea de excel que esta algo complicadito (T___T) y mañana hay examen de esto (一。一;;）

Personaliza avatars [anónimo | Nombre/URL]

Centrando la cabecera de mi Blog y los headings

Este es un truco que hará, como dice el título, centrar la cabecera (header) y títulos de sidebars (headings). Bueno comencemos con el PASO A PASO!

ANTES QUE NADA, DESCARGA UNA COPIA DE TU PLANTILLA (template). SÓLO POR SEGURIDAD!

Header

1. Desde la opción Tema de Blogger, clic en el botón  Personalizar 
2. Clic en Opciones avanzadas y buscamos Agregar CSS.
3. Copia y pega el siguiente código. Clic en  Aplicar al blog 

.header .widget { text-align:center; } .header img { margin: 0 auto; }

Headings

1. Desde la opción Tema de Blogger, clic en el botón Editar HTML
2. Presionar las teclas de búsqueda rápida  Ctrl  +  F   y buscar Headings
3. Antes de finalizar el código pegar la siguiente línea text-align: center;

Quedando así:

/* Headings ----------------------------------------------- */ div.widget > h2, div.widget h2.title { margin: 0 0 1em 0; font: $(widget.title.font); text-transform: uppercase; color: $(widget.title.text.color); text-align: center; }

Guarda los cambios y LISTO!

Ya debo irmeeeeeeeeee!!!!!!!!!!!

¿Cuáles son los límites de mi cuenta de Blogger?

Hoy encontré una información MUY IMPORTANTE sobre Blogger. Es sobre algunas limitaciones que blogger tiene.

Bueno aquí va la lista (￣(ｴ)￣)ﾉ

Número de blogs: puedes tener hasta 100 blogs por cuenta.
(Bueno también para que querría como 101 blogs? verdad? LOL)

Número de entradas: no hay ningún límite en la cantidad de entradas que puedes tener en un blog. Todas se almacenarán en tu cuenta (a no ser que las suprimas manualmente), independientemente de si publicas archivos o no.

(Fabuloso! *O*)

Tamaño de las entradas: las entradas no tienen un límite de tamaño específico, pero si son muy extensas, pueden alcanzar el límite de tamaño de la página (consulta el siguiente punto).

(Vale sigue leyendo la sgte. ↓↓↓)

Tamaño de las páginas: las páginas individuales (la página principal del blog o las páginas de archivo) tienen un límite de tamaño de 1 MB, por lo que podrás introducir algunos cientos de páginas de texto. Sin embargo, esto puede ser un problema si incluyes una gran cantidad de entradas en la página principal del blog. Si alcanzas este límite, verás el siguiente mensaje de error: "006 Ponte en contacto con el servicio de asistencia de Blogger". No obstante, puedes evitar este error; para ello, tienes que reducir el número de entradas de la página principal, lo que también permitirá que la página se cargue más rápido.

(Esto quiere decir que debes modificar el número de entradas que se visualizan en la página principal ・ω・)

Número de comentarios: una entrada puede contener una cantidad ilimitada de comentarios. Como en el caso de las entradas archivadas, si decides ocultar los comentarios del blog, todos los comentarios que había anteriormente se seguirán almacenando en tu cuenta.

(O sea todo normal! Oωó)

Número de imágenes: hasta 1 GB de almacenamiento total si las compartes con la Web de Picasa.

(Ciertamente nunca he llegado a rebasar ese límite de imágenes en Blogger, a pesar de que SUBO y SUBO cientos de imágenes. ¿Cómo lo logro? ---Preguntas al final del recorrido. LOL)

Tamaño de las imágenes: si publicas fotografías a través de Blogger para móviles, hay un límite de 250 KB por cada una.

(Esto si es algo que desconocía o_ô pero ahora ya lo sé)

Miembros del equipo: hay un límite de 100 miembros por blog.

(Esto si lo sabía y es GENIAL!! Aunque por lo general yo manipulo mis blogs, también los he compartido...ay si! ay si! me gusta compartir. LOL)

Número de etiquetas: hasta 2.000 etiquetas exclusivas por blog y 20 por entrada.

(Cuestión de cálculos matemáticos(?) jajajaja)

Descripción del blog: limitada a 500 caracteres, sin HTML. Si añades más caracteres o etiquetas HTML, es posible que no se guarden los cambios y se vuelva al texto anterior.

(Sigue leyendo...)

Apartado "Información sobre mí": máximo de 1.200 caracteres.

(Aún sigue...)

Intereses y favoritos del perfil: máximo de 2.000 caracteres en cada campo.
(Estos últimos 3 son pequeños detalles que SI debemos tener en cuenta nωn)

Nota: los usuarios del servicio BlogSpot Plus, que ahora está abandonado, tienen una configuración algo distinta. Como estas cuentas incluían acceso FTP completo, estaban limitadas a 25 o 100 MB en función del tipo de actualización que se hubiese realizado. En estos casos, si utilizas toda la capacidad asignada con imágenes u otros archivos, es posible que no puedas subir entradas nuevas. Para evitar que esto suceda, tendrás que suprimir los archivos no utilizados de la cuenta para liberar más espacio.

Bueno es todo! Y la verdad si nos fijamos bien, no son para nada EXTREMISTAS estas limitaciones o restricciones que pone Blogger. EN OTRA PALABRAS, Blogger es perfecto (✪㉨✪) 

CUALQUIER DUDA ESTOY A SU SERVICIO m(_ _)m

Créditos a: support.google.com

5 Lindos Cursores

Para colocar un cursor en tu blog, solo tenes que pegar alguno de los códigos que se muestran abajo de cada imagen. Pega el código antes de </body>

<style> body, a, a:hover { cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-cute/cute01.gif'), auto }</style>

<style> body, a, a:hover { cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-cute/cute26.gif'), auto }</style>

<style> body, a, a:hover { cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-cute/cute24.gif'), auto }</style>

<style> body, a, a:hover { cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-cute/cute23.gif'), auto }</style>

<style> body, a, a:hover { cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-cute/cute20.gif'), auto }</style>

Recuerdos doramescos(?) Your Beautiful

Your Beautiful 【pack de gif animados + 1 wallpaper】

Estos son algunos de los gif animados que encontré. A que son bellos! ～(^з^)-☆

     

La neta es que están re-chistosos jajajaja ☆⌒（＊＾∇゜）v
Disfruten de los gif y úsenlos con sabiduría(?) LOL.

Descripción de Archivo

Peso: 16.86 MB

Contenido: 35 gif animados + 1 wallpaper de 1056 x 600

Bajoneada

Emoticos de Neko

Hace un tiempo encontré unos emoticones japoneses muy kawaiis
(* 0*) y los quise compartir. Claro que también los publico para no perder la info. LOL.

SELECCIONA EL QUE MAS TE GUSTE, HAS COPIA Y PEGA EN DONDE GUSTES

(=^･ｪ･^=)	(=^‥^=)	(=^･^=)
v(=^･ω･^=)v	(=｀ω´=)	o(^・x・^)o
＼(=^‥^)/’`	( =①ω①=)	d(=^･ω･^=)b
(=ＴェＴ=)	(=;ェ;=)	ヽ(=^･ω･^=)丿
(=^･ω･^)y＝	(^-人-^)	ヽ(^‥^=ゞ)
(^・ω・^ )	(=^-ω-^=)	b(=^‥^=)o
(.=^・ェ・^=)	（=´∇｀=）	ヾ(=ﾟ･ﾟ=)ﾉ
~(=^‥^)ノ	~(=^‥^)/	(=ｘェｘ=)
(=；ェ；=)	(=｀ェ´=)	(^･o･^)ﾉ”
(^._.^)ﾉ	└(=^‥^=)┐	=’①。①’=

Y estos son todos espero que les haya gustado <(*ΦωΦ*)>

Tablas personalizadas 【table】

Y he aquí otro código que estuve buscando hace mucho! щ(ಠ益ಠщ) MUCHÍSIMO! Ya sé! Ya sé! ¿Qué tiene de maravilloso una tabla (table)?

NADA SI NO ES UNA TABLE DE APPLE(?) (*≧▽≦)ﾉｼ)) OK SORRY...LA VERDAD (y como verán) UNA TABLA DE BLOGGER NO TIENE MUCHO ESPLENDOR QUE DIGAMOS. Y SINCERAMENTE YO PENSARÍA QUE UNA TABLA NO TIENE NADA DE MARAVILLOSO. LO PENSARÍA PERO NO! PORQUE, YA HE VISTO LA LUZ!!!!!! -drama- OK ME TRANQUILIZARÉ. LOL

Hoy no haré el paso a paso ya que este código no tiene un lugar fijo. PUEDE IR EN TODAS PARTES!!! Ok no, no en todas partes, pero si puede ir tanto en una entrada (post), página (page) y/o en una columna lateral (gadget). Así que sólo les dejaré los códigos, el resto es fácil. Copiar y pegar (ヘ。ヘ)

CÓDIGOS:

Borde de puntitos:
<table border="0" style="background-color: none; border: #FE2E9A 3pt dotted; width: 320px;"><tbody><tr><td>Aquí es donde debe ir tu texto, sólo debes reemplazar este.</td></tr></tbody></table>
Resultado:

Aquí es donde debe ir tu texto, sólo debes reemplazar este.

Borde de rayitas:
<table border="0" style="background-color: = none; border: #F3F781 2pt dashed; width: 320px;"><tbody><tr><td>Aquí es donde debe ir tu texto, sólo debes reemplazar este.</td></tr></tbody></table>
Resultado:

Aquí es donde debe ir tu texto, sólo debes reemplazar este.

Borde doble raya
<table border="0" style="background-color: none; border: #01DFD7 4pt double; width: 320px;"><tbody><tr><td>Aquí es donde debe ir tu texto, sólo debes reemplazar este.</td></tr></tbody></table>
Resultado

Aquí es donde debe ir tu texto, sólo debes reemplazar este.

Borde con marco
<table border="15" cellspacing="5" style="width: 320px;"><tbody>

<tr><td>Aquí es donde debe ir tu texto, sólo debes reemplazar este.</td></tr>

</tbody></table>
Resultado

Aquí es donde debe ir tu texto, sólo debes reemplazar este.

Tabla con fondo
<table background="url de tu imagen (jpeg, png, gif)" border="1" style="width: 320px;"><tbody>

<tr><td><span style="background-color: #F4CCCC;">Aquí es donde debe ir tu texto, sólo debes reemplazar este.</span></td></tr>

</tbody></table>
Resultado

Aquí es donde debe ir tu texto, sólo debes reemplazar este.

Nota:

- border: Esta es la línea del borde interno de la tabla. Si 'border' está en uno (1) aparecerá la linea, mientras mayor sea el número mayor será el grosor de esa línea. Y si fuera cero (0) obviamente no se verá.

- style: En 'style' hay una serie de códigos. En 'background-color' dice none, eso quiere decir que no hay color de fondo en la tabla; pero si quieres colocar color sólo cambia el none por un código HTML de color. También está 'border' que tiene un código HTML de color (ej: #F3F781), este es el color de la línea del borde externo de la tabla. Al lado de 'border' le sigue pt, este es el grosor de la línea del borde externo de la tabla; se cambia el número del lado izquierdo de pt por uno mayor la línea sera más gruesa. Por último está 'width' que es el ancho de la tabla, mientras mayor sea el número más ancha será.

- background: Ahí va el código url de la imagen que desees como fondo.

- span style: Dentro está el código 'background-color', este es el color de resaltado del texto (ej. #F4CCCC). Y como con los demás colores, utiliza un código HTML de color.

BIEN! ESO ES TODO (×_×;)He terminado muerta, me esforcé muchísimo modificando códigos antiguos para adaptarlos a la nueva versión de blogger. Por favor respeten mi trabajo y si utilizas la información, favor darme los respectivos créditos. GRACIAS! ＼(・｀(ｪ)・)/

Gracias al Escaparate de Rosa y a Ciudad Blogger.

Textatera 【código】 Caja de Texto

El elemento HTML textarea inserta en la entrada (post) un cuadro de texto multilínea. Esta característica especial, hace de este elemento una buena elección a la hora de requerir comentarios o mensajes muy largo. O en mi caso, yo lo utilizo para colocar códigos.

EJEMPLO:

Aquí va tu mensaje o código. Por ejemplo aquí podes colocar el código de tu banner, uno como este... <a href="http://nemuri-kuma.blogspot.com/"><img_proxy_proxy alt="Nemuri Kuma" src="http://img835.imageshack.us/img835/2861/nemurikumabanner.gif" /></a>
ó
Aquí va tu mensaje o código. Por ejemplo aquí podes colocar el código de tu banner, uno como este... <a href="http://nemuri-kuma.blogspot.com/"><img_proxy_proxy alt="Nemuri Kuma" src="http://img835.imageshack.us/img835/2861/nemurikumabanner.gif" /></a>

Comencemos con el PASO A PASO

1. Ve a: Diseño → Diseño → Añadir un gadget → HTML/Javascript. Y pega el siguiente código
2. <textarea cols="30" rows="5" style="background:#000;color:#fff;">Aquí va tu mensaje o código</textarea>
3. Le damos en 'Guardar' y listo. Vayan 'Ver blog' y ahí está su Caja de Texto 'textarea'

Editando el código Textarea:

• cols ANCHO DE LA CAJA DE TEXTO
• rows ALTO DE LA CAJA DE TEXTO
• style COLOR DE FONDO (background), TEXTO (color), ETC. EJEMPLO: style="background: #feaaaa, color: #fff;"
• Aquí va tu mensaje o código ESCRIBE TU TEXTO

[ VOLVER A DICCIONARIO BLOGGER ]

Barra de Desplazamiento personalizada

Y continuando al anterior post y antes de irme a dormi (ya son las 4am). Este es el último tutorial del día o bueno de la madrugada. LOL. Es que de seguro en la noche volveré con más.

Bueno ya aprendimos a como colocar barras de desplazamiento a la sección de las entradas. Ahora a PERSONALIZARLA! Existen dos formas de personalizarlas, A COLORES y CON FONDO. No se preocupen que ambos métodos se los voy a enseñar.

Aquí viene el PASO A PASO

1. Desde la opción Tema de Blogger, clic en el botón  Personalizar 
2. Clic en Opciones avanzadas y buscamos Agregar CSS.
3. Copia y pega el siguiente código. Clic en  Aplicar al blog 

Código a Colores

/* scrollbar ----------------------------------------------- */ ::-webkit-scrollbar { height: 12px; width: 15px; background: #feaaaa; } ::-webkit-scrollbar-thumb { background: #000; -Moz-border-radius: 5px; border-radius: 5px; }

Código con Fondo

/* scrollbar ----------------------------------------------- */ ::-webkit-scrollbar { height: 12px; width: 15px; background: url(#); } ::-webkit-scrollbar-thumb { background: url(#); -Moz-border-radius: 5px; border-radius: 5px; }

Modificaciones

• Código a Colores: cambiar background por el código html del color deseado.
• Código con Fondo: cambiar el background donde dice url, cambiar el símbolo de numeración (#) por el enlace de la imagen que se desee.
• A continuación dejo cuatro códigos para cambiar la forma de la Barra de Desplazamiento. Sólo hay que cambiar la siguiente línea  -Moz-border-radius: 5px; border-radius: 5px;  por cualquiera de los códigos de abajo.

                        

A  -Moz-border-radius: 5px; border-radius: 5px;
B  -Moz-border-radius-bottomRight: 50px 25px; border-bottom-right-radius: 50px 25px; -Moz-border-radius-topLeft: 50px 25px; border-top-left-radius: 50px 25px;

C  -Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;

D  -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px; -Moz-border-left-bottomleft: 50px; border-bottom-left-radius: 50px;

Barras de desplazamiento en el POST

Este es el mejor (megarchicalifragilistico *o*) TRUCO para blogger que pude aprender. Llevo tiempo buscando como Colocar barras de desplazamiento de la entrada de blogger (no me fue fácil hallarlo). Así que aquí comparto con ustedes este hermoso tutorial; ya que, si tu eres de l@s que hacen "kilómetro y kilómetros" de entradas (todo un testamento) al igual que yo. LOL. Este tutorial te quedará como anillo al dedo.

AQUÍ VAMOS CON EL PASO A PASO!

CLIC EN IMG. PARA AGRANDAR

PRIMERO: Clic en 'Diseño → Plantilla → Edición de HTML' y buscaremos (usa Control+G) .post {  ó .main-inner .column-center-inner {

Si tu plantilla es una versión antigua o si tienes una versión actual (respectivamente).

SEGUNDO: Pega el sgte. código debajo de .post {  ó .main-inner .column-center-inner {

Quedando así...

.post { height:200px overflow:auto; }

ó

.main-inner .column-center-inner { height:700px; overflow: auto; padding: 0 0;

TERCERO Y ULTIMO: Clic en 'Vista previa' (¿todo bien?). Ahora 'Guardar plantilla'. Y eso es todo, ya tienes una barra de desplazamiento en la sección de entrada (post).

A que están bien chulis? Neta?

Cualquier duda o pedido hacérmela saber. Hasta el sgte. post! ＼(・｀(ｪ)・)/

Esquinas redondeadas 【Sidebar】

Hoy ando inspirada! ᕙ(⇀‸↼‶)ᕗ Publicaré todos los tutoriales que encuentre!! WUW!

Ya les enseñe como Colocar 3 columnas bajo la cabecera. Así que aprovechando eso, aquí dejo una forma muy pero MUY FACIL de convertir las esquinas de los Sidebar a redonditas! ¿Listos para el paso a paso? GO!!!!!!

Clic en las img. para agrandar

PRIMERO: Escogemos el sidebar que deseamos modificar las esquinas. En mi caso, escogí 'Crosscol'.

Y así es como se vé mi Sibebar, cuadradito.

Así que trabajaremos en base a ese. Vamos a 'Diseño → Plantilla → Edición de HTML'

Buscamos (Control+F): #crosscol-columna-contenedor{

Aparecerá lo siguiente:

#crosscol-columna-contenedor{ background: #000; margin: 0 -20px 0 -20px; clear:both; }

SEGUNDO: Existen MUCHAS formas para modificar las esquinas, y hoy les enseñaré 2 de ellas...

A) Todas las esquinas curvas: Pega el sgte. código después de 'margin'

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

Deberá de quedar así:

#crosscol-columna-contenedor{ background: #000; margin: 0 -20px 0 -20px; -moz-border-radius: 24px; -webkit-border-radius: 24px; clear:both; }

Clic en 'Vista previa' y se verá esto:

Ahora todas las equinas son curvas

B) Esquinas superiores curvas: Pegamos el sgte. código después de 'margin'

-moz-border-radius-topright: 1em;

-moz-border-radius-topleft: 1em;

-webkit-border-top-right-radius: 24px;

-webkit-border-top-left-radius: 24px;

Quedando así:

#crosscol-columna-contenedor{ background: #000; margin: 0 -20px 0 -20px; -moz-border-radius-topright: 1em; -moz-border-radius-topleft: 1em; -webkit-border-top-right-radius: 24px; -webkit-border-top-left-radius: 24px; clear:both; }

Clic en vista previa:

Y este es el que he escogido yo (✪㉨✪)

TERCERO: Una vez escogido la foma A o B le damos clic en 'Guardar plantilla' y LISTO!

Nota:

- Para modificar cuán grande va a ser la curva solo cambiamos el 24px por cualquier otro número.

- Mientras menor sea el número, menor será la curva. Es decir que si es 0 la curva será nula.

- Puede modificarse cualquier Sidebar, sólo elige el tuyo y sigue los mismos pasos.

Es todo y espero que les haya sido útil, bye byeeeeeeeee!!! ＼(・｀(ｪ)・)/

Nemuri Kuma Arcoiris 【Template】

Kyaaaaaaaaaaaaaaaaaaaaaaaa!!!

Mi plantilla está casi terminada.

Digo 'casi' porque aún tengo planeado agregarle una que otra cosilla.

¿QUE TAL ME QUEDO?

Rilakkuma Icon 【Favicon】

Hace unos días descargue una serie de íconos para favicon ¿Y qué tiene de bueno esto? QUE SON DE RILAKKUMAAAAAAAAAA!!!!!!

Si! Si! (*ノ・ω・）Soy fan de Rilakkuma

¿Algún problema?  (｀(エ)´)ﾉ

Bueno aquí dejo la descarga! ＼(・｀(ｪ)・)/

Espero que les guste!

Colocar 3 columnas bajo la cabecera 【header】 - Crosscol

ESTA PUBLICACIÓN HA SIDO CERRADA, PASE POR FAVOR A LA ACTUALIZACIÓN DE ESTA → {X}

Si deseas colocar 3 columnas debajo de la cabecera, osea la sección crosscol, sigue los siguientes pasos.

Descarga una copia de tu plantilla, sólo por precaución.

PRIMERO: Vamos a 'Diseño → Plantilla → Edición de HTML → Continuar' y buscamos (Ctrl + F):
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
Nos aparecerá esto:

---

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

---

SEGUNDO: Sustituimos todo el código en color rosado por:

---

<div id='crosscol-wrapper' style='text-align:center'>

<div style='clear:both;'/>

<div id='crosscol-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='crosscol' id='crosscol-bottom' preferred='yes'>

<b:widget id='Text3' locked='false' title='' type='Text'/>

</b:section>

</div>

       <div id='crosscol-columna-contenedor'>

<div id='crosscol2' style='width: 30%; float: left; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol1' preferred='yes' style='float:left;'/>

</div>

<div id='crosscol3' style='width: 40%; float: left; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol2' preferred='yes' style='float:left;'/>

</div>

<div id='crosscol4' style='width: 30%; float: right; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

      </div>

---

TERCERO: Ahora buscamos: ]]></b:skin> y antes de este pegaremos el siguiente código:

---

#crol1{

background:#fff;

margin: 5px;

padding: 5px;

border: 1px solid #60A9D1;

}

#crol2{

background:#fff;

margin: 5px;

padding: 5px;

border: 1px solid #60A9D1;

}

#crol3{

background:#fff;

margin: 5px;

padding: 5px;

border: 1px solid #60A9D1;

}

#crosscol-columna-contenedor {

clear:both;

}

.crosscol-columna {

padding: 10px;

}

---

Le damos clic en 'Vista previa' y, si abre sin problemas le damos clic a 'Guarda plantilla'.

CUARTO Y ULTIMO: Vamos a 'Diseño' y listo! Se han agregado 3 columnas nuevas debajo del header.

Nota:

- Para modificar el color del fondo solo debemos sustituir el códígo '#fff' de background:#fff; por otro código HTML. #fff ó #ffffff es color blanco.

- Para modificr los bordes, dos cosas. Primero, si no quieres los bordes sustituyes el código '1px' de border: 1px solid #60A9D1; por '0'. Segundo, si lo que gustas es quedarte con los bordes y solo cambiarles el color; cambia el código '#60A9D1' de border: 1px solid #60A9D1; por otro.

- Una última cosa MUY IMPORTANTE! No todas las plantillas poseen el código crosscol, si la tuya es una de ellas has lo siguiente. Olvida el paso (1) e iniciemos por el (2), copia el código del SEGUNDO paso y pégalo antes de <div id='main-wrapper'> Y seguimos con el proceso, TERCERO Y CUARTO paso.

Es todo ＼(・｀(ｪ)・)/  muy fácil ¿Verdad?

Cualquier duda házmela saber. Espero que les sirva.

*Créditos de tutorial: El escaparate de Rosa

¿Cómo crear un gif animado con photoshop?

Hace unas semanas atrás aprendí a como crear un gif animado con photoshop. Seguro que muchos ya saben como hacerlo (pero yo no lo sabía LOL), así que aquí les enseñaré el paso a paso.

CLICK EN IMÁGENES PERA VER TAMAÑO NATURAL

PRIMERO: Abrimos el programa, en mi caso es Photoshop CS5. Vamos a 'Archivo → Abrir" y seleccionamos las imágenes que utilizaremos para nuestro GIF.

   

Yo escogí estas (^(エ)^)

SEGUNDO: Montamos una imagen sobre otra. En otras palabras pega todas las imágenes en el mismo lugar.

TERCERO: Ahora clic en 'Ventana → Animación' (img. A) y, en la parte inferior aparecerá la 'Aniación (cuadros)' (img. B). Ya en este paso duplicamos cuadros de animación, clic en 'Duplica los cuadros seleccionados' (img. C).

Img. A

Img. B

Img. C

CUARTO: Ya solo seleccionamos las imágenes (en la sección de 'Capas') en el orden que queramos que vayan apareciendo. Para hacer esto solo debemos dar clic en el ojo que aparece al lado izquierdo de cada capa. Ej: la 'Capa 2' se encuentra seleccionada para el cuadro 1. Esto quiere decir que si hacemos clic de nuevo en el ojo y desaparece esta capa ya no se verá. Aquí hagan uso de su creatividad para crear la secuencia de animación, seleccionando y deseleccionando capas, dando clic en el ojo. Ya finalizada la secuencia de animación da clic en 'PLAY', y mira como cobra vida tu GIF.

Está vivo! ESTÁ VIVOOOO!!

LOL

QUINTO Y ULTIMO: Guardemos nuestro trabajo. Clic en 'Archivo → Guardar para web y dispositivos'. Nos aparecerá una ventana como en la img. de abajo ↓↓↓ Desplegamos la pestaña que se encuentra debajo de 'Ajuste prestablecido' y seleccionamos la opción 'GIF' (donde señala la flecha roja). Le damos guardar y listo!

Este es el resultado final

Tan pinche hermoso (✪㉨✪)

Espero que les haya sido de ayuda este tutorial. Cualquier duda no duden en hacérmela (redundancia LOL).

Nota:

- Yo he modificado el alto de la imagen, que en un inicio era cuadradita y pues ahora es rectangular. Para cambiar el alto o el ancho de una imagen ve a 'Imagen → Tamaño de lienzo', ahí podrás modificar los pixeles a la imagen.

- En la secuencia de animación podrás ver que bajo cada uno de los cuadros aparece '0 seg.▼' o simplemente 0. Ese es el tiempo predeterminado para cada img. Es decir el tiempo durante el cual se verá cada img. Si haces clic en la flecha (▼) puedes modificar el tiempo. Ej: 0.1 seg, 0.2 seg, 1 seg, etc.

- También le agregué texto a mi GIF, es muy fácil (cualquier duda sobre esto decirla). Así que como dije antes, hagan uso de su creatividad y tendrán un GIF animado muy kawaii!

Es todo bye bye ＼(・｀(ｪ)・)/