Cute pocket: comentarios

Mostrando entradas con la etiqueta comentarios. Mostrar todas las entradas

Porfin lo he descubierto! he logrado agregar emoticones en una plantilla clasica tanto en entradas como en comentarios ;3 aunque hay que hacer algunas modificaciones importantes, asi que RECUERDA guardar tu plantilla antes de disponerte a destrozarla! jaja

Empezemos.

lo primero que hay que hacer es modificar todo lo que tenemos dentro de los codigos <blogger></blogger> por lo siguiente

<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>

<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"></BlogItemUrl>
<h3 class="post-title">
<$BlogItemTitle$>
</h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</div>
<p class="post-footer">
<em><$I18NPostedByAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>  
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
<$BlogItemControl$>
</p>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NAtCommentTimeWithPermalink$>,
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$> (ESTE CODIGO ES IMPORTANTE!!!!!) </dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<p id="postfeeds"><$BlogItemFeedLinks$></p>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a name="links"></a><h4><$I18NLinksToThisPost$>:</h4>
<dl id="comments-block">
<BlogItemBacklinks>
<dt class="comment-title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
<br />
<span class="comment-poster">
<em><$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>
<p style="padding-left:20px;">
<a href="<$BlogURL$>"><< <$I18NHome$></a>
</p>
</div>
</ItemPage>

</Blogger>

</div>


<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$I18NNumComments$>:</h4>
<dl id="comments-block">
<$CommentPager$>

una vez hecho esto antes de la etiqueta </style> pegaremos lo siguente, lo cual sera las propiedades del post y de los comentarios en tu blog.

/* Posts
----------------------------------------------- */
.date-header {
margin:0 -3px -2px -2px;
font-size:135%;
line-height:1.5em;
display:block;
background:#FB6F72; border-width:0 1px 1px;
padding:0px 14px 0px 29px;
color:#333; width:460px; -webkit-border-top-right-radius:15; -webkit-border-top-left-radius:15;
}
.post {
margin:.3em 0 25px;
padding: 0 0;
border-width:0px 0;
}
.post-title {
margin:0;
font-size:135%;
line-height:1.5em;
display:block;
background:#FFF; border-width:0 1px 1px;
padding:2px 10px 2px 29px;
color:#333; }
a.title-link, .post-title strong {
text-decoration:none;
display:block;
}
a.title-link:hover {
background-color:#ded; color:#000; }
.post-body {
border-width:0 1px 1px;
padding:10px 14px 1px 29px;
background:#FFF;
}
html>body .post-body {
border-bottom-width:0;
}
.post p {
margin:0 0 .75em;
}
p.post-footer {
background:#1e1e1e;
margin:0;
padding:2px 14px 2px 29px;
border-width:1px;
font-size:100%;
line-height:1.5em;
color:#666; text-align:right;
-webkit-border-bottom-right-radius:15; -webkit-border-bottom-left-radius:15;
}
html>body p.post-footer {
border-bottom-color:transparent;
}
p.post-footer em {
display:block;
float:left;
text-align:left;
font-style:normal;
}
a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid #ccc;
}
blockquote { margin:.75em 0; border:1px dotted #ccc; border-width:1px 0; padding:5px 15px; color:#666; }
.post blockquote p {
margin:.5em 0;
}
/* Comments
----------------------------------------------- */
#comments {
margin:-25px 13px 0;
background:#FFF; width:460px; border-width:0 1px 1px;
padding:20px 0 15px 0;
}
#comments h4 {
margin:0 0 10px;
padding:0 14px 2px 29px;
font-size:120%;
line-height:1.4em;
color:#333; }
#comments-block {
margin:0 15px 0 9px;
}
.comment-data {
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 2px .3em;
margin:.5em 0;
padding:0 0 0 20px;
color:#666; }
.comment-poster {
font-weight:bold;
}
.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
background:#FFF;
}
.comment-body p {
margin:0 0 .5em;
background:#FFF; }
.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#666; }
.comment-timestamp a:link {
color:#666; }
.deleted-comment {
font-style:italic;
color:gray; }
.paging-control-container {
float: right;
margin: 0px 6px 0px 0px;
font-size: 80%;
}
.unneeded-paging-control {
visibility: hidden;
}

lo que esta de color rojo es lo mas aconsejable a cambiar para los novatos con el HTML, pero si y atienes experiencia en campiar cuerpos, tamaños y formas puedes seguir adelante ;3 y hacer todos los cambios que requiera tu plantilla.

bien lo siguiente que hay que hacer es tomar el script para los emoticones el cual sera el siguente.

</SCRIPT>

<script type='text/javascript'>
//<![CDATA[
document.getElementsByClassName = function(clsName){
var retVal = new Array();
var elements = document.getElementsByTagName("*");
for(var i = 0;i < elements.length;i++){
if(elements[i].className.indexOf(" ") >= 0){
var classes = elements[i].className.split(" ");
for(var j = 0;j < classes.length;j++){
if(classes[j] == clsName)
retVal.push(elements[i]);
}
}
else if(elements[i].className == clsName)
retVal.push(elements[i]);
}
return retVal;
}
function addSmiley(){
var postBodyClass = (postBodyClass) ? postBodyClass : 'post-body';
var d = document.getElementsByClassName(postBodyClass);
for(var i=0;i<d.length;i++){
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src=" http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/9j2m9d.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-S/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/681.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-P/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/71.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\[/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/581.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/31.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\}\:\-\]/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/211.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/x\*/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/811.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\;\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/111.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\|/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/841.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\}/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/2hh249d.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\*\)/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/531.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/501.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\;\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/2ykzz1s.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/XL/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/035.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/PIK/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/111-1.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/MUSIK/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/109.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/NOOTO/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/038.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/LUV/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/031.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/RAINN/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/021.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/WHATT/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/61.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/REDD/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/107.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
}
var d = document.getElementsByClassName('comment-body');
for(var i=0;i<d.length;i++){
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img3123.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-S/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0549.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-P/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1089.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\[/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0813.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0897.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\}\:\-\]/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0900.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/x\*/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0776.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\;\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0594.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\|/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0453.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\}/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0786.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\*\)/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0987.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0687.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\;\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0571.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/XL/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1246.png" style="border:0; margin:0; padding:0;" id="new" /> ');
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(addSmiley);
//]]>
</script>

Pueden ver en una de mis entradas anteriores como cambiar codigos y los emoticones.
Los de color azul seran los disponibles en las entradas, y los de color verde seran los dispoibles en los comentarios.

Bien ya tenemos entonces el script, ahora necesitamos agragar la taba que muestra los emoticones y sus codigos correspondientes para facilitar su uso a los visitantes de nuestra pagina.
con ayuda de CTRL + F buscaremos la etiqueta

<$CommentPager$>

que en el primer codigo que instalamos coloque de color morado con una nota de color rojo :), bien despues de este colocamos la tabla que sera esta

<table border='0' cellpadding='0' cellspacing='1'>
<tr>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img3123.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0549.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1089.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0813.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0897.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0900.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0776.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0594.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0453.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0786.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0987.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0687.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0571.png' width='20'/></td>
<td align='center' width='26'><img height='20' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1246.png' width='20'/></td>
</tr>
<tr>
<td align='center' width='26'>:-)</td>
<td align='center' width='26'>:-S</td>
<td align='center' width='26'>:-P</td>
<td align='center' width='26'>:-[</td>
<td align='center' width='26'>:-D</td>
<td align='center' width='26'>}:-]</td>
<td align='center' width='26'>X*</td>
<td align='center' width='26'>;-D</td>
<td align='center' width='26'>:-|</td>
<td align='center' width='26'>:-}</td>
<td align='center' width='26'>:*)</td>
<td align='center' width='26'>:-(</td>
<td align='center' width='26'>;-)</td>
<td align='center' width='26'>XL</td>
</tr>
</table>

y listo nuestra plantilla clasica ya puede usar emoticones! ;D

Recuerden dudas, quejas , comentarios, y demas comentenlos si quieren ver una prueba de esto miren mi blog ;3

http://poupee-doll.blogspot.com/

Para crear la opcion de que nuestros visitantes respondan a un comentario en especifico les traigo este truco que espero les sea util:

1. Iremos a Diseño>> edicion HTML>> Expandir plantilla de artilugios y con ayuda de Ctrl+F buscaremos el codigo:

<data:comment.author/>

2.Justo debajo de este pegaremos el siguente codigo.

<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=ID_DEL_BLOG&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'>RESPONDER</a></span>

De esta manera se agregara la opcion de responder al comentario, pero en texto. Si deseamos colocar una imagen o un boton colocaremos el siguente.

<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=ID_DEL_BLOG&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'></a><img src="URL_DE_LA_IMAGEN_AQUI"/></span>

Como pueden ver solo sustituimos el Responder por el codigo imagen.
En la seccion que dice ID_DEL_BLOG aparece al momento de hacer un post y editar la plantilla enla URL del blog.

http://www.blogger.com/post-create.g?blogID=664XXXXXXXXXX

El resultado es el siguente:

Como pueden ver se agrega una @ y el link del nombre de la persona a la cual respondiste, es algo que puede hacer tu blog mas dinamico y unico ;D

hoy les mostrare como colocar emoticones en las entradas y comentarios en blog, lo primero que haremos es explandir la plantilla y buscar el siguiente codigo con ayuda de Crtl + F

</head>

Una vez localizado colocaremos ENCIMA de este el siguiente script

<script type='text/javascript'>
//<![CDATA[
document.getElementsByClassName = function(clsName){
var retVal = new Array();
var elements = document.getElementsByTagName("*");
for(var i = 0;i < elements.length;i++){
if(elements[i].className.indexOf(" ") >= 0){
var classes = elements[i].className.split(" ");
for(var j = 0;j < classes.length;j++){
if(classes[j] == clsName)
retVal.push(elements[i]);
}
}
else if(elements[i].className == clsName)
retVal.push(elements[i]);
}
return retVal;
}
function addSmiley(){
var postBodyClass = (postBodyClass) ? postBodyClass : 'post-body';
var d = document.getElementsByClassName(postBodyClass);
for(var i=0;i<d.length;i++){
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src=" http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/9j2m9d.gif" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\:\-S/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/681.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\:\-P/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/71.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\:\-\[/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/581.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\:\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/31.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\}\:\-\]/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/211.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/x\*/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/811.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\;\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/111.png" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\:\-\|/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/841.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\:\-\}/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/2hh249d.png" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\:\*\)/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/531.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/501.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\;\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/2ykzz1s.gif" style="border:0; margin:0; padding:0;" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/XL/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/035.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/PIK/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/111-1.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/MUSIK/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/109.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/NOOTO/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/038.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/LUV/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/031.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/RAINN/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/021.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/WHATT/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/61.jpg" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/REDD/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emotic2/107.gif" style="border:0; margin:0; padding:0;" id="new" /> ');

}
var d = document.getElementsByClassName('comment-body');
for(var i=0;i<d.length;i++){
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img3123.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-S/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0549.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-P/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1089.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\[/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0813.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0897.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\}\:\-\]/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0900.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/x\*/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0776.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\;\-D/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0594.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\|/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0453.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\}/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0786.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\*\)/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0987.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\:\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0687.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\;\-$/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0571.png" style="border:0; margin:0; padding:0;" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/XL/gi, ' <img src="http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1246.png" style="border:0; margin:0; padding:0;" id="new" /> ');
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(addSmiley);
//]]>
</script>

PROPIEDADES
Postbodyclass: Son los iconos o emoticones que iran en tus entradas
Comment-body: Son los emoticones que tus visitantes podran utilizar al dejar un comentario.
Rojo: lo que esta en rojo son los simbolos que utilizaras para colocar un emoticon, o en otras palabras la carita, es decir si colocamos :-) en el posto o comentario esto de inmediato se sustituira por una imagen. estos se encuentran divididos por diagonales /, si no quieres experimentar mucho es preferible dejar esos codigos en paz a menos que ya tengas conocimiendo de estos Scripts, de lo contrario puede resultar un dolor de cabeza.
Azul: es la direccion en la cual esta alojada la imagen, si no te gustan los que yo he colocado simplemente puedes cambiarlos por los tuyos.

Bien, ya con esto nuestro blog tendra la habilidad de colocar los emoticones, solo falta hacerle saber a tus visitantes cuales codigos le corresponden a cada imagen, y para eso debajo de:

<h4 id='comment-post-message'><data:postCommentMsg/></h4><p><data:blogCommentMessage/></p>

colocaremos un codigo que nos muestre arriba del formulario de comentarios una cajita con los iconos disponibles y sus simbolos correspondientes.

<table border='0' cellpadding='0' cellspacing='1'>
<tr>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img3123.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0549.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1089.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0813.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0897.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0900.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0776.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0594.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0453.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0786.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0987.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0687.png' width='20'/></td>
<td align='center' width='26'><img height='21' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img0571.png' width='20'/></td>
<td align='center' width='26'><img height='20' src='http://i491.photobucket.com/albums/rr277/kagamine_ren/emoticons/MsgPlus_Img1246.png' width='20'/></td>
</tr>
<tr>
<td align='center' width='26'>:-)</td>
<td align='center' width='26'>:-S</td>
<td align='center' width='26'>:-P</td>
<td align='center' width='26'>:-[</td>
<td align='center' width='26'>:-D</td>
<td align='center' width='26'>}:-]</td>
<td align='center' width='26'>X*</td>
<td align='center' width='26'>;-D</td>
<td align='center' width='26'>:-|</td>
<td align='center' width='26'>:-}</td>
<td align='center' width='26'>:*)</td>
<td align='center' width='26'>:-(</td>
<td align='center' width='26'>;-)</td>
<td align='center' width='26'>XL</td>
</tr>
</table>

PROPIEDADES
Verde: con estas podremos jugar con la altura y anchura de la imagen que estara ensima de nuestro formulario de comentarios.
Azul: Sera la URL de la imagen, asegurate que coincida con las que pusiste en el codigo anterior.
Rojo: le muestra a los usuarios que codigo es el necesario para cada emoticon.

Al final nuestro resultado sera el siguiente.

NOTA:

Para que las caritas se muestren ensima del formulario de comentarios, este tiene que estar incrustrado en la entrada, de lo contrario no se mostrara.

Para solucionar esto ve a Blogger >> Configuracion >> Comentarios

Ubicacion de formulario de comentarios >> entrada incrustada a continuacion.

Si utilizas plantilla clasica no se si este script sirva, lo he intentado colocar y no me da resultado :/ pero de igual manera eres libre de intentarlo

Como muchos ya sabemos un defecto de algunas plantillas clasicas es que no cuentan con la opcion de comentarios, lo cual es perjudicial pues asi los visitantes no pueden dejar sus puntos de vista en algunas entradas especificas. Despues de haber experimentado mucho encontre el codigo que parece funsionar en todas las plantillas clasicas, aqui se los pongo.

<MainOrArchivePage><BlogItemCommentsEnabled> <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>><img border "0" src="AQUI LINK IMAGEN NO ES NECESARIO"/><$BlogItemCommentCount$> <em>MENSAJE(VISITANTES HAN DEJADO SU HUELLA)</em>¿y tu?</a></MainOrArchivePage> </div> <br>

este codigo es para agregar el mensaje en cada una de tus entradas, el cual al pinchar te enviara a el lugar donde dejaras tu comentario.

¿donde lo debo colorar?
Bueno este tipo de codigos deben estar dentro de los limites

<blogger></blogger>

un ejemplo, si como yo quieres colocarlos a un lado del titulo tendra que ser despues de el codigo(el codigo puede variar de plantilla plantilla pero normalmente aparece alguno de estos)

<BlogItemTitle><$BlogItemTitle$></BlogItemTitle> <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader>

si por el contrario, deseas agregar esto al final de la entrada tendras que colocarlo despues de el codigo

<$BlogItemBody$>

Este es el primer paso, ahora para que el formulario de comentarios este debajo de la entrada agregaremos el siguiente codigo

<ItemPage><div class="blogComments"><BlogItemCommentsEnabled><a name="comments"><BlogItemComments> <p style="(aqui yo puse un borde punteado para separar los comentarios si no te gusta lo puedes quitarlo o cambiarle el color) border:1px dashed #FC8F8F;"><div class="blogComment"><a name="<$BlogCommentNumber$>"></a><strong><$BlogCommentAuthor$></strong>(aqui puedes colorar un mensaje como) comentarios: <$BlogCommentDateTime$><br><$BlogCommentBody$><br/><div class="byline"><a href="<$BlogCommentPermalinkURL$>" title="permanent link"></a> </div> <$BlogCommentDeleteIcon$> </div></BlogItemComments> <$BlogItemCreate$></div></BlogItemCommentsEnabled> <center><a href="<$BlogURL$>"> INICIO (este textro te devolvera a la pagina inicial o puedes poner una imagen con <img src=""/> )</a><center></div></ItemPage>

el cual se debera de colocar debajo de

<$BlogItemBody$></div>

o en el caso de que hayas colocado el mensaje debajo de la entrada, sera despues de el codigo

<MainOrArchivePage><BlogItemCommentsEnabled> <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>><img border "0" src="AQUI LINK DE IMAGEN NO ES NECESARIO"/><$BlogItemCommentCount$> <em>MENSAJE(VISITANTES HAN DEJADO SU HUELLA)</em>¿y tu?</a></MainOrArchivePage> </div> <br>

Ejemplo de como quedo mi codigo

<blogger>
<div class="post"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle> @ <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader><MainOrArchivePage><BlogItemCommentsEnabled>
<a href="<$BlogItemCommentCreate$>"
<$BlogItemCommentFormOnClick$>>
<img border "0" src="IMAGEN OPCIONAL"/> <$BlogItemCommentCount$> <em>(las etiquetas em son para resaltar)opiniones</em>¿y tu?</a></MainOrArchivePage> </div> <br>
<div style="padding-left: 8px; padding-right: 8px;"><$BlogItemBody$></div>
<ItemPage>
<div class="blogComments">
<BlogItemCommentsEnabled><a name="comments">
<BlogItemComments>
<p style=" border:1px dashed #FC8F8F;">
<div class="blogComment">
<a name="<$BlogCommentNumber$>"></a>
<strong><$BlogCommentAuthor$></strong>(texto opcional : )
<$BlogCommentDateTime$><br>
<$BlogCommentBody$><br/>
<div class="byline">
<a href="<$BlogCommentPermalinkURL$>"
title="permanent link"></a>
</div> <$BlogCommentDeleteIcon$>
</div>
</BlogItemComments>
<$BlogItemCreate$>
</div>
</BlogItemCommentsEnabled>
<center><a href="<$BlogURL$>"><img border "0" src="IMAGEN QUE TE REGESA AL INICIO"/></a><center>
</div>
</ItemPage></p>
<br>
</blogger>

Espero y la explicasion no este tan complicada, si tienen dudas, no duden en comentarlas.

Suscribirse a: Entradas ( Atom )

Cute pocket

Emoticones en entradas y comentarios, PLANTILLAS CLASICAS!

Responder a el comentario en blog

Emoticons en tus entradas y comentarios para blog.[VIDEO]

Emoticons en tus entradas y comentarios para blog.

Comentarios en plantillas clasicas.

QUE ES LO QUE BUSCAS

Categories

LO MAS VISTO

Menu

Datos personales

Archivo del blog

Seguidores

Link list 1

Link list 2

Link list 3

Link list 4