Ya vamos van varios tutoriales de como editar la caja de comentarios de blogger aunque en este es uno de los que mas me gusta que tiene un estilo CSS muy agradable. Sin mas que decir comencemos con el tutorial
Antes de comenzar recuerde hacer una prueba de seguridad para evitar problemas
Antes de comenzar veremos una demostración:
Demo
Comencemos:
- Paso 1: Vamos a Blogger>> Plantilla>> Eidicion HTML>>
- Paso 2: Buscamos la siguiente linea (Ctrol + F)
<b:include data='post' name='threaded_comments'/>
- Paso 3: Remplaza <b:include data='post' name='threaded_comments'/> por la siguiente linea (Ctrol + F)
<b:include data='post' name='comments'/>
- Paso 4: Todavia en la plantilla buscamos la siguiente linea (Ctrol + F)
<b:includable id='comments' var='post'>con su etiqueta de cierre
</b:includable>
- Paso 5: Remplaza todo lo que ahí dentro de y <b:includable id='comments' var='post'> hasta </b:includable>
<style type='text/css'>
#comments h4{color:white;text-indent:-999em;height:3px;background:#0186CB;margin-top:26px}
.visitor-comment{ font:normal 12px trebuchet ms; color:white}
.unneeded-paging-control{display:none}
.comment_child .comment_wrap{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBQLgzp-UrWhXPjLvehdfS6Gm-7q2cQOqLnqLpXAopDC8wEddy_B8BlhGrYgh5XW7-NPOiXSSp4yaFPsM1tj6ownZxipGxkxQfhBxXKyHfmo79jUygM2p9p1-YIxopf1IngsM73ZOCUvyO/s1600/reply_bg-thread-commet-namkna.png) no-repeat;padding:0 0 0 20px;margin-left:10px}
.comment_inner{margin:10px 0 0 0;padding:1.26em;border:1px solid #3c3c3c;background-color:#333;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black;overflow:hidden;position:relative;-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;-ms-transition:all 1s ease-out;-o-transition:all 1s ease-out;transition:all 1s ease-out}
.comment_header{border:1px solid #555;background-color:#444;padding:.5em .8em}
.comment_name{font-weight:bold;font-style:color:white;normal;float:left}
.comment_name a{color:#fff;text-decoration:none;text-shadow:0 0 1px #DDD}
.comment_name a:hover{color:#F90}
.comment_service{font-size:84%;font-style:italic;line-height:1.8;color:white;float:right}
.comment_reply a{color:#fff!important;}
.comment_reply{display:block;width:auto;margin:0 0 1px 3px;padding:2px 7px 3px;text-transform:none;color:#fff!important;background-color:#1E90FF;background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));font:color:white;inherit;font-size:80%;line-height:normal;-webkit-box-shadow:0 2px 2px black;-moz-box-shadow:0 2px 2px black;box-shadow:0 2px 2px black;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;-webkit-transition:all .16s ease-in-out;-moz-transition:all .16s ease-in-out;-ms-transition:all .16s ease-in-out;-o-transition:all .16s ease-in-out;transition:all .16s ease-in-out}
.comment_reply:hover{color:white!important;margin:0 0 1px -3px!important;padding:2px 10px 3px 7px!important;outline:none!important;text-decoration:none!important}
.comment_reply:active{position:relative;top:1px}
.comment_body p{font-size:12px;margin:10px 15px;;word-wrap:break-word}
.comment_avatar img{border-width:1px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box}
.comment_avatar .avatar-image-container{margin:0 0 3px;border:1px solid #3c3c3c;padding:4px;width:45px;height:45px;max-width:100%;max-height:100%;float:none;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black;background-color:#666;-webkit-background-clip:content-box;-moz-background-clip:content-box;background-clip:content-box;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}
.comment-form{max-width:100%!important}
#comment-editor{width:101%!important}
.cm_wrap #comment-form{margin:4px 0 0;border:1px solid #3c3c3c;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black}
.comment_form a{text-decoration:none;font-weight:bold;font-size:color;white;12px}
.comment_form a:hover{text-decoration:none}
.comment_reply_form{padding:0 0 0 20px}
.comment_reply_form .comment-form{margin:4px 0 0;padding:2%;border:1px solid #3c3c3c;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black}
.comment_emo{max-width:1.5em;max-height:1.5em;vertical-align:middle;margin:-0.3em 0 0 0}
.comment_emo_list .item{float:left;padding:10px 10px 0 10px;text-align:center}
.comment_emo_list span{display:block;font-weight:bold;font-size:11px;letter-spacing:1px}
.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img{max-width:100%!important}
.comments .avatar-image-container img{width:45px!important;height:45px!important;max-width:45px!important}
.deleted-comment{padding:10px;display:block;color:#CCC}
.cm_head{width:58px;float:left}
.para{border:1px solid #555;background-color:#444;padding:.5em .8em;margin-top:3px}
.comment_admin{border:3px solid transparent;border-color:transparent #900 #900 transparent}
.fbcm{width:100%;overflow-x:hidden;max-height:500px}
.emo{height:25px}
#comment-holder pre,#comment-holder i[rel="pre"]{display:block;font:normal 12px Monaco,"Courier New",Courier,monospace !important;padding:0.5em 0.5em 0.5em 1em;background-color:#002b36;border-left:4px solid #268bd2;position:relative;overflow:auto;white-space:pre;word-wrap:normal !important}
#comment-holder blockquote,#comment-holder b[rel="quote"]{display:block;font-weight:normal;position:relative;background-color:#5D73B5;color:white;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0 1px 0 rgba(0,0,0,0.2);margin:.75em 0;padding:15px 20px}
#comments blockquote:before,#comments b[rel="quote"]:before{content:"";width:0;height:0;position:absolute;bottom:100%;right:15px;border-color:transparent transparent #5D73B5;border-style:solid;border-width:7px}
.comments .note,em[rel="note"]{display:block;padding:5px 10px;border:1px solid black;background-color:#222;background-image:-webkit-linear-gradient(#333,#222);background-image:-moz-linear-gradient(#333,#222);background-image:-ms-linear-gradient(#333,#222);background-image:-o-linear-gradient(#333,#222);background-image:linear-gradient(#333,#222);-webkit-box-shadow:0 0 0 1px #555;-moz-box-shadow:0 0 0 1px #555;box-shadow:0 0 0 1px #555;color:#ccc;font:normal normal 11px/normal Tahoma,Verdana,Arial,Sans-Serif;text-shadow:0 1px 0 black}
.comments a.allow,i[rel="anchor"]{font-size:97%;color:#5687B8}
</style>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments != 0'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</h4>
</b:if>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div id='comment_block'>
<div id='comment-holder'>
<b:loop values='data:post.comments' var='comment'>
<div class='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>
<div class='cm_head'>
<div class='comment_avatar'>
<data:comment.authorAvatarImage/>
</div>
<div class='comment_reply'>
<a expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'><center>Replica</center></a>
</div>
<div class='comment_reply'>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'><center>Eliminar</center></a>
</div>
</div>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:post.adminClass == data:comment.adminClass'>
<div class='comment_inner comment_admin'>
<b:else/>
<div class='comment_inner'>
</b:if>
<div class='comment_header'>
<div class='comment_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</div>
<div class='comment_service'>
<span class='comment_date'><data:comment.timestamp/></span>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<div class='para visitor-comment' itemprop='text'><data:comment.body/></div>
</div>
<div class='clear'/>
<div class='comment_child'/>
<a expr:name='"r_"+data:comment.anchorName'/>
<div class='comment_reply_form' expr:id='"r_f_"+data:comment.anchorName'>
</div>
</div>
</b:loop> </div>
</div>
<div class='clear'/>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div class='comment_form'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<div class='comment_emo_list'/>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</div>
</b:if>
</div>
<!--b:include data='post' name='threaded_comment_js'/-->
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
//output the script (load it from google api)
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
<b:if cond='data:post.numComments != 0'>
var Items = <data:post.commentJso/>;
var Msgs = <data:post.commentMsgs/>;
var Config = <data:post.commentConfig/>;
<b:else/>
var Items = {};
var Msgs = {};
var Config = {'maxThreadDepth':'0'};
</b:if>
//<![CDATA[
/*
***************************************************************
Creado por: Tutoriales Blogger
Nombre del Autor: Fernando Salas
Sitio: http://www.tutoriales-blogger.com
Lisence: Creative Commons
Version 1.2
***************************************************************
*/
//Global setting
Config.maxThreadDepth = 5//How threaded level that you want
Display_Emo = true//Display emoticon or not? set "false" to no display
Replace_Youtube_Link = true //Auto replace youtube link to iframe embedded, choose "false" to disable
Replace_Image_Link = true //Auto replace an image link choose "false" to disable.
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP']//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true
//Config emoticons declare
Emo_List = [
];
//Don't modify this , we use this to get feed source
var Cur_Cform_Hdr = '.comment_form';
var Cur_Cform_Url = $('#comment-editor').attr('src');
function trim(str) {
var whitespace = ' \n\r\t\f\x5b\x5d\x7c\x7d\x3c\x3e\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
for (var i = 0; i < str.length; i++) {
if (whitespace.indexOf(str.charAt(i)) != -1) {
str = str.substring(0, i);
break
}
}
return str
}
$('#comment_block .comment_body p').html(function (index, oldhtml) {
if (Replace_Youtube_Link) {
var search_key = 'http://www.youtube.com/watch?v=';
var check_index = oldhtml.indexOf(search_key);
while (check_index != -1) {
ht = oldhtml.substring(check_index);
yt_link = trim(ht);
var yt_code_index = yt_link.indexOf('&');
var yt_code = '';
if (yt_code_index == -1) {
yt_code = yt_link.substring(search_key.length)
} else {
yt_code = yt_link.substring(search_key.length, yt_code_index)
}
var yt_video = '<iframe class="comment_youtube" src="http://www.youtube.com/embed/' + yt_code + '?autohide=1" frameborder="0" allowfullscreen></iframe>';
oldhtml = oldhtml.substring(0, check_index) + yt_video + oldhtml.substring(check_index + yt_link.length);
check_index = oldhtml.indexOf(search_key);
if (check_index == -1) {
search_key = 'https://www.youtube.com/watch?v=';
check_index = oldhtml.indexOf(search_key)
}
}
}
if (Replace_Image_Link) {
var save_html = '';
var temp_html = oldhtml;
for (var i = 0; i < Replace_Image_Ext.length; i++) {
var search_key = '.' + Replace_Image_Ext[i];
var upper_html = temp_html.toUpperCase();
var check_index = upper_html.indexOf(search_key);
while (check_index != -1) {
img_src = temp_html.substring(0, check_index + search_key.length);
upper_html = img_src.toUpperCase();
var http_search = 'HTTP://';
var find_http = upper_html.indexOf(http_search);
var save_http = '';
while (find_http != -1) {
save_http = http_search.toLowerCase();
img_src = img_src.substring(find_http + http_search.length);
upper_html = img_src.toUpperCase();
find_http = upper_html.indexOf(http_search)
}
http_search = 'HTTPS://';
upper_html = img_src.toUpperCase();
find_http = upper_html.indexOf(http_search);
while (find_http != -1) {
save_http = http_search.toLowerCase();
img_src = img_src.substring(find_http + http_search.length);
upper_html = img_src.toUpperCase();
find_http = upper_html.indexOf(http_search)
}
if (save_http == '' || img_src.length < 6) {
break
}
img_src = save_http + img_src;
save_html += temp_html.substring(0, check_index + search_key.length - img_src.length) + '<img src="' + img_src + '" class="comment_img"/>';
temp_html = temp_html.substring(check_index + search_key.length);
upper_html = temp_html.toUpperCase();
check_index = upper_html.indexOf(search_key)
}
}
oldhtml = save_html + temp_html
}
if (Display_Emo) {
var length = Emo_List.length;
if (length % 2 == 1) {
length--
}
for (var i = 0; i < length; i += 2) {
var img_html = '<img src="' + Emo_List[i + 1] + '" class="comment_emo"/>';
check_index = oldhtml.indexOf(Emo_List[i]);
while (check_index != -1) {
oldhtml = oldhtml.substring(0, check_index) + img_html + oldhtml.substring(check_index + Emo_List[i].length);
check_index = oldhtml.indexOf(Emo_List[i])
}
}
}
if (Replace_Force_Tag) {
var length = Force_Tag.length;
if (length % 2 == 1) {
length--
}
for (var i = 0; i < length; i += 2) {
while (1) {
var temp_html = oldhtml.toLowerCase();
check_index = temp_html.indexOf(Force_Tag[i]);
if (check_index != -1) {
oldhtml = oldhtml.substring(0, check_index) + Force_Tag[i + 1] + oldhtml.substring(check_index + Force_Tag[i].length)
} else {
break
}
}
}
}
return oldhtml
});
$('.comment_emo_list').html(function (index, oldhtml) {
if (Display_Emo) {
var length = Emo_List.length;
if (length % 2 == 1) {
length--
}
var newhtml = '';
for (var i = 0; i < length; i += 2) {
var img_code = '<span>' + Emo_List[i] + '</span>';
var img_html = '<img src="' + Emo_List[i + 1] + '" class="comment_emo"/>';
newhtml += '<div class="item">' + img_html + img_code + '</div>'
}
return newhtml
}
});
$('.comment_wrap .comment_body p').html(function (i, h) {
temp = h.toLowerCase();
index = temp.indexOf('@<a href="#c');
if (index != -1) {
index_tail = temp.indexOf('</a>', index);
if (index_tail != -1) {
h = h.substring(0, index) + h.substring(index_tail + 4)
}
}
return h
});
function Valid_Par_Id(par_id) {
r = par_id.indexOf('c');
if (r != -1) par_id = par_id.substring(r + 1);
return par_id
}function Cform_Ins_ParID(par_id) {
par_id = '&parentID=' + par_id + '#%7B';
n_cform_url = Cur_Cform_Url.replace(/#%7B/, par_id);
return n_cform_url
}function Reset_Comment_Form() {
html = $(Cur_Cform_Hdr).html();
$(Cur_Cform_Hdr).html('');
Cur_Cform_Hdr = '.comment_form';
$(Cur_Cform_Hdr).html(html);
$('#comment-editor').attr('src', Cur_Cform_Url)
}function Display_Reply_Form(e) {
par_id = $(e).attr('id');
par_id = Valid_Par_Id(par_id);
html = $(Cur_Cform_Hdr).html();
if (Cur_Cform_Hdr == '.comment_form') {
reset_html = '<a href="#origin_cform" onclick="Reset_Comment_Form()">' + Msgs.addComment + '</a><a name="origin_cform"/>';
$(Cur_Cform_Hdr).html(reset_html)
} else {
$(Cur_Cform_Hdr).html('')
}
Cur_Cform_Hdr = '#r_f_c' + par_id;
$(Cur_Cform_Hdr).html(html);
$('#comment-editor').attr('src', Cform_Ins_ParID(par_id))
}
cur_url = window.location.href;
search_formid = '#comment-form_';
search_index = cur_url.indexOf(search_formid);
if (search_index != -1) {
ret_id = cur_url.substring(search_index + search_formid.length);
Display_Reply_Form('#rc' + ret_id)
}
for (var i = 0; i < Items.length; i++) {
if ('parentId' in Items[i]) {
var par_id = Items[i].parentId;
var par_level = parseInt($('#c' + par_id + ':first').attr('level'));
$('#c' + par_id + ' .comment_child:first').html(function (index, oldhtml) {
var child_id = Items[i].id;
if (par_level >= Config.maxThreadDepth) {
$('#c' + child_id + ':first .comment_reply').remove()
}
var child_html = $('#c' + child_id + ':first').html();
child_html = '<div class="comment_wrap" id="c' + child_id + '" level="' + (par_level + 1) + '">' + child_html + '</div>';
$('#c' + child_id).remove();
return (oldhtml + child_html)
})
}
}
//]]>
</script>
- Paso 6: Guardamos los cambios realizados y a disfrutar
Este comentario ha sido eliminado por el autor.
ResponderEliminar