domingo, 12 de julio de 2015

como poner una notita deslisante en tu blog



Hola! amigos y amigas   en esta oportunidad les traigo como poner una notita deslisante en tu blog
 esta notita la vez si das click en donde dice ''clic aqui'' en la barra de alado ps esta hermosa y ps bien primero que nada haras lo siguiente..

Vas a ir a 'DISEÑO' 

Añadir Gadget 

y elije HTML/Javascript

Ahi pondras el siguiente codigo..



<center>
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #ffaad5;
background:#FFFFFF repeat-x bottom center scroll ;
-moz-border-radius:20px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;

at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">

<div style="text-align: center;">
<img src="URL DE LA IMAGEN DE TU PREFERENCIA" />
AQUI TUS ESCRITOS O MENSAJES
</span></div>
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div >
<span ></span></div></a></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" src="URL DE TU IMAGEN CLIC AQUI" alt="PUSH" title="Click"/></a>
</center>

Luego le das a guardar normalmente.

Bueno ahora has los siguientes

Vas a ajustar a tu gusto:

Rojo: Grosor del borde

Verde: tipo de borde

Naranja: Color del borde

Lila: color del fondo de la caja

Rosa palido: Tus escritos o mensajes

Cafe: bueno este es opcional : este es la imagen que puedes añadir , yo puse esa imagen que dise todo y es rosa el cuadro , puedes hacer una en ps y subirla en una pagina como tynipic que te de un link de esa :)
MOrado: Url de la direccion de tu imagen [osea la imagen que yo tengo alado que dice clic aqui ] esa es una imagen que tu puedes hacer en ps y subir a una pagina que te de un link yo uso tynipic y me dan un link de la imagen y esa es la que pongo ahi

Bueno eso es todo


No hay comentarios:

Publicar un comentario