Como editar tu Cbox

¡Hola! lectoras  Que tal?   en esta entrada les enseñare como editar su cbox como el mio tambien les hise unos botoncitos para sus cbox se los dejare al final de la entrada empezemos

• Vamos a diseño
• Añadir un gadget javascrip 

y pegamos el siguiente codigo

<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 del botoncito de cbox" 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>

Creditos a lunay kawaii por este tutorial

Aqui estan los botoncitos que les dije espero que les sirvan

Gracias por su visita! no olvides comentar