Principal | Indice | Ir Arriba
Te recomiendo Rincón Ubuntero

Comentarios Anidados en Blogger


Ya era hora de que Blogger nos diera comentarios anidados por defecto, a muchos nos gusta la controversia y cual es a mejor forma que respondiendo a la opinión de otro participante.

Ahora como muchos les hemos puesto manos a la plantilla no van a activarse por defecto, para activarlos abrimos la plantilla y la editamos en HTML, expandimos los artilugios y buscamos el siguiente código:

<b:include data='post' name='comments'/>

Y la cambiamos por el siguiente, si aparece varias veces las remplazamos a todas:

<b:include data='post' name='threaded_comments'/>

Guardamos la plantilla y va a parecer varias lineas nuevas de código css entre

<b:includable id='threaded_comment_css'>
  <style>
//Lineas css predeterminadas
  </style>
</b:includable>

Ya trate y no se pueden mover, siempre se quedarán en medio de la plantilla así que no pierdan tiempo llevándolas junto al resto de css.

Pueden personalizar el modo de ver los comentarios editado esas lineas o si prefieren les regalo mi configuración, a la que le agregue animaciones css3.

.comments {
  clear: both;
  margin: 10px 0 0 50px; /*Posición de la caja con respecto al margen izquierdo de bloque de contenido*/
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
  margin-bottom: 16px;
}
.comments .comment .comment-actions a {
  padding-top: 5px;
  padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comments .comments-content .comment-header {
 -moz-background-inline-policy: continuous;
 background: none repeat scroll 0 0 #EEEEEE;
 border: 1px solid #CCCCCC;
 font-size: 15px;
 font-weight: normal;
 margin-right: 20px;
 padding: 5px;
}
.comments .comments-content .comment-content {
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
margin-left: 0;
margin-right: 20px;
padding: 7px;
margin-top: -8px;
}
.comments .comment .comment-actions {
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
font-size: 11px;
line-height: 1.4em;
margin: -0.8em 20px 2em 0;
padding: 5px;
text-transform: none;
display: block;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTrWdQ5L8IWrnJiMvrbdD9yI7TVAnqIos_W7TkgJUSOcxoDxbIvvNxygjiT5ETRUdCJgfATRlmxf3w9OQGX5XkpTwF4yoWsUeTJB1EJJcwcDYAn-e_5_XDgJmmyCff8Pa-sJyq6o0aN70/s1600/avatar.png);
height: 60px;
box-shadow: 1px 1px 1px 0 #ccc;
margin-left: -25px;
width: 60px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
border: 5px solid white;
overflow: hidden;
border-image: initial;
z-index:2;
}
.comments .avatar-image-container img {
  width: 60px;
}
.comments .avatar-image-container:hover {
color: #000;
box-shadow: rgba(155, 155, 155, .9) 0 0 16px;
position: relative;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
opacity: .9;
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

Sin nada más que decir me despido y a disfrutar los nuevos comentarios anidados, no olviden personalizar las plantillas a su gusto.

5 comentarios :

  1. yo tengo un problema he hecho todo eso pero no se ve la caja de comentarios porfavor necesito ayuda.
    Saludos

    ResponderEliminar
    Respuestas
    1. Si quiere tenemos dos opciones: Una me nombra administrador o me regala la plantilla para revisarla. Prefiero la plantilla.

      Eliminar
  2. muchisimas gracias eres el mejor, nadie me pudo ayudar solo usted de antemando un saludo

    ResponderEliminar
  3. A mi me queda todo bien pero al momento de darle responder simplemente no me da la caja de comentarios para responder. cual e sel problema?

    ResponderEliminar