Tutorial:Cbox flotante efecto de circulo 2 ♥

Hola a todas hoy les traigo otro tutorial de circle :3 es parecido al efecto del cbox que tengo n.n¡ agan clic en vista previa para ver como es:

VISTA PREVIA

Sigan los pasitos si lo deseean

Para Plantilla Basica o Blogger: Ir a Diseño/Añadir gadget/HTMLJavacript y pegas el siguiente codigo

Para Plantilla Clasica o Blogskin: Ir a su plantilla y pegar donde lo desee el  codigo

(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )

<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 CBOX CLIC AQUI" width="200"  title="Click"/></a>

 <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;

padding:150px;

background:url(#);

}

</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;">

<style>

/** Cicle GR **/

.grcicle-item {

 width: 100%;

 height: 100%;

 border-radius: 50%;

 position: relative;

 cursor: default;

 box-shadow:

  inset 0 0 0 16px rgba(255,255,255,0.6),

  0 1px 2px rgba(0,0,0,0.1);/*Tamaño de la transparencia del circulo blanco*/

 -webkit-transition: all 0.4s ease-in-out;

 -moz-transition: all 0.4s ease-in-out;

 -o-transition: all 0.4s ease-in-out;

 -ms-transition: all 0.4s ease-in-out;

 transition: all 0.4s ease-in-out;

}

.grcicle-img-1 {

  background-image: url(URL IMAGEN PRINCIPAL);

}

.grcicle-info {

 position: absolute;

background-image: url(Url de Fondo al pasar el cursor);

 width: inherit;

 height: inherit;

 border-radius: 50%;

 opacity: 0;

 -webkit-transition: all 0.4s ease-in-out;

 -moz-transition: all 0.4s ease-in-out;

 -o-transition: all 0.4s ease-in-out;

 -ms-transition: all 0.4s ease-in-out;

 transition: all 0.4s ease-in-out;

 -webkit-transform: scale(0);

 -moz-transform: scale(0);

 -o-transform: scale(0);

 -ms-transform: scale(0);

 transform: scale(0);

 -webkit-backface-visibility: hidden;

}

.grcicle-info h3 {

color: #fff;/*Color de la letra*/

text-transform: uppercase;

letter-spacing: 2px;

font-size: 15px;

margin: 0 10px;

padding: 15px 0 0 0;

height: 10px;

font-family: 'Open Sans', Arial, sans-serif;

}

.grcicle-info p {

 color: #fff;/*Color de texto*/

 padding: 10px 5px;

 font-style: italic;/*Font del texto*/

 margin: 0 30px;

 font-size: 12px;/*Tamaño del texto*/

 opacity: 0;

 -webkit-transition: all 1s ease-in-out 0.4s;

 -moz-transition: all 1s ease-in-out 0.4s;

 -o-transition: all 1s ease-in-out 0.4s;

 -ms-transition: all 1s ease-in-out 0.4s;

 transition: all 1s ease-in-out 0.4s;

}

.grcicle-info p a {

 display: block;

color: #fff;/*Color del texto*/

 font-style: normal;

 font-weight: 700;

 text-transform: uppercase;

 font-size: 9px;/*Tamaño del texto*/

 letter-spacing: 1px;

 padding-top: 4px;

 font-family: 'Open Sans', Arial, sans-serif;/*Font del texto*/

}

.grcicle-info p a:hover {

 color: #fff222;/*Color del texto al pasar el cursor*/

}

.grcicle-item:hover {

 box-shadow:

  inset 0 0 0 1px rgba(255,255,255,0.1),

  0 1px 2px rgba(0,0,0,0.1);

}

.grcicle-item:hover .grcicle-info {

 -webkit-transform: scale(1);

 -moz-transform: scale(1);

 -o-transform: scale(1);

 -ms-transform: scale(1);

 transform: scale(1);

 opacity: 1;

}

.grcicle-item:hover .grcicle-info p {

 opacity: 1;

}

.grcicle-grid {

 margin: 20px 0 0 0;

 padding: 0;

 list-style: none;

 display: block;

 text-align: center;

 width: 100%;

}

.grcicle-grid:after,

.cicle-item:before {

 content: '';

    display: table;

}

.grcicle-grid:after {

 clear: both;

}

.grcicle-grid li {

 width: 320px;/*Ancho del circle*/

 height: 320px;/*Altura del circle*/

 display: inline-block;

 margin:20px;/*Separacion de los circle*/

}

</style><br />

<br />

<div class="grcicle-grid">

     <li>

      <div class="grcicle-item grcicle-img-1">

       <div class="grcicle-info">

       <center>

<div style="background: url(#); border-radius: 20px; margin-top: 20px; width: 190px;">

<br />

<br />

Aqui tu Codigo de Cbox<br />

<center><div id="author"><a href="javascript:void(0);" onclick="showHideAT()"><input style="color: #BFB6FF;background: #fff;border: 2px dashed #AFBBFC; cursor: nw-resize;" type="button" value="Cerrar" class="Cerrar" />

</a></div>

</center>

</div></center>

       </div>

      </div>

     </li></div>

<br />

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div >

<span ></span></div></a></div></div></div></div></div></div></center>

</center>

</div>

<div class="grcicle-thumb grcicle-img">

</div>

</div>

</li>

</div>

</div>

</div></div></div></div></center>

<br />

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div >

<span ></span></div></a></div>

190:Ancho del campo del cbox tiene que estar masomenos que el mismo tamaño del cbox :

Ejemplo mi cbox en vista previa su ancho es 180 y en el ancho del campo es 190 hay una diferencia de 10 o puede ser igual

20:Aumentas el numero y se ira el cbox mas abajo,si disminuyes se ira el cbox para arriba 

BFB6FF:Color de letra del boton Cerrar

fff:Color de fondo del boton cerrar

2:Tamaño del borde del boton cerrar

dashed:Puedes cambiarlo a "solid" o "dotted" para mas CLIC AQUI para que veas los tipos de bordes

Y listo

AFBBFC:Color del borde del boton cerrar

Listo eso es todo n.n¡ Antes estaba desactivado tambien para copiar codigos ,no lo sabia,pero ya esta areglado :3
Codigo:tympanus