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.
Leer más...
