"Circle Effect" Comentarios.

El mismo efecto que vimos en el tutorial "date circle effect"

lo aplicaremos en este tutorial a nuestro link de comentarios.

Vamos A Diseño: "Entradas del blog" / "Editar"
En comentarios colocar la linea:

 

Luego de guardar, vamos a Plantilla / Edición HTML, Buscamos [CTRL + F]:

]]></b:skin>

ARRIBA Pegamos:

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 Lo Que Esta Marcado:

com-circle [circulo normal]

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 de guardar Expandir Plantillas De Artilugios & Buscamos:

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
        <data:post.commentLabelFull/>:
      </a>

Encontraremos DOS Lineas iguales, cambia la primera {pero si quieres, para seguridad cambia las dos}.

Cambiamos COMPLETO Por:

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