Entradas
1- Código para poner imágenes:
Para agregar este truco en tu blog pega encima de </body> lo siguiente:
<!-- Código Imágenes en los comentarios Personalizar (1-parte)-->
<script src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/imagen%20comentarios.js' type='text/javascript'/>
<!-- Fin Código Imágenes en los comentarios Personalizar(1-parte) -->
Antes de ]]></b:skin> pegar el siguiente código para que en los mensajes de los comentarios se pueda poner imágenes.....
<!-- Código Imágenes en los comentarios Personalizar (2-parte)-->
#comments img {
max-width: 550px;
border:0px solid #000;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
padding:0px 0px 0px 0px;
}
<!-- Fin Código Imágenes en los comentarios Personalizar (2-parte) -->
2- Comentarios Con diseño personalizado:
<!-- comentarios personalizados-->
.comments {
clear: both;
margin: 0;
padding: 0;
}
.comments .comments-content {
counter-reset: contadorcomentarios;
overflow: hidden;
position: relative;
width: 100%;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
margin: 0;
padding: 0;
}
.comments .comments-content .comment {
background-color: #F0F0F8;
border-bottom: 1px solid #CCE;
border-top: 1px solid #CCE;
margin: 5px 0;
padding: 10px;
}
.comments .comments-content .comment:nth-child(2n+1) {
background-color: #E8E8F0;
}
<li id="bc_XXXXXX" class="comment" kind="b">
<div class="avatar-image-container"> ....... </div>
<div id="XXXXXX" class="comment-block"> ....... </div>
<div id="bc_XXXXXX" class="comment-replies"> ....... </div>
<div id="bc_XXXXXX" class="comment-replybox-single"> ....... </div>
</li>
.comments .avatar-image-container {
background-color: #FFF;
border: 1px solid #88B;
float: left;
height: 45px;
line-height: 45px;
overflow: hidden;
padding: 1px;
text-align: center;
width: 45px;
}
.comments .avatar-image-container img {
max-height: 45px;
/* eventualmente, usar max-width: 45px; */
}
.comment-thread ol {
counter-reset: contarcomentarios;
}
.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}
.comment-thread ol ol {
counter-reset: contarbis;
}
.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;
color: #666666;
}
.comments .comment-header {
height: 50px;
}
.comments .comments-content .user {
padding: 10px 0 0 10px;
}
.comments .comments-content .user, .comments .comments-content .user a {
color: #00BFFF;
font-family: Tahoma;
font-size: 18px;
font-style: normal;
}
.comments .comments-content .datetime {
color: #666;
display: block;
font-family: Arial;
font-size: 11px;
padding: 2px 0 0 10px;
}
<span class="icon user blog-author"></span>
.comments .comments-content .comment-content {
color: #666;
font-family: Trebuchet MS;
font-size: 13px;
line-height: 1.3;
margin: 0;
padding: 15px 5px 10px;
}
.comments .comment .comment-actions a {
background-color: #FFF;
border-radius: 8px;
box-shadow: 0 0 2px #000 inset;
color: #888;
float: right;
font-family: Tahoma;
font-size: 11px;
margin: 0 2px;
opacity: .7;
padding: 1px 10px 3px;
text-decoration: none;
text-transform: lowercase;
}
.comments .comment .comment-actions a:hover {
opacity: 1;
}
.comments .comments-content .comment-replies {
clear: both;
margin: 15px 0 0 25px;
}
.comments .comments-content .comment-thread ol li ol li {
background-color: rgba(255, 255, 255, 0.5) !important;
}
.comments .continue {
display:inline-block;
}
.comments .continue a {
background-color: #FFF;
border-radius: 8px;
box-shadow: 0 0 2px #000 inset;
color: #888;
font-family: Tahoma;
font-size: 11px;
margin: 0 2px;
opacity: .7;
padding: 1px 10px 3px;
text-decoration: none;
text-transform: lowercase;
}
.comments .continue a:hover {
opacity: 1;
}
.comments .thread-toggle {
background-color: #FFF;
border-radius: 8px 8px 8px 8px;
box-shadow: 0 0 2px #000 inset;
cursor:pointer
display: inline-block;
margin: 0 2px;
opacity: 0.7;
padding: 1px 10px 3px;
}
.comments .thread-toggle:hover {opacity: 1;}
.comments .thread-toggle a {
color: #888;
font-family: Tahoma;
font-size: 11px;
text-decoration: none;
text-transform: lowercase;
}
.comments .comments-content .comment-thread:empty {
display:none;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 7px;
width: 10px;
}
.comments .thread-expanded .thread-arrow {
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat 0 0;
}
.comments .thread-collapsed .thread-arrow {
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat 0 0;
}
.comment-replybox-thread { /* el que está debajo de los comentarios */
padding: 10px 0 0 20px;
}
.comments .comment-replybox-single { /* el que se muestra dentro de los replies */
padding: 5px 0 0 0px;
}
.comments .comments-content .loadmore {
background-color: #F0F0F0;
border-radius: 16px;
box-shadow: 0 0 10px #888 inset;
font-family: Tahoma;
height: 32px;
line-height: 32px;
margin: 20px auto;
text-align: center;
text-transform: lowercase;
width: 80%;
}
.comments .comments-content .loadmore a {
color: #888;
font-size: 20px;
}
.comments .comments-content .loadmore:hover a {
color: #000;
}
.comments .comments-content .loadmore.loaded {
opacity: 0;
overflow: hidden;
}
<!-- fin del codigo comentarios-->
