jueves, 10 de noviembre de 2011

Intro Mensaje de Bienvenida

Hola chicas buen diaa n.n les traigo un nuevo tuto ^^ muy bonito es el de poner un intro al blog con un mensajito kawaii diciendo bienvenidos asi como el que puse aqui abajito =D!! es muy facil de realizar.. espero les guste ^^!!!

Para ver el intro da clic
aqui para ir a mi blog de pruebas



Para poner el intro en tu blog sigue los siguientes pasitos:

1.- Entra a tu blog

2.- Ve a la pestanita que dice Diseno

3.- Dentro de diseno da clic en Edicion Html
4.- Y donde dice Editar plantilla buscas el codigo:


]]></b:skin>

5.- Cuando lo encuentres copia el siguiente codigo y pegalo justo arriba de ]]></b:skin>

</style></head>
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('wise', 4000); this.style.display='none';
document.getElementById('june').style.display=''">
<center><img src="URL DE LA IMAGEN"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>


6.- Dar vista previa y luego guardar.!!

Amm les hice unos intros no estan muy bonitos hahhah no soy buena en diseno xD pero los hice con carino n.n !!

Ustedes pueden hacer sus propios intros con su estilo es muy facil solo necesitan photoshop e imaginacion, ammm una cosita mas, los intros los hize en fondo transparente, las medidas me salieron un poquito grandes, ustedes pueden hacer las suyas segun mas pequenas si gustan.. me hago entender?? bueno sino dejame tu comentario con gusto te respondo =D!! besitos


Oka ahora los intros que hice xD!!!




http://i1143.photobucket.com/albums/n639/annyz-chaan/annyz-blog/introannyzblog4.png




http://i1143.photobucket.com/albums/n639/annyz-chaan/annyz-blog/introannyzblog.png



http://i1143.photobucket.com/albums/n639/annyz-chaan/annyz-blog/introannyzblog3.png



http://i1143.photobucket.com/albums/n639/annyz-chaan/annyz-blog/introannyzblog2.png

Que tengan un buen dia ^^


50 comentarios:

  1. Genial Annyz este tuto esta muy bueno :)

    ResponderEliminar
  2. Buenisima la tutorial! gracias por compartirla *-* pero la verdad no me funciona u.u no se que hago mal :C pero el titulo me queda fijo no me aparece la imagen T_T me puedes ayudar porfis? *-*

    ResponderEliminar
  3. Que lindop tutooooo!!!! Yo ya lo puse, me quedo re lindo! Aunque luego hare mi propia imgaen mas chiquitita porque esta me quedo grande xD pero aun buen tuto y besos :D

    ResponderEliminar
  4. Hola Annyz!!
    Se le muy lindo el tuto, pero tengo un problema: me gustaría quitarlo para escoger otro y me pone que lo que he borrado coincide con el ID del widget de bienvenida
    Lo que quiero hacer es quitarlo para bien poner otro, pero es que no me deja...
    ayyy...
    besitos! ñ.ñ

    ResponderEliminar
  5. waiii, peroo que genial tutoo!! me encantan todas las cositas que subess,io poco a poco voe haciendo mi blog con tus tutoriales; soy tu seguidoraa, graciass! <3

    ResponderEliminar
  6. iCHigo:

    sii a mi me salieron grandes las medidas xD! seguro a ti te saldran mas bonitas y pequenias. besitos

    ResponderEliminar
  7. hOla nim :

    escojer otro intro hecho por ti?? amm si es asi solo tienes que cambiar la imagen de url.

    Si es para poner otro codigo de otro intro.. solo tienes que borrar el codigo del intro que yo puse, borrarlo completo.

    amm si es otra cosa dimelo es que no te entendi bien xD!

    ResponderEliminar
  8. butterfly :

    claro que si.. en donde tienes problemas?? quieres poner un intro de los que hice? los mios me salieron algo grandes..o.o !! si es uno que tu quieres hacer te recomiendo hacer un intro con medidas mas pequenias..!! recuerda pegar el codigo antes de ]]b:skin>

    si sigues con problemas porfa hazmelos saber

    besos

    ResponderEliminar
  9. de nada nim.. de verdad espero haberte ayudado ..besitos

    ResponderEliminar
  10. Hola Annyz!! Me encanta este tuto. Mira, yo lo puse, y ahora los gadgets me aparecen muy separados unos de los otros. ¿Hay alguna forma de arregrarlo??
    Aquí la prueba: http://seriesdedisneychannel.blogspot.com

    ResponderEliminar
  11. perdona Annyz, me he fijado, y los espacios los hay entre las encuestas, a los demás gadgets no les afecta...

    ResponderEliminar
  12. hOla Yoa :

    no sabia de ese defecto pero acabo de poner tambien yo una encuesta y la miro bien !!! no se porque a ti se te separan :(

    ResponderEliminar
  13. Me quedó genial y tu blog es más que genial ^^ ¡Sos única!

    ResponderEliminar
  14. ok. Intentare buscar algo o así. :) ME encanta tu blog Annyz :)

    ResponderEliminar
  15. Nyyan1 bien kawaii tu entrada lo pondre a prueba arigatouuuu!

    ResponderEliminar
  16. hi annyz. puse este codigo, y me salio todo bien, aparece el intro, lo que pasa es que por cada click que hago en cada de mis entradas, aparece de nuevo el intro, lo que quiero es que solo aparesca una vez, solo cuando se entra al blog, si no me explico bien mira: www.charitto.com y si le das clik a cada cuadrito de mis enlaces se repite varias veces el link @.@ disculpa las molestias >.<

    ResponderEliminar
  17. Teengo mala suerte no se si lo puse mal o deveras soy bien sape para esto... jiji buen tuto (: suerte

    ResponderEliminar
  18. porque no nekita?? donde tienes problemas?

    ResponderEliminar
  19. ----------> CHARITO :

    nena es que asi es el codigo por defecto cada que cambia de pagina aparece x.x

    ResponderEliminar
  20. Hola te qeria comenantar que hago los pasos pongo vista previa y todo bien pero al poner guardar plantilla me dice error en un cuaro anaranjado porqueeeee??????????????????? RESPONDEME URGENTE POR FAVOR pao_yesi_95@hotmail.com gracias hermoso blog lo ame gracias a vos mi blog es genial

    ResponderEliminar
  21. Muchas gracias por todos tus tutoriales, siempre son de grandisima ayuda, hace mucho tiempo no cambio el aspecto de mi blog, poco a poco se me olvida html, siempre viene unos cuantos tutoriales de algunas cosas muchas gracias n.n.

    ResponderEliminar
  22. Me puedes hacer una de Hatsune Miku? esq yo si que soy mala para el photoshop XD

    ResponderEliminar
  23. hola churros de leche:

    sorry nena pero no hago pedidos..

    ResponderEliminar
  24. Hola Annyz ya lo he intentado varias veces y no me funciona no se que hago mal u.u

    ResponderEliminar
    Respuestas
    1. hola my life que plantilla usas ?? quiza ahi esta el problema

      Eliminar
  25. mmm... yo uso Picture Window con el blogger nuevo (≧◡≦) no se si esto ayude gracias por tu atención ....


    P.D perdón si te mande el mensaje dos veces pero es que se volvió a reiniciar la pag y no sabia si te lo mando o no.

    ResponderEliminar
    Respuestas
    1. hola neni yo tambien uso la picture y acabo de seguir el tuto y si me salio el intro.. no se estaras haciendo mal :S estas poniendo el codigo antes de ]] skin?

      Eliminar
    2. no lo hice tal cual dice el tuto cuando pongo vista previa me queda bien esta lindo pero cuando lo quiero guardar me dice que no pudieron completar mi solicitud y me muestran este código de error bX-1714r4 :(

      Eliminar
    3. omg no sabria decirte pq te sale ese errOr tenemos la misma plantilla la picture y a mi no me sale eso.. ya lo probe 2 veces y si me guarda la plantilla sin problemas.. deja checho que es el error bX-1714r4

      Eliminar
    4. mira algunos consejos seria cambiar por otro navegador para ver si te deja guardar (porque ese es error de bloguer los bx-)no del codigo que te doy, usualmente desaparecen solos

      por ejemplo si usas mozilla cirralo y abre tel el chrome o el explorer y trata de hacer el tuto con esos navegadores

      mira otras soluciones

      Solución 1:

      Cambiar de navegador (visto en Blog and web) . Si usas Firefox, cambia a Explorer o Chrome mientras dura el error. Según mi experiencia, casi siempre funciona.

      Solución 2:

      Se me ocurrió borrar los artilugios que están de sobra (los que dice que están a punto de eliminarse) y que de todas maneras se eliminarían al cambiar de plantilla. Se puede hacer desde la edición de elementos o la de HTML (en el primer caso, hay que resfrescar la página luego). Muchas veces sí funciona, aun cuando no sea la causa principal del problema.

      Solución 3:

      Eliminar cookies manualmente o con un software como CCleaner. Pasa que el error se produce al cambiar de una cuenta Google a otra (visto en GosuBlogger). Yo he optado por hacerlo manualmente, para no complicarme más la vida, y lo hago así:

      1. Con Firefox:

      * Herramientas /Opciones /Privacidad /Mostrar cookies /Eliminar todas las cookies

      * o bien Herramientas /Limpiar Datos Privados /Cookies

      2. Con Explorer (lo odio, pero lo pongo para quienes lo usan):

      * Herramientas /Opciones de internet /General /Historial de Exploración /Eliminar

      ojala te sirvan ^^

      Eliminar
  26. por tu culpa......................................





    mi blog se puso bonito jajaja te quiero y grax por tus tutos son buenisimos

    ResponderEliminar
    Respuestas
    1. hhahahaha me diste un sustooo.. me dije aww ahora que hicee T.T hahah grax nena me da gusto que te agraden los tutos y te sean de utilidad =D besos

      Eliminar
  27. hola annys ay tu tuto me encanta pero probe con mi blog annys y no me deja me dice esto : No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "head" must be terminated by the matching end-tag "". la verdad no se que hacer anny y si me gustaria hacer este tuto sera que tu me puedes ayudar a entender porfis te lo agradeceria de antemano gracias annys :)

    ResponderEliminar
    Respuestas
    1. ya me pase por tu blogui y veo que pudiste resolverlo ^^ me da gusto si te haya quedado el truco.. besos

      Eliminar
  28. Annyz eres lo más en la edicion hml no se cuanto no pude pero poniendo en personalizar avansado y añadir un css pude eres llo más siempre mirare tu blog eres mi idola amiga te deceo lo mejor XD

    ResponderEliminar
  29. Primero que nada GENIAL blog! lo amo *-*
    solo tengo una pequeña duda en este tuto ¿cómo lo quito el mensaje de bienvenida? D: lo puse en mi blog y está muy lindo pero no logro quitarlo, borro el código y no se puede, dice que hay un error o algo así .__. me podrías ayudar? n__nU

    ResponderEliminar
    Respuestas
    1. hola nena quiza no le estas quitando todo el codigo.. que te haya faltado un pedazito o letra pero si se puede quitar revisa bien en donde empieza y donde acaba y solo eso borra.. si sigues teniendo problemas hazmelo saber y vere la manera de ayudarte.okis? besos

      Eliminar
  30. Hola anny me encanta este tuto le queda muy bien a mi blog lo que pasa eske tengo un problemilla en la parte superion a la izquierda sale esto:"-->"como puedo quitarlo?¿ mi blog es http://sunnytrucosstardoll.blogspot.com por cierto espero que te o hayas pasado bien en tus vacas

    ResponderEliminar
    Respuestas
    1. grax nena te fui a visitar pero ya no encontre tu blog o.o que paso?

      Eliminar
  31. Annyz muchas gracias por tu tutorial, me ha sido muy útil ^^
    ahora bien, te comento una cosita: el intro sale cada vez que cambio de etiqueta o página de mi blog... ¿conoces alguna forma de que sólo salga cuando entras en la página principal? =O

    ResponderEliminar
    Respuestas
    1. mm si por defecto asi es el script saldra cada que des clic a nueva pagina :( aun no saco el que solo sale una vez.. deja investigo y con gusto pongo el tutorial okas?? beso n.n

      Eliminar
  32. es super cute <3 lo he usado y quedo tan lindo~ :3

    ResponderEliminar
  33. hola amiga una pregunta y en donde lo coloco ya se que en eso del html pero en que lugar pongo la intro ? por que si lo pongo a lado junto a mis demas gadgets se me hace muy grande y se ve mal en donde lo coloco ?

    ResponderEliminar

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