Annyz-BlOg : Anuncio o Aviso Flotante
para COPIAR los codigos usa la tecla Ctrl + C y para PEGAR usa la tecla Ctrl + V gracias :) El Blog Se visualiza mejor con Google Chrome..

09 noviembre 2012

Anuncio o Aviso Flotante


Ya habia hecho un tutorial hace tiempo sobre un aviso flotante muy cute, pero el problema era que cada que te ibas a un tema o le dabas adelante volvia a aparecer y bueno era algo molesto u.u. Esta vez traigo un tutorial algo similar con un aviso flotante pero este aparece solo una vez y este lo hace en lo que es la pagina principal.. cada que le des home aparecera ok?

Notita: para copiar los codigos por favor utiliza la tecla ctrl+la letra C ya que la funcion de boton derecho lo tengo desactivado.. sorry por las molestias >.<


Bueno empezemos:

Primeramente nos vamos a Diseno Añadir gadget Html/Javascript y pegamos este codigo en el:

<script type="text/javascript">
/***********************************************
* Sticky Note script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Go to http://www.dynamicdrive.com/ for full source code
 ***********************************************/
//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.
var displaymode="always"
var enablefade="yes" //("yes" to enable fade in effect, "no" to disable)
var autohidebox=["yes", 1800] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]
var showonscroll="yes" //Should box remain visible even when user scrolls page? ("yes"/"no)
var IEfadelength=1 //fade in duration for IE, in seconds
var Mozfadedegree=0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)
////////No need to edit beyond here///////////
if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
function displayfadeinbox(){
var ie=document.all && !window.opera
var dom=document.getElementById
iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
var docwidth=(ie)? iebody.clientWidth : window.innerWidth
docheight=(ie)? iebody.clientHeight: window.innerHeight
var objwidth=objref.offsetWidth
objheight=objref.offsetHeight
objref.style.left=docwidth/2-objwidth/2+"px"
 objref.style.top=scroll_top+docheight/2-objheight/2+"px"
if (showonscroll=="yes")
showonscrollvar=setInterval("staticfadebox()", 50)
if (enablefade=="yes" && objref.filters){
objref.filters[0].duration=IEfadelength
objref.filters[0].Apply()
objref.filters[0].Play()
}
objref.style.visibility="visible"
if (objref.style.MozOpacity){
if (enablefade=="yes")
mozfadevar=setInterval("mozfadefx()", 90)
else{
objref.style.MozOpacity=1
controlledhidebox()
}
}
else
controlledhidebox()
 }
function mozfadefx(){
if (parseFloat(objref.style.MozOpacity)<1)
objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
else{
clearInterval(mozfadevar)
controlledhidebox()
}
 }
function staticfadebox(){
var ie=document.all && !window.opera
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
 }
function hidefadebox(){
objref.style.visibility="hidden"
if (typeof showonscrollvar!="undefined")
clearInterval(showonscrollvar)
 }
function controlledhidebox(){
if (autohidebox[0]=="yes"){
var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
setTimeout("hidefadebox()", delayvar)
}
 }
function initfunction(){
setTimeout("displayfadeinbox()", 100)
 }
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length> 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
 }
if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", initfunction)
else if (document.getElementById)
window.onload=initfunction
document.cookie="fadedin=yes"
}
</script>

dar guardar


Despues nos vamos a  plantilla  Edicion Html Continuar

Buscamos ]]></b:skin> y copiamos el siguiente codigo justo arriba de el:

#fadeinbox{
position:absolute;
width: 265px;
left: 0;
top: -400px;
border: 1px dashed #FFD9F0;
background:url("http://www.drikoti.net/Uploads/back06.gif");
padding: 4px;
z-index: 300;
visibility:hidden;
}

Azul: Edita el grosor del borde, tipo de borde y color
Rosa: fondo de la cajita

Nos falta un ultimo paso, no se desesperen oki ^^ ahora buscamos  </body> (generalmente se encuentra casi al final de la plantilla) y pegamos este codigo:

<div id='fadeinbox' style='filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) ; -moz-opacity:0'>
<center><b><font color='#FF99CC'>TITULO</font></b></center><br/><center><img src='http://img80.imageshack.us/img80/4513/myavatar170027661.gif'/></center><br/>
<center><font color='#848484'>AQUI TU MENSAJE</font><br/></center><br/>
<div align='right'><b><font color='#FF99CC'>GRACIAS</font></b>
<a href='#' onClick='hidefadebox();return false'>[x]</a></div>
</div>

y listo terminamos.. da vista previa y visualiza tu cartelito.. luego das guardar ^^

Plis no copiar el tutorial.. no copycat :)

12 comentarios:

  1. me gustaria hablar contigo me das tu correo electronico por favor!!!

    ResponderEliminar
  2. oooh si yo ya tenia prediseñado uno que habias puesto pero como cada vez que atrasaba una pagina o le ponias leer mas etc se ponia eso y lo quite porque senti que era muy molesto :/
    espero probar con este nuevo truco annyz *oo*
    tienes super poderes verdad
    alguien me lo dijo ya dilo jiji XD bromeo
    tan encantadora y kawaii como siempre annyz un beso
    hasta el infinito y mas alla linda ^^
    kisess :*
    si tengo falla te digo okis byee

    ResponderEliminar
  3. ¡Hoola preciosa! He encontrado tu blog por casualidad ¿Y que puedo decir? Pues que me encanta ♥ ya te sigo. Y me gustaría muchísimo que te pasaras por mi blog y comentes o te hicieras seguidora (^.^) http://my-diaryevery-day.blogspot.com.es/

    ResponderEliminar
  4. Me encanta TITI =)
    puede que lo coloque en mi blog cuando tenga tiempo
    y puedes seguir mi blog y comentar algo?
    es que me gustaria mucho muchisimo
    Besos y bye
    By Elii

    ResponderEliminar
    Respuestas
    1. la dire del blog que se me olvidaba =P
      http://el-rinconcito-de-eli.blogspot.com.es/

      Eliminar
  5. Holii n.n
    Esta genial el tuto, pero esto de la cajita nunca me funca -w-
    Podrías hacer un tuto de como hacer que cuando pases el cursor por un link te aparezca una mini ventanita como en lo de subir y los afiliados, me encantaría que lo hagas!!!!!! Grax n.n saludos~

    ResponderEliminar
  6. Es un gusto para mí poder comentar en tu blog.. realmente está hermoso. :D Gracias por compartir con todos nosotros.. :D tus conocimientos. :D

    ResponderEliminar
  7. Ke bien es lo ke necesitaba grax n.n

    ResponderEliminar
  8. HOLA GRACIAS POR EL TUTO!! PERO ME GUSTARIA SABER COMO HICISTES ESA IMAGEN DE LA CHICA QUE CAMBIA DE COLOR ESTA LOKASO PORFISSSS ESCRIBEME A MI CORREO znlrs_15@hotmail.com

    ResponderEliminar
  9. Hola annyz ^^ Me encantan las cosas que pones sin muy hermosas y siempre que puedo intento mejorar mi blog con tus cosas =) Pero siempre tengo la misma duda y no puedo hacer algunas cosas: Cuando voy a plantilla y después a editar HTLM no encuentro las cosas que me dices... No sé si hago algo mal o es que nunca lo entiendo =( Espero que me entiendas y me respondas jeje ^^
    Muchos besos,
    Amaia <3

    ResponderEliminar
    Respuestas
    1. a mi tambien aveces me pasa lo mismo pero luego veo que tiene un peque;o especio antes de la palabra o pruevo escribiento todo yo y me funciona

      Eliminar