Kuma's designs: diciembre 2012

Bievenida Mariia-chan a la publicidad de Nemuri Kuma

29.12.12

Demos una grata bienvenida a Mariia-cha del blog Para Chicas!! El día de ella se une a la sección de publicidad (parte superior del blog). Así que pasen y visiten los blog recomendados. Hasta más rato (nwn)/ Byesuuuuu.

No olviden que le envío mucho besos chocolatosos (* 3*) chu~

Botones UP [¿Subes?]

Pedido de Dayi [Firma]

La verdad es que no me decidía de a que tamaño hacerlo, así que hice tres tamaños jeje. Dayi espero que te guste (^^). Puedes copiarlos sin problemas, ya volví a activar el anticlic. Bueno...Byeneeeeeee! Hasta dentro de un rato con otra publicación. Si tienes algún pedido déjalo AQUÍ, sólo tienes que llenar el formulario.

Dificultad de los Tutoriales [Nuevo]

28.12.12

Buenos días!!!! YEY! Kuma's here!!! (✪㉨✪) Pues bien estuve pensando en esta guía u orientación de que cuanta es la dificultad de lo tutoriales. Es decir antes de iniciar un tutorial al inicio estará una de las sgtes. imágenes.

Esto está muy claro no? (｡･ω･｡) De todas formas lo explicaré. Una estrellita equivale al nivel fácil y, un nivel fácil será para los tutoriales de widgets o de recursos. Dos estrellitas equivale al nivel medio, nivel que usaré para los tutoriales algo complicados pero fácil (en los que tendré que usar capturas). Y por último, tres estrellitas igual a el nivel difícil. Este nivel es para los tutoriales más elaborados, y por lo general tendré que usar un videotutorial (ya que necesitarán ser explicados detalladamente).

Bueno es todo. Les mando muchos besos chocolatosos!!! (* 3*) chuuu~!

¿Que les ha parece?

Coloca una cajita de Publicidad y Anuncios en tu blog

27.12.12

Buenas tardes everybody!!! ＼(・｀(ｪ)・)/ KUMA'S HERE!!!!!!!!!!!!!!! ¿Cómo están? Yo estoy de maravillas (✪㉨✪) Estoy tan emocionada porque en 7 días ya será primero de Enero. Nuevo año, nuevas cosas, nuevas experiencias (*-*) NUEVO TODO!!! ...........OK! sin tanto barullo(?) iniciemos con esto. Y este tutorial llega gracias a pedido de la linda Kumy de clasic and Love.

No se si ya han notado la cajita de publicidad que coloque en la sección superior del blog. Bueno si no lo vieron (lo cual dudo jajaja) abajo dejo una captura animada que hice de el y, comencemos ya con este tutorial.

¿CHULÍSIMO VERDAD?

Recuerda siempre, antes de modificar algo en tu platilla (template), descargar una copia de ella.

Código del scrip (efecto)

1ro: Vas a 'Plantilla → Edición de HTML → Continuar'.
2do: Ahora dale al botón F3 y escribe </body>
3ro: Antes de este pega el sgte. código.

Código para darle estilo a nuestra cajita

1ro: Otra vez usa F3 y escribe ]]></b:skin>
2do: Pega el sgte. código antes de este. Después de haberlo pegado procede a guardar la plantilla.

/* NIVO SLIDER STYLES */  #slider-container { width: 304px; height: 160px; background: #FFF; margin-bottom: 15px; }  .nivoSlider { position:relative; }  .nivoSlider img { position:absolute; top:0px; left:0px; }  .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; }  .nivo-slice { display:block; position:absolute; z-index:50; height:100%; }  .nivo-caption { position:absolute; right:0px; top:3px; background: #F37BB5; /*Fondo del texto*/ color:#fff; /*Color del texto*/ opacity:0.8; width: auto !important; max-width: 340px !important; z-index:89; display: inline !important; }  .nivo-caption p { padding:5px; margin:0; font-size:20px; color: #FFF; text-align: center; font-family: 'Yanone Kaffeesatz Light', Helvetica, Arial; /*Estilos de letra*/ }  .nivo-caption a { display:inline !important; color: #FFF; }  .nivo-html-caption { display:none; }  .nivo-directionNav a { display:none; position:absolute; top:45%; z-index:99; cursor:pointer; }  .nivo-prevNav { left:0px; }  .nivo-nextNav { right:0px; }  .nivo-controlNav a { position: relative; z-index:99; cursor:pointer; }  .nivo-controlNav a.active { font-weight:bold; }  #slider { float: left; position:relative; width:340px; height:160px; background: #000 url(http://3.bp.blogspot.com/-6w97wpjc-Z4/T1iBh31nDxI/AAAAAAAADkA/Pcbj_TBzFXU/s000/loading.png) no-repeat 50% 50%; }  #slider img { position:absolute; top:0px; left:0px; display:none; }  #slider a { border:0; display:block; }  .nivo-controlNav { position:absolute; left:230px; bottom:-40px; }  .nivo-controlNav a { width:18px; height: 18px; background: url(http://1.bp.blogspot.com/-6On_LBcfTZM/T1iBh0m6IuI/AAAAAAAADkI/4lcKUMum430/s000/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:7px; float:left; }  .nivo-controlNav a.active { background-position:0 -22px; }  .nivo-directionNav a { display:none; height:0px; background:url(http://4.bp.blogspot.com/-rEBM9ddyz5E/T1iBiNT8MgI/AAAAAAAADkQ/8eMBD8nTGk0/s000/arrows.png) no-repeat; text-indent:-9999px; border:0; }  a.nivo-nextNav { background-position:-30px 0; right:15px; }  a.nivo-prevNav { left:15px; }  .nivo-caption { text-shadow:none; }  .nivo-caption a { color:#efe9d1; text-decoration:underline; }

Como editar el estilo de nuestra cajita al final, en NOTA.

Código de nuestra cajita

1ro: Ahora ve a 'Diseño' y añade un nuevo Gadget, selecciona la opción de HTML/Javascript y pega el sgte. código.

<div id='slider-container'>
<div id='slider'>
<a href='URL DE WEB' title='TITULO DE ANUNCIO'>
<img alt='' src='URL DE LA IMG' title='TITULO DE ANUNCIO'/>
</a>
  <a href='URL DE WEB' title='TITULO DE ANUNCIO'>
<img alt='' src='URL DE LA IMG' title='TITULO DE ANUNCIO'/>
</a>
  <a href='URL DE WEB' title='TITULO DE ANUNCIO'>
<img alt='' src='URL DE LA IMG' title='TITULO DE ANUNCIO'/>
</a>
   </div>
</div>
<img src="http://img22.imageshack.us/img22/1218/publico.gif" />

Guarda todo y mira tu blog. Ya tiene una sección de anuncios y publicidad en tu blog! YEY!!! (✪0✪)

NOTA:

Lo que está pintado en morado es la URL de esta img (↓↓↓) Solo tienes que reemplazarla con una tuya en la que esté tu correo o colocar cualquier otro mensaje (el que gustes), o puedes eliminarla. Si deseas puedo editar una imagen para que se adapte a tu blog (se aceptan pedido ^^).

Las imágenes deben ser de un ancho (width) y alto (height) de 304px y 160px, respectivamente. Para que se vean de tamaño completo y no salga cortadas por abajo y la derecha.
Por último. Para darle tu propio estilo a la cajita puedes: Cambiar el color de texto y fondo del mismo, solo modifica donde dice background: #F37BB5; /*Fondo del texto*/ y color:#fff; /*Color del texto*/ ...Y finalmente ponle el tipo de letra que quieras en font-family: 'Yanone Kaffeesatz Light', Helvetica, Arial; /*Estilos de letra*/ Cambia Yanone (es el que yo uso) por cualquiera de las otras a su derecha como Helvetica o Arial.
Recuerda que el estilo de letra (fuente) que quieras usar siempre debe de estar entre comilla. Por ejemplo: 'nombre de fuente'. Ah! y existen muchos más fuentes solo ve a tu word y copia algún nombre de la fuente que más te guste (*-*)

OK Eso fue TODO!!! Me marcho ya, que en un rato es hora del almuerzo y hoy me toca cocinar (*O*). Hasta más tarde. Les mando muchos besos chocolatosos (* 3*) chu~!

Feliz Navidad everybody

25.12.12

MI REGALO DE NAVIDAD (*0*), ME LO DIÓ PAPÁ YAY!!!

Acabo de despertar (/ ^0^)/. Oh sí mi primer pensamiento al despertar fue "prende el ordenador y actualiza Nemuri Kuma" ....jajajaja.

FELIZ NAVIDAD A TODOS MIS SEGUIDORES

(...y a los que no lo son también nwn)

Me he pasado por el blog un rato porque quería dejarles un saludito por el día de hoy. Lamentablemente hoy tampoco publico tutorial ya que aún la fiesta continúa \(*o*)/ WUW! Están por llegar más familiares el día de hoy, así que será hasta mañana con los tutoriales.

Por cierto, para mañana habrá tutoriales y otras sorpresitas (¬ w¬) ...Prepárense! Hasta mañana (*O*)/ Byeneeeeeeeeeeeeeeeeee.

Feliz Noche Buenaaaaa!!! Kuma regresó!

24.12.12

Blog cerrado por remodelación

17.12.12

Y llegó el tiempo de irme de aquí... Cierre de blog y Remodelación!!!

11.12.12

Estuve jugando con la plantilla de mi blog de pruebas, y además que ya quería hacer esto hace mucho, así que... ME DECIDÍ POR REDISEÑAR MI BLOG. Así es Nemuri Kuma se reinventará (*O*), ok no tanto, solo haré una pequeñas modificaciones es todo.

Entonces dejo esta publicación como anuncio de que, terminada mi semana de exámenes finales Nemuri Kuma cierra el acceso para sus seguidores y visitantes en general. El cierre ocurrirá el lunes 17/Dic y reabrirá el 24/Dic (si! misma noche buena jejeje).

Prometo regresar con muchas sorpresas, nuevos tutoriales (nivel intensivo *o* prepárense!), más recursos bellos, y entre otras cosillas que tengo por ahí └（★ｏ★）┐

Pues bien, me retiro. Que pasen unos buenos días de exámenes, si de seguro ya vienen sus finales o como yo...ya estas en esa espantosa semana de exámenes finales (×_×;）ANIMOS!!! Gambatte mina san!!! (*O*)!!!

PD: No olviden participar en la encuesta ¿Qué te gustaría leer más en un blog? Y, si ya participaste pásale la voz a tu hermana o hermano, a tu papá, a tu mamá, a la abuela, al abuelo, al perro o al gato xD. PARTICIPA YA!!

Finales is near!!! OMG!!

8.12.12

Ganadoras del concurso: Yo Diseño

7.12.12

Y como dije, hoy viernes 7 de diciembre publicaré los puntajes y las ganadoras del concurso YO DISEÑO (✪0✪). Pero antes de publicar el PRIMER y el SEGUNDO lugar, les recordaré cuales son los premios que gana cada una de las ganadoras.

Los premios que recibirán el 1er y 2do lugar son:

1er Lugar: Plantilla Original y Personalizada + Pack de renders + Banner del Premio + Bloc de Notas + Publicidad en mi blog
2do Lugar: Plantilla Original y Personalizada + Banner del Premio + Publicidad en mi blog

Pues bien haciendo el último recuento (la suma de puntos) las ganadoras son... mis felicitaciones para ellas (*O*) kyaaaaaaaaaaaaaaaaa -redoble de tambores- Y LAS GANADORAS SON!!!!

Candela-chan (actualmente Kumi jejeje) en primer lugar y Dayi-chan!!!!!!! en segundo! WUW!

Felicitaciones chicas .・゜゜・（／。＼）・゜゜・． -emocionada- Repórtence pronto para coordinar la entrega de sus premios.

Bueno eso fue todo con el concurso ヽ(｡ゝω・｡)ﾉ Hasta la próxima actividad, o más bien hasta la sgte. publicación (*≧▽≦)ﾉｼ)) Bye-nyappy!

Personaliza el color de texto seleccionado

6.12.12

HELLO!!! (o sí! I know english! *-*). Hoy traigo otro tutorial facilísimo que aprendí. La verdad que lo aprendí hace mucho pero de la forma más complicada, pero hace unos días encontré el método de hacerlo desde CSS. Si! Si! Como en el tutorial anterior a este, esta vez también haremos uso del CSS de Blogger.

Antes de iniciar con el paso a paso les diré de que va este tutorial. Bueno pues, como lo dice el título "personaliza el color del texto seleccionado". No sé si lo habrán notado pero, ahora cuando seleccionan cualquier texto en mi blog se pinta de color rosado el fondo y las letras se quedan en blanco más un resplandor también en blanco (*O*). Y si no lo has notado lo estás intentado probar ahora (*≧▽≦)ﾉｼ)) Pues ya ven que no es tradicional azul, que por defecto se ve en la mayoría de exploradores.

¿Cómo lo hice? ¿Cómo queda? Pues dejo como siempre dejo una foto de la aplicación y, iniciemos ya con el paso a paso ヽ(｡ゝω・｡)ﾉ.

PASO 1: Ve a 'Plantilla → Personalizar → Avanzado → Añadir CSS'

PASO 2: Pega el sgte. código en el recuadro blando de la derecha .

/* Color texto seleccionado */
/* webkit, opera, IE9 */

::selection { background:#F5A9BC; color:#fff; }

/* mozilla firefox */
::-moz-selection { background:#F5A9BC; color #fff; }

PASO 3: Clic en Aplicar a blog y listo! Disfruta seleccionando textos(?) jejeje.

Nota

Para personalizar el color de fondo cambia el background y para color de letra cambia color.
Cambia los códigos de color en ambos por igual ya que este aplicación se puede ver en cualquier navegador (explorador: Firefox, Opera, Chrome, incluso Internet Explorer).
Consigue los códigos HTML de los colores en Colores: Código HTML

Espero que les haya gustado este tutorial. Hasta la próxima! See you!! （＾∀＾）ノ

Personaliza el color de texto seleccionado

Selecciona el texto

/* Ejemplo de párrafo para selección */ Lorem ipsum dolor sit amet consectetur adipiscing elit nec, porttitor turpis nam tincidunt lectus magnis pharetra viverra vestibulum, dignissim luctus at ornare parturient arcu eleifend. Primis penatibus felis sollicitudin est phasellus maecenas ad nisi nam at rhoncus vitae, mi posuere volutpat enim erat nec tortor gravida nullam pretium.

Hoy traigo otro tutorial fácil que aprendí hace mucho pero de la forma más complicada, sin embargo hace unos días encontré el método de hacerlo desde CSS.

Entonces pasemos al PASO a PASO

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

MODIFICACIONES

Para personalizar el color de fondo cambia el background y para color de letra cambia color.
Cambia los códigos de color en ambos por igual ya que este aplicación se puede ver en cualquier navegador (explorador: Firefox, Opera, Chrome, incluso Internet Explorer).
Consigue los códigos HTML de los colores en Colores: Código HTML

Menú Lateral con efecto deslizante (Código corregido)

5.12.12

Continuando con la publicación anterior, S.0.S. Códigos fallando! (0_0). Y ayer mismo, ni bien terminé la publicación, me puse a buscar entre los códigos que tenía guardado en mis marcadores (si los guardo por ahí XD) y hallé la solución del segundo problema (sabía que lo tenía por ahí *0*).

El segundo problema era, EL MENÚ LATERAL CON EFECTO DESLIZANTE. El código de este widget le estuvo fallando a Danni-chan, y me pidió de favor que le ayudase con ese problemita. Bueno antes de comenzar con el paso a paso del tutorial debo decir que, los créditos de las imágenes del menú son para Annyz y también el antiguo código (que por alguna razón caducó), pueden verlo en Cute menu con efecto deslizante.

NUEVO CÓDIGO

[ PARA EL EFECTO ]

PASO 1: Clic en 'Plantilla → Personalizar → Avanzado'. Y en la larga lista que esta en la segunda columna, bajar hasta el final y clic en 'Añadir CSS'.

PASO 2: Pegar el sgte. código en el recuadro en blanco a la derecha. Y aplicar al blog.

#gallery {
padding:0;
margin:0;
list-style-type:none;
overflow:hidden;
width:230px;
height:330px;
}
#gallery li {
float:left;
}
#gallery li a {
display:block;
height:30px;
width:230px;
float:left;
text-decoration:none;
cursor:default;
}
#gallery li a img {
width:230px;
border:0;
}
#gallery li a:hover {
background:#eee;
height:149px;
}
#gallery li a:hover img {
height:149px;
}

[ PARA EL WIDGET ]

PASO 1: Ahora clic en 'Diseño → Añadir un gadget → HTML/JavaScript'

PASO 2: Pega el sgte. código y guarda.

<ul id="gallery">
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/tutoyrecursos.png" /></a></li>
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/photoshops.png" /></a></li>
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/afiliados.png" /></a></li>
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/renders.png" /></a></li>
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/recetas.png" /></a></li>
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/creditos.png" /></a></li>
<li><a href="URL">
</a></li></ul>

NOTA: En donde esta URL sólo debes reemplazarlo por el código que le sigue a la url de tu blog. Por ejemplo para la pestaña tutoriales has creado una entrada y el url te ha quedado así http://aquí-dice-la-url-de-tu-blog.blogspot.com/tutoriales. Entonces a URL lo reemplazarás por la parte pintada en azul, ya que lo que está resaltado en fucsia ya esta predeterminado en esta aplicación. Debiendo, por ejemplo, quedar así cuando lo reemplaces: a href="tutoriales"

Bien es todo, al final quedará igual que la imagen de arriba (↑↑↑). Espero que te haya sido de ayuda Danni-chan (*0*), te mando un mega-abrazote! Y espero que quién le haya fallado el código también les haya sido de ayuda este tutorial (^^), hasta la próxima. AY! Aún me falta un tercer problema por resolver (ash!¬¬).

S.0.S. Códigos fallando! (0_0)

4.12.12

Como leyeron en el título, últimamente en Blogger han estado fallando varios códigos. No sé si ustedes lo habrán notado, pero en mi blog y en el de unas amigas ha pasado lo mismo. Comenzó a fallar por ejemplo: el código de Comentarios Recientes, el menú Extras, y el menú lateral con efecto deslizante hacia arriba. Abajo (↓↓↓) una foto de ellos.

El primer widget, COMENTARIOS RECIENTES, actualmente se ve porque lo corregí. Sin embargo es la segunda vez que lo corrijo, y no es que esté mal el código porque siempre uso el mismo código y lo acepta. Si el código estuviera mal no aparecería el widget, como sucede las veces que falla. ¿Se les desaparece este widget también?

El segundo widget, MENÚ EXTRAS, este no lo he podido corregir aún. Debería verse por pestañas y todo de porrazo.

Y el tercero, MENÚ LATERAL, le anda fallando a una amiga (Danni-chan). El efecto hover deslizante desapareció y se ven las imágenes en lista (una bajo de la otra), en vez de mostrarse ocultas y aparecer sólo cuando se pasa el mouse sobre ellas. Créditos de la tercera captura para Annyz.

Bueno la solución al primer problema ya lo tengo, pero aún me falta los otros dos. En fin, mientras le encuentro la solución a los dos últimos, dejaré la solución del problema con el widget de Comentarios Recientes.

SOLUCIÓN DEL PROBLEMA

Bueno es muy fácil, sólo visita la sgte. página way2blogging.org y llena el formulario y finalmente clic en azul para agregar el widget. Para más entendimiento abajo (↓↓↓) dejo unas imágenes.

PRIMERO LLENA EL FORMULARIO

CLIC AHÍ PARA AGREGAR

Bien es todo por ahora, iré buscando la solución de esos otros 2 widgets que están fallando (¬､¬). Si algún widget te está dando problemas, dímelo y trataré de ayudarte. Bye-nyappy! (*＾▽＾)／