Slider

espacios slider









30 ene. 2014

Tutorial: Circle Effect Comentarios


Hola a todos que hacen? yo estoy oyendo una música de U-kiss  me encanta su músicaa  jiji y bueno ahora empiezo el tutorial, este tutorial es bastante sencillo y queda muy bien en el blog, empezamos?

Sigamos los siguientes pasos

1- Vamos a Diseño/"Entradas del blog"/Editar (Esta en la esquinita de Entradas del blog)
2- En comentarios borramos y escribimos el siguiente código
 



Luego le damos a guardar y nos vamos a Plantilla/Edicion HTML
Buscamos (Ctrol + F)
]]></b:skin>
 y Arriba del código pegamos este otro:
h3 {

  padding-top:10px;
  padding-left:23px;
}
.com-circle {
  padding: 3px;
  width:80px;
  height:80px;
  background: #fff;
  text-align:center;
  border: 5px solid #beea37;
  border-radius: 100%;
  margin-left:-80px;
  margin-bottom:-80px;
  position: absolute;
  bottom: 100%;
  -moz-transition: all 0.4s ease-out;
  -webkit-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
  overflow:hidden;
}
.com-circle a{
  font-size: 50px;
}
.com-circle a{
  text-decoration: none;
}
.com-circle:hover {
  -moz-transition: all 0.4s ease-out;
  -webkit-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
  -webkit-transform: rotate(360deg) ;
  background: #fff;
  border: 5px dotted #ed1670;
}

EDITAMOS:
com - circle: (es el circulo sin pasar el cursor)
background  #f22574;FONDO DEL CIRCULO
border: 3px double #c11b5a; BORDE DEL CIRCULO

com-circle:hover [circulo al pasar el cursor]
background: #fff; COLOR DE FONDO
border: 3px solid #fdce03; BORDE DEL CIRCULO

Luego después de guardarlo Expandimos Plantillas de Artilugios y Buscamos:
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>        <data:post.commentLabelFull/>:      </a>

 Al encontrarla la remplazamos por esta otra y guardamos
<div class='com-circle'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'><b:else/><data:post.numComments/> </b:if></a></div>

Y aquí concluyo este tutorial   

Comenta :3

3 comentarios: