Acabo de publicar Regala Google Chrome por navidad |

Mini-editor Z-Graphics

By Miguel Ángel Jiménez Achinte On 10:59

DemoHace algunos dias agregué un pequeño sistemita para dar formato al texto, gracias a un comentario de Gem@ me he propuesto explicar como funciona mi nuevo mini editor para los comentarios, sino lo conoces puedes mirar mas abajo y dejar un comentario si te ha gustado :)

En realidad es algo sencillo y consta de dos partes importantes: agregar emoticones a los comentarios y poner un sistemita para introducir código a un textarea por medio de un botón. NO OLVIDES hacer una copia de respaldo de tu plantilla antes de hacer cualquier cambio.


Agregando los Emoticones

Basado en esta entrada de ayuda para mi web, los pasos a seguir son los siguientes:

1. Para agregar el javascript buscamos la etiqueta </body> y justo antes pegamos el siguiente codigo:


<b:if cond='data:blog.pageType == "item"'>
<script src='http://agudovk.googlepages.com/Emoticonos.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

2. Para que nuestros visitantes se enteren de cómo agregarlos vamos a poner alguna imagen o aviso antes del editor de blogger, lo que Ayuda para mi web nos ofrece es una tabla:

<table width='400px'>
<tr>
<td colspan='10'>Emoticonos en blogger</td>
<td colspan='3'><a href='http://ayudaparamiweb.com'><img src='http://agudovk.googlepages.com/ayudaweb.png' style='border:0;'/></a></td>
</tr>
<tr>
<td><img src='http://agudovk.googlepages.com/com-smile.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-cry.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-tongue.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-lol.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-oops.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-blink.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-neutral.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-secreto.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa1.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa2.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-mad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-confuso.gif'/></td>
</tr>
<tr>
<td>:)</td>
<td>:'(</td>
<td>:(</td>
<td>:P</td>
<td>:D</td>
<td>:$</td>
<td>;)</td>
<td>:-I</td>
<td>:-X</td>
<td>:o</td>
<td>:O</td>
<td>O</td>
<td>:/</td>
</tr>
</table>

Para agregarla debemos expandir plantillas de artilugios, buscar el siguiente código y pegar la tabla anterior justo antes.

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

El problema de agregarla es que el script mismo reemplaza el texto por las imágenes correspondientes, así que es aconsejable poner una imagen. De nuevo buscamos el <iframe> y pegamos lo que está en rojo :

<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<img src="url-de-la-imagen" alt="alguna-frase" id="emoticones" />
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>

Con imagen me refiero a algo como lo que usan Vagabundia y Gem@a blog:






El ID de la imagen te permite agregar propiedades CSS para posicionarla o "embellecerla”.

Para modificar

Para empezar, te recomiendo que descargues el script y lo alojes tu mismo (puedes bajarlo desde aquí). De esa manera podrás modificar el texto con el que aparecerá cada emoticón y cambiar las imágenes por las que te gusten.

Como modificar el script[+/-]

Veamos, no soy muy bueno en esto pero intentaré explicarlo bien.

function emoticonComentario() {
if(!document.getElementById) {return;} // no soportado
bodyText = document.getElementById('comments');
comentario = bodyText.innerHTML;
// :)
comentario = comentario.replace(/:)/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-smile.gif" /> ');
// :'(
comentario = comentario.replace(/;(/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-cry.gif" /> ');
// :(
comentario = comentario.replace(/:(/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-sad.gif" /> ');
// :P
comentario = comentario.replace(/:P/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-tongue.gif" /> ');
// :D
comentario = comentario.replace(/:D/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-lol.gif" /> ');
// xD
comentario = comentario.replace(/xD/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-lol.gif" /> ');
// :$
comentario = comentario.replace(/:$/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-oops.gif" /> ');
// ;)
comentario = comentario.replace(/;)/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-blink.gif" /> ');
// :-I
comentario = comentario.replace(/:-I/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-neutral.gif" /> ');
// :-X
comentario = comentario.replace(/:-X/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-secreto.gif" /> ');
// :o
comentario = comentario.replace(/:o/g,' <img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-sorpresa1.gif" /> ');
// :O
comentario = comentario.replace(/:O/g,' <img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-sorpresa2.gif" /> ');
// |O
comentario = comentario.replace(/|O/g,' <img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-mad.gif" /> ');
// :
comentario = comentario.replace(/:\/g,' <img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-confuso.gif" /> ');
bodyText.innerHTML = comentario;
}

El texto en rojo es la dirección de cada imagen, el texto en verde es un comentario (muy útil de hecho) que señala la palabra con la que aparece cada imagen y el texto en morado es ese texto, así que si quieres cambiarlo debes reemplazarlo.


En esta página encontrarás toda una variedad de emoticones por si deseas personalizar un poco.

Armando el mini-editor

Para empezar hay que definir que botones deseas agregar, para así mismo definir el Java Script. El código fuente lo he conseguido después de varios minutos vagando en la red así que si encuentras algún error te agradecería que me lo comentaras (además porque no soy muy bueno en ello :) ).
Vale la pena aclarar que lo que ves cerca al editor de blogger es un iframe (que contiene al mini-editor). He decidido hacerlo así para no causar problemas en la plantilla y facilitar un poco el trabajo.

El mini-editor que estoy usando tiene varias funciones que son:

1-agregar un enlace[+/-]


function inslink(){
var input = document.form1.commenteditor;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var my_link = prompt("Introduce la URL:","http://");
if (my_link != null) {
if(str.length==0){
str=my_link;
}
var sel = document.selection.createRange();
sel.text = "<a href="" + my_link + "">" + str + "</a>";
sel.select();
}
return;
}else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
var my_link = prompt("Enter URL:","http://");
if (my_link != null) {
if(insText.length==0){
insText=my_link;
}
input.value = input.value.substr(0, start) +"<a href="" + my_link +"">" + insText + "</a>"+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+11+my_link.length+insText.length+4,start+11+my_link.length+insText.length+4);
}
return;
}else{
var my_link = prompt("Ingresar URL:","http://");
var my_text = prompt("Ingresar el texto del link:","");
input.value+=" <a href="" + my_link + "">" + my_text + "</a>";
return;
}
}


2-Agregar una imagen[+/-]


function insimg(){
var input = document.form1.commenteditor;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var my_img = prompt("Introduce la URL de la imagen:","http://");
if (my_img != null) {
if(str.length==0){
str=my_img;
}
var sel = document.selection.createRange();
sel.text = "<img src="" + my_img + "" />";
sel.select();
}
return;
}else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
var my_img = prompt("Introduce la URL de la imagen:","http://");
if (my_img != null) {
if(insText.length==0){
insText=my_img;
}
input.value = input.value.substr(0, start) +"<img src="" + my_img +"" />" + input.value.substr(end);
input.focus();
input.setSelectionRange(start+11+my_img.length+insText.length+4,start+11+my_img.length+insText.length+4);
}
return;
}
}


3-agregar formato al texto (Negrita, Cursiva y Subrayado)[+/-]


function instag(tag){
var input = document.form1.commenteditor;
if(typeof document.selection!='undefined'&&document.selection) {
var str = document.selection.createRange().text;
input.focus();
var sel = document.selection.createRange();
sel.text = "<" + tag + ">" + str + "</" +tag+ ">";
sel.select();
return;
}
else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + '<'+tag+'>' + insText + '</'+tag+'>'+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+2+tag.length+insText.length+3+tag.length,start+2+tag.length+insText.length+3+tag.length);
return;
}
else{
input.value+=' <'+tag+'>Reemplace este texto</'+tag+'>';
return;
}
}



Los he agrupado en dos archivos java script formato texto.js e img.js.
Para agregarlos a la plantilla copia y pega estos códigos antes de </head>

<script src='url-formato texto.js'/></script>
<script src='url-img.js'/></script>

El siguiente paso es, dentro del <body>, crear el formulario y dentro de el poner el textarea:

<form name="form1" method="post" action="">
<textarea name="commenteditor" style="margin-top:5px; height:50px; width:184px;">
</textarea>
</form>

Teniendo el formulario y las funciones Java Script solo faltan los botones:

<form name="form1" method="post" action="">
<input class=" clase1" type="button" name="Submit" onClick="instag('b')"/>
<input class=" clase2" type="button" name="Submit3" onClick="instag('u')" />
<input class=" clase3" type="button" name="Submit4" onClick="instag('i')" />
<input class=" clase4" type="button" name="Submit2" onClick="inslink()" />
<input class="clase5" type="button" name="Submit5" onClick="insimg()" />
<br>
<textarea name="commenteditor" style="margin-top:5px; height:50px; width:184px;">
</textarea>
</form>

Donde el texto en azul son las funciones y el texto en rojo es la etiqueta a añadir, es decir
<etiqueta>< /etiqueta>

En este caso son b (Negrita), u (Subrayado), e i (Cursiva).
Hasta aquí deberían funcionar muy bien los botones e insertar el formato en el textarea, si todo va bien podemos continuar. Algo que me pareció muy practico fue que al dar click en cada emoticón este también inserte su texto, pero para no complicarme mas con funciones javascript busqué y busqué hasta que encontré esto:

<a href="javascript:void(0);" title="texto-alternativo"><img style="propiedades" onClick="document.form1.commenteditor.value+=' TEXTO-A-AGREGAR '" src="url-de-la-imagen" /></a>

Solo tendrías que modificarlo según tus necesidades y reproducirlo debajo del textarea con cada emoticón. Por ultimo se me ocurrió agregar dos botones mas : uno para copiar el código (aunque solo funciona en internet explorer) y otro para borrar lo que haya escrito (Reset).

Para el botón de copiar[+/-]

copia y pega antes de </head>

<script type="text/javascript">
<!--
var copytoclip=1;
function HighlightAll(theField) {
var tempval=eval("document."+theField);
tempval.focus();
tempval.select();
if (navigator.appName.indexOf("Microsoft") != -1&&copytoclip==1){
therange=tempval.createTextRange();
therange.execCommand("Copy");
window.status="Contents highlighted and copied to clipboard!";
setTimeout("window.status=''",1800);
}
}
//-->
</script>


Y el botón seria:

<a class="highlighttext" href="javascript:HighlightAll('form1.commenteditor')"><img border="0" src="url-de-la-imagen" /></a>

Para el botón de Reset[+/-]

<input type="reset" class="reset" style="propiedades">



Y hasta aqui va el editor, solo tienes que agregar las propiedades css a tu gusto. O puedes copiar el que estoy usando en este momento (si lo haces no olvides alojar las imágenes y los archivos Js en tu propio servidor, ya que los míos están en uno gratuito).

Mini-editor z-graphics

Como agregar el iframe a blogger

Si lo quieres agregar junto con el editor de blogger, expande plantillas de artilugios, busca el siguiente código y agrega lo que está en rojo:

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

<iframe allowtransparency='true' frameborder='0' id='commenteditor' name='commenteditor' scrolling='no' src='DIRECCION-DE-TU-ARCHIVO-HTML'/>

Agregalo antes o despues, como desees. Y lo puedes posicionar agregando propiedades CSS al ID commenteditor. Estas son las propiedades que yo uso, puedes variar los valores para adaptarlo a tu plantilla:

#commenteditor{
position:relative;
top:-300px;
left:412px;
height:350px !important;
width: 360px !important;
}


Y eso es todo, te podrás dar cuenta que algunas etiquetas HTML no están permitidas en los comentarios de blogger, pero seguro sabrás darle un buen uso.

Una pequeña modificación

Los comentarios 21 y 23 de Manolo y Gem@ me han hecho caer en cuenta que el botón para insertar imagenes por medio de la url resulta poco eficiente, ya que blogger no permite esta etiqueta en los comentarios. La solucion que propone gem@ es que la funcion JavaScript nos muestre el codigo para introducir una imagen, es decir:

<img src="url-de-la-imagen" />


Si estas de acuerdo con el cambio solo debes reemplazar el archivo img.js anteriormente nombrado por este. Para verlo en accion Click aqui


Demo Download SourceAutor





131 comentarios

  1. Fantástico en el primer ratito que tenga lo estoy poniendo en práctica y te cuento :)
    Gracias está genial de verdad :D

    Posted on 6/18/2009 5:12 p. m.

     
  2. sabes he tenido problemas con eso. Pero creo que solo es con mozilla, la verdad no se a que se deba :$

    Posted on 6/18/2009 7:41 p. m.

     
  3. Hola me gusta mucho la idea pero para mi es mucho lio soy muy novata.Saludos muy intresante tu blog

    Posted on 6/23/2009 1:07 p. m.

     
  4. Hola ..NaNy.. si deseas usarlo puedes tomar el que yo estoy usando y agregarlo a tu plantilla, si te decides me escribes un comentario o un mail.

    Gracias _Balam_ por tu opinion.

    Posted on 6/23/2009 2:21 p. m.

     
  5. :$ :D :o :O ;( |O :P :-I :\ :) ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

    Posted on 6/23/2009 6:04 p. m.

     
  6. siii kevin, desde que lo hice ese fue mi primer impulso, probar todos los emoticones jaja :O

    Posted on 6/23/2009 6:10 p. m.

     
  7. esta bonito el cuadro

    saludos voy a intentar hacerlo

    Posted on 6/24/2009 12:22 p. m.

     
  8. Hola! :O

    Gracias por compartirlo, esta demaciado genial! :) Te felicito!

    Obviamente que lo voy a usar en mi blog!
    Porque me gusto demaciado!!

    Saludos! :P

    Posted on 6/24/2009 4:26 p. m.

     
  9. Hola Sirkan, me alegra mucho que te haya gustado, seguro le darás un buen uso a este juguetico :)

    si tienes alguna pregunta no dudes en hacerla.
    :P

    Posted on 6/24/2009 5:19 p. m.

     
  10. Intenté agregar una imagen en el comentario, pero creo que no se puede. O si?...

    Posted on 6/25/2009 9:32 a. m.

     
  11. Lamentablemente Manolo no se puede porque blogger no permite algunas etiquetas, esas funciones se deben utilizar para otras ocaciones :\ .

    Gracias por tu opinion.

    Posted on 6/25/2009 9:35 a. m.

     
  12. Sabes Miguel? lo ideal sería que al hacer click en el botón de imagen nos proporcionara el código de la imagen en lugar del espacio para la url es decir nos diera <img src="url-de-la-imagen">

    Posted on 6/25/2009 10:24 a. m.

     
  13. Me parece una buena idea, ya que en este momento ese botón no es de mucha utlidad. En un momento haré los cambios.

    Posted on 6/25/2009 1:07 p. m.

     
  14. Esto es lo que me aparece, pensé que a eso te referias :$

    Es decir ¿Aun te sale la ventanita pidiendo la url?

    Posted on 6/25/2009 2:17 p. m.

     
  15. Así es Miguel, al marcar el botón de "img" sale para añadir la url

    Posted on 6/25/2009 2:21 p. m.

     
  16. mmm que raro eso, que navegador estas usando?
    Tienes alguna idea de porque pase? ;(

    Posted on 6/25/2009 2:23 p. m.

     
  17. Uso Firefox pero ahora he probado y con Explorer8 si sale, no tengo idea que puede ser Miguel.
    El tema de los navegadores me puede :(

    Posted on 6/25/2009 2:57 p. m.

     
  18. Lo unico que se me ocurre es que los navegadores guardan cierta información de las paginas...al principio cuando apenas lo probaba tenia que volver a cargar el iframe en firefox para que mostrara los cambios. Podrias probar ir directamente a la pagina que contiene el mini-editor. aqui

    Serviria de ayuda que las personas que lean este comentario nos digan si ven o no los cambios.

    Posted on 6/25/2009 6:04 p. m.

     
  19. :) :P Que bueno está esto, te felicito, voy a ver si puedo ponerlo en práctica.|O

    Posted on 6/26/2009 12:59 p. m.

     
  20. gracias k_nelita, sería genial que lo intentaras :P. Si lo haces me muestras tus resultados.

    Posted on 6/26/2009 1:39 p. m.

     
  21. Hola Miguel.
    En ocasiones ¿No sé si solo me pasa a mí? Solo salen dos editores normales de Blogger.

    Al parecer hay algo que falla de vez en cuando. Cuando vuelvo y reseteo, aparece y otra veces, no.
    Aún así estoy partiendome la cabeza tratando de agregarlo a mi blog de pruebas, pero hay algo que falla.

    Bueno... ¡Saludos!.

    Posted on 6/26/2009 6:14 p. m.

     
  22. Hola Deybi, esas fallas que describes son en tu blog? o las observas en este. Si son en el tuyo te recomiendo que primero armes el editor en una pagina aparte(un archivo HTML), cuando veas que funciona agregas el iframe. Si lo haces y siguen las fallas es posible que se deba al lugar donde lo agregas, intenta ponerlo antes del editor de blogger como lo uso yo.

    Cualquier duda me puedes escribir al email adjuntando el codigo que estas probando.

    migue.hit@hotmail.com

    Posted on 6/26/2009 6:44 p. m.

     
  23. Hola!
    Probe el mini editor pero no me funcino! ;(
    Lo estoy probando en mi blog de pruebas
    Aqui.
    Onda no se ve, solo se ven los codigos, nose porque? :-I

    Por favor necesito ayuda!
    Saludos!

    Posted on 6/26/2009 7:07 p. m.

     
  24. Hola Sirkan, tu problema es muy sencillo de arreglar:

    El codigo html no debes pegarlo en la plantilla, debes hacer un html externo y alojarlo em algun servidor. Luego adjuntas el archivo por medio de un iframe y colocas la url donde se encuentra tu html.

    Por ejemplo:

    <iframe allowtransparency='true' frameborder='0' id='commenteditor' name='commenteditor' scrolling='no' src='DIRECCION-DE-TU-ARCHIVO-HTML'/>

    Si se hace un poco dificil para ti hacerlo puedes usar la mia, aunque te atienes a posibles cambios como el que sugirio gem@ :)

    Posted on 6/26/2009 7:12 p. m.

     
  25. Hola!
    Listo! me quedo genial! :O , pero tengo unas preguntas.
    1º Como hago un html externo y lo alojo en algun servidor?
    Onda para modificar el que me dejaste en el blog.

    2º Como se hace para que algunos enlaces o imagenes, como los tines aqui, tengan eso como zoom?

    Eso Gracias por tu ayuda!
    Aqui esta mi resultado!
    Saludos! :P

    Posted on 6/27/2009 7:53 p. m.

     
  26. Hola Sirkan, me gusta como se ve en tu blog y sobre las dudas puedo decirte lo siguiente:

    1º Para hacer un archivo html abres el block de notas de windows(es la manera mas sencilla), pegas el codigo que habias añadido a tu plantilla anteriormente y al guardar te aseguras de poner un nombre seguido por .html; es decir nombre.html

    El alojar ese archivo en un servidor significa que, despues de haber creado la cuenta (yo utilizo freehostia), debes subir mediante un programa llamado Filezilla ftp Client. Puedes ver paso por paso en esta dirección.

    2º por imagenes y enlaces con zoom creo que te refieres a una lightwindow

    Espero haber sido de ayuda, de todas maneras puedes contactarme por msn o correo a migue.hit@hotmail.com

    Posted on 6/27/2009 10:42 p. m.

     
  27. Migue gracias esta bueno esto, para armar el editor hay que hacer todo o solo donde dice armando editor, y si yo solo lo quiero que aparezca la imagen de como se escriben los iconos, asi como usan Vagabundia y Gem@a blog, solo lo hago hasta antes de donde dice Mini editor :$. estor emoticones son una pasada :D :O

    Posted on 6/28/2009 7:15 a. m.

     
  28. El editor puedes hacerlo desde donde quieras, solo que si quieres que tambien agregue emoticones debes hacerlo todo.

    Y si solo quieres poner una imagen para que la gente se entere haces la primera parte-Agregando los emoticones.

    Posted on 6/28/2009 8:40 a. m.

     
  29. Hola!
    Gracias por la ayuda! voy a hacer lo del lightwindow ahora.
    Pero lo del archivo html nose si haga por me cuesta eso de ftp :$, pero lo voy a intentar, lo malo es que solo me va a durar un año ;(, por el hostin de freehostia.

    Saludos y gracias!
    PD: Que fuente usaste para hacer la imagen de "comparte este post"? Por que quiero hacer uno :o.
    Gracias!

    Posted on 6/28/2009 12:58 p. m.

     
  30. Que miedo por lo de freehostia, me va tocar empezar a mover todos mis archivos :-I ;( aunque no te limites hay muchos planes de hosting...

    La fuente que usé para esa imagen es Arial black y Arial con efecto de negrita.

    PD: No te rindas con lo del ftp, lee, averigua, e intenta cuantas veces sea necesario. Aunque si quieres aprevechando que estoy en vacaciones podria ayudarte con uno de esos programas de soporte remoto como el team viwer.

    Posted on 6/28/2009 1:06 p. m.

     
  31. Hola!
    Ok! Gracias!
    Aunque creo que hay un hostin gratuito que dura mas :o, no estoy miy seguro si es asi pero creo que es 110mb. Por que lo usamos con unos compañeros en el colegio para hacer una pagina web :D!

    PD: Cuando este en vaciones de invierno como en 2 semanas mas te aviso por lo del soporte remoto. Amenos que lo logre hacer :O.

    Saludos y Gracias!

    Posted on 6/28/2009 1:28 p. m.

     
  32. Hola!
    Oye puede hacer lo del lightwindow! :O
    pero ahora estaba viendo como estaba quedando la plantilla pero derrepente me di cuenta de que ahora no funciona el boton de "Publicar un comentario"!! :-I
    Nose como pero funciona el de vista previa, ademas aveces no puedes ni escribir en la caja del comentario :-I

    Necesito ayuda por favor!
    Nose que podria ser??

    Saludos y Gracias!

    Posted on 6/28/2009 5:37 p. m.

     
  33. Yo tambien noté ese detalle hace un momento sirkan, lo que pasa es que el iframe que contiene el mini editor esta sobre el editor de comentarios. Me explico, aunque no lo veas ese iframe tiene un ancho y un alto(definido en las propiedades css), asi que tienes que modificarlo hasta que deje de 'tapar' al editor de blogger

    Posted on 6/28/2009 5:51 p. m.

     
  34. Hola!!
    Gracias! tienes razon!
    Mira esto es un tanto chistozo, pero se puede clickear el boton si vas a la ezquina derecha del boton cerca de la "o" :D

    Pero ahora me pongo serio. Que tengo que correr para solucionarlo?? Onda lo corro poniendole un margin?? o le achico el ancho al editor??

    Saludos y gracias! :P

    Posted on 6/28/2009 6:08 p. m.

     
  35. Si tambien pude notar lo de la 'o' :O

    Lo que debes hacer es achicarlo, piensalo ¿para que tener ese espacio que no sirve para nada?

    Busca el css con el id commenteditor y reduce el width hasta que quede bien.

    Posted on 6/28/2009 6:11 p. m.

     
  36. Hola!
    Listo ya lo arregle!

    Saludos y Gracias por toda la ayuda! :P

    Posted on 6/28/2009 7:31 p. m.

     
  37. Sirkan, acabo de averiguar algo relacionado con freehostia: resulta que es posible renovar el plan antes de que se acabe el año con tan solo un clik(puedes hacerlo desde el panel de usuario).

    Posted on 6/29/2009 10:37 a. m.

     
  38. Hola!!
    Ahh mira tu! :O
    Exelente entonces es para siempre, amenos que se te olvide renovar el plan :o

    Saludos!

    Posted on 6/29/2009 1:36 p. m.

     
  39. Pues no se si para siempre, pero por lo menos te da un año mas :O

    Posted on 6/29/2009 2:45 p. m.

     
  40. Me encantaron lo' bichito' morocho'.....
    ¡¡¡¡¡Aaarriba la negradaaaa, todavíiia!!!!!!!
    :D

    Posted on 6/30/2009 9:18 a. m.

     
  41. Gracias Rodolfo, la verdad son muy bonitos y van con el color del blog :O :P

    Posted on 6/30/2009 9:33 a. m.

     
  42. Hola!
    Oye algo le pasa al mini editor :$
    Al mio tambien, lo saque haber si almenos podia comentar, pero ahora nisiquiera se ve.
    Como lo arreglo...?

    Saludos u Gracias!

    Posted on 6/30/2009 3:35 p. m.

     
  43. Primero que todo, que parte del codigo quitaste?

    Te recomiendo que copies y pegues de nuevo esa parte desde tu blog de pruebas, ahi funciona bien.

    Posted on 6/30/2009 3:39 p. m.

     
  44. Hola!
    Si ahora volvio! por un momento pense que no se arreglaria, por que aparecia en chat en ves de el editor! :-I Pero ya esta erreglado.

    El tuyo tambien volvio! :)

    Saludos y Gracias!

    Posted on 6/30/2009 3:51 p. m.

     
  45. mmm creo que blogger tiene problemas con los iframes...es una pena.

    PD: si alguien tiene problemas en ver el mini-editor solo refresca la pagina.

    Posted on 6/30/2009 6:19 p. m.

     
  46. me rindo xD

    me salian los puros monitos pero no el cuadro para poner texto xd


    saludos

    Posted on 7/01/2009 1:00 p. m.

     
  47. edit XD

    si me resulto

    ahora voy a intentar cambiar los iconos que no me gustan ¬¬

    xD

    saludos

    gracias

    Posted on 7/01/2009 1:02 p. m.

     
  48. No hay de que Pepe. Estoy a disposición por si necesitas algo, tambien puedes dejar los emoticones del script original.

    Posted on 7/01/2009 1:06 p. m.

     
  49. Hola Miguel! :O
    Oye como hiciste para arreglar el problema del mini-editor??
    Porque noto que ahora tu mini-editor sale a la primera y esta perfecto... pero el mio sigue igual hay que recargarla la pagina para que aparecesca ;(


    Saludos y Gracias! :P

    Posted on 7/14/2009 3:11 p. m.

     
  50. Hola Sirkan, lo que pasa es que ese error se debe a que en la plantilla hay agregados mas de un iframe y esto causa que se cambien unos por otros.
    En mi cacso se mezclaban la faviconera y el mini-editor y lo he arreglado momentaneamente poniendo un codigo condicional para que la faviconera solo se vea en la pagina principal...de este modo no hay confusion porque los dos nunca van a estar en la misma pagina (eso mientras encuentro otra forma)

    Si quieres hacerlo de esta forma puedes mirar esta entrada y utilizar los codigos condicionales.

    Posted on 7/14/2009 3:16 p. m.

     
  51. Ahhhh!!
    Si entiendo, que inteligente :) , lo voy a hacer ahora mismo! :o

    Muuuuuchas Gracias!
    Saludos! :P

    Posted on 7/14/2009 5:32 p. m.

     
  52. Hola!
    Ya lo hice pero... primero deje el Chat solo en la pagina principal, pero luego se puso la encuesta ¬¬, la deje en la pagina principal tambien, pero luego de serciorarme de que nada mas se ponga en vez del mini-editor, me dio cuenta de que ahora solo aparece el mini-editor :-I... recarga la pagina y queda igual ¬¬
    Ya nose que hacer ;(

    El editor me pone puros problemas!! Ahora pense en sacarlo hasta que se pueda solucionar... pero al sacar el iframe del mini-editor, desaparece todo en el formulario de comentario, no esta ni la caja para comentar ni el mini-editor.

    Ayuda!! ;( :-I

    Saludos y Gracias!

    Posted on 7/14/2009 8:01 p. m.

     
  53. bueno lo primero será calmarse |O
    Ese problema con la caja de comentarios tambien lo tuve yo, lo solucioné poniendo el mini-editor antes del editor de blogger.

    Aunque es rar0o que no te funcione sin tenerlo en la plantilla...lo mejor es que usando tu blog de pruebas copia y pega todo como estaba antes.

    Si necesitas ayuda solo avisame por mail.

    Posted on 7/14/2009 8:09 p. m.

     
  54. Ok! :O
    Lo voy a hacer mañana y te aviso!
    Ya me dio sueño y ademas despejo mis pesamientos!

    Saludos y Gracias! :P

    Posted on 7/14/2009 8:16 p. m.

     
  55. Hola!!
    Ya, hice lo de poner el mini editor antes del editor de blogger, pero no paso nada, aparece el solo en mini editor y el de blogger no esta. ;(
    "Nose si lo hice bien, pero lo habia puesto antes del iframe del editor de blgger." :$

    Asi que ya me canse de tener tantos problemas con esto, asi que lo quiero sacar, pero tampoco me resulta bien ;(.
    Ya sace el codigo CSS del mini editor y el iframe.
    Pero lo unico que ocasiona es que no aparesca nada, ya nose que hacer ;(.

    Ayuda! porfavor!! ;(
    Saludos y Gracias!! :P

    Posted on 7/15/2009 6:09 p. m.

     
  56. Hola Sirkan, lo mejor es que lo quites de la plantilla para evitar problemas, solo busca tu editor en la plantilla(expande plantillas de artilugios) y reemplaza:(recuerda primero probar en tu blog de pruebas)

    <b:includable id='comment-form' var='post'>
    <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
    <data:post.iframeColorizer/>
    </div>
    </b:includable>


    Otro dato importante: cuando ya hayas hecho los cambios ve a tu navegador y elimina los datos guardado para poder ver en realidad como ha quedado tu blog.

    No desesperes, hazlo con calma :O

    Posted on 7/15/2009 7:20 p. m.

     
  57. Hola!
    Miguel, reemplaze el codigo que pusiste en el comentario anterior pero no paso nada, queda igual ;(.
    Asi que se me ocurrio poner el codigo de la plantilla original, pero sigue igual...;(
    porque nada funciona!! ;(

    Pero lo que no tengo la mas minima idea es que porque solo en la plantilla de mi blog no funciona el mini-editor, porque lo puse en 2 plantilla de prueba y si funciona :\.

    Ya nose que hacer, que sacar ;(.
    Ayuda, Saludos y Gracias!! :P

    Posted on 7/16/2009 6:22 p. m.

     
  58. Eso mismo noté cuando visite tu blog y el de pruebas, si los codigos que tienes en ambas plantillas son iguales, se me ocurre que tal vez pueda ser un widget el que cause el problema.

    porque no pruebas bajar la plantilla al blog de prueba, modificarla hasta que te funcione y cuando sea asi la subes a tu blog :)

    Posted on 7/16/2009 6:32 p. m.

     
  59. Oka! eso voy a hacer :O
    Ojala funcione, aunque habia probando quitando la encuesta, pero tampoco funciono.
    Pero hay voy a ver :o

    Saludos y Gracias! :P

    PD: Pero para eliminar por completo el mini editor que tengo que sacar, aparte del codigo iframe y el css??

    Posted on 7/16/2009 6:40 p. m.

     
  60. con solo eliminar el iframe se borra el mini-editor, asi quede el css...si no hay objeto al cual aplicar los estilos no pasa nada.

    Posted on 7/16/2009 6:42 p. m.

     
  61. Hola encontre este articulo por un enlace en el blog de gema (muy buen blog por cierto). Tengo un problema a la hora de agregar los scripts que mencionas para el formato del texto, me da el siguiente error:
    "The element type "head" must be terminated by the matching end-tag ""."
    Sabes de casualida en que le estoy errando???
    saludos

    Posted on 7/26/2009 9:57 a. m.

     
  62. Hola, aveces estos scripts dan muchos errores en blogger por su sintaxis, lo mejor que puedes hacer es pegar el siguiente codigo (como lo dije en el tutorial) que ya viene con los scripts alojados y si en algun momento cambio de servidor lo avisare en una entrada:

    <script src='http://migueljimenez.freehostia.com/cosas-geocities/editor/formato%20texto.js'/></script>
    <script src='http://migueljimenez.freehostia.com/cosas-geocities/editor/img.js'/></script>

    Posted on 7/26/2009 10:04 a. m.

     
  63. Gracias por tu pronta respuesta, pero el error continua, de todas formas he logrado agregar los emoticones (un gran paso jejejeje XD)

    Posted on 7/26/2009 10:12 a. m.

     
  64. xD entonces debes revisar que hayas hecho los pasos como debe ser...sigue intentandolo :)

    Posted on 7/26/2009 10:16 a. m.

     
  65. Esto te puede interesar!!
    Viste que el boton de copiar no funciona en firefox, buscando y buscando pude encontrar esta pagina que muestra un ejemplo que funciona en ie, firefox y netscape.
    La pagina es http://www.lawebdelprogramador.com/codigo/codigo.php?idp=1825&id=45&texto=JavaScript

    La unica contra es que al copiar te pide una pequeña autorizacion.

    Posted on 8/04/2009 4:07 p. m.

     
  66. :O HaCk CrAcK, es un gran aporte. De hecho lo busque mucho al hacer el mini-editor pero nunca me funcionaron, lo probaré a la mayor brevedad y te cuento :)

    gracias de nuevo.

    Posted on 8/04/2009 8:19 p. m.

     
  67. Me alegro que te halla servido :P. cambiando de tema no podrias darle un vistaso a mi script ya que no me muestra los emoticonos.
    El scrip esta en http://codigobasura.co.cc/script/Emoticonos.js

    Posted on 8/06/2009 6:17 a. m.

     
  68. Tu script tenia algunos problemas en la parte donde le dices al script que caracteres reemplazar. parece que el error lo cometi yo, porque la pagina que usé para convertir el codigo y postearlo cambio algunas cosas.

    El script ya funciona bien, puedes probarlo en 3d fantasy y descargarlo desde aqui.

    Posted on 8/06/2009 7:20 a. m.

     
  69. Gracias por tomarte el trabajo de arreglar el script. Pero ademas de eso era mi plantilla que tenia algunos errores y por eso no lo mostraba. Luego de estar casi 2 horas revisando, borrando y agregando codigo nuevo pude arreglarlo y ahora se ve perfecto :O

    Posted on 8/06/2009 5:10 p. m.

     
  70. No hay de que, esas cosas con la plantilla suelen suceder.

    Me alegra que te haya servido.

    Posted on 8/06/2009 5:17 p. m.

     
  71. ya ise todo el trabajo sucio con la pagina htm y todo eso que conforma el mini editor.....encontre la manera de aumentar el tamaño del formulario ya que no pasaba de 450px o algo asi, pero no logro que quede a la par el mini editor con el espacio blanco (editor blog) del blog. me queda uno debajo del otro..alguna sugerencia.....¿?

    Posted on 8/19/2009 7:27 p. m.

     
  72. Hola Dr4KoN parece que el problemita está en el ancho del iframe que contiene al mini-editor ; ponlo de 210px y seguro veras como desaparece el espacio, sin embargo puedes variar ese valor segun se acomode a tus necesidades.

    si sigue igual pasate de nuevo, me comentas y te diré otras posibilidades por medio del css que seguro servirán.

    Posted on 8/19/2009 7:55 p. m.

     
  73. Hola.
    Está muy bien el tutorial, felicitaciones por ello, bueno y también por el año nuevo a todos :D
    Mi problema es al igual que Dr. Victor Frankenstein al intentar salvar los cambios me aparece:
    The element type "head" must be terminated by the matching end-tag "".
    La verdad es que he revisado y el código no está mal, inclusive tiene las etiquetas head bien.
    Supongo que es que blogger en determinados casos no acepta el código. Mi pregunta es si alguien con el mismo problema ha podido solucionarlo y cómo.
    Muchas gracias.

    Posted on 1/05/2010 2:06 a. m.

     
  74. AMÉ TU BLOG!!!! ES GENIAL, TODO MUY ORIGINAL Y SENCILLO :) MIL GRACIAS POR COMPARTIR! UN BESO!!

    Posted on 6/10/2010 4:39 p. m.

     
  75. CREÍ QUE ERA SENCILLO, Y DEBE SERLO, PERO NO PARA MI :s QUERÍA SABER SI ME PODES AYUDAR SOY NUEVA Y AL PRINCIPIO LO ENTENDÍ PERO AHORA ME HICE UN LIO, PODEMOS CONTACTAR? SI NO ES MUCHA MOLESTIA.. :s
    NO SABÍA QUE PODÍA SER TAN COMPLICADO PONER LOS EMOTICONS :(

    Posted on 6/10/2010 5:24 p. m.

     
  76. se los pusee!!! pero solo a los comentarios :/ y sigo sin entender como poner los "blancy" :(

    Posted on 6/10/2010 5:50 p. m.

     
  77. Hola Agustina, me alegra saber que te ha gustado el blog; sigue asi :) que intentando intentando lo logras; yo tambie lo hago.

    Para cambiar las imagenes, es decir los emoticones amarillos, debes editar el archivo JavaScript; solo debes cambiar las url (rojo) de las imagenes anteriores por las url de los "blancy".

    Cualquier duda me avisas por aqui, o me envias un correo electronico (migue.hit@hotmail.com)

    Un saludo :)

    Posted on 6/10/2010 8:16 p. m.

     
  78. gracias Miguel!
    una pregunta, ya modifiqué las URL por la de las imagenes pero ahora adonde las copio? en que parte de la plantilla exactamente?
    disculpa que sea tan pesada :/
    un beso!

    Posted on 6/12/2010 7:23 a. m.

     
  79. Tienes que reemplazar el script de emoticonos que tenias en la plantilla por el que acabas de modificar (va antes de cerrar el head).

    Posted on 6/12/2010 10:29 a. m.

     
  80. Hola migue esta muy interezante este textarea pero no lo e podido adaptar en mi blog de pruebas solo al colocar la primera parte es decir dos archivos java script tal como lo indicas antes de </head> me da el mismo error del comentarista 89 y 102 me podrias ayudar en esto por favor?

    es que de verdad me intereza este juguetito :-I y como tengo en mente darle un nuevo uso hasta no saber como colocar esos script no podre hacerlo ;( espero tu respuesta :)

    Posted on 9/10/2010 10:35 a. m.

     
  81. En el comentario #90 propongo una posible solución al problema; pruebala primero yb si te sigue dando problema me lo comunicas, no olvides dejar la pagina donde lo estas probando.

    Posted on 9/10/2010 11:57 a. m.

     
  82. Si miguel eso es lo que e hecho antes de realizar la pregunta segui las indicasiones del comentario 90 pero nada ;( no me dejo avanzar mira justo asi lo intente aplicar en la plantilla y no me dejo guardarlo..

    <script src='http://migueljimenez.freehostia.com/cosas-geocities/editor/formato%20texto.js'/></script>
    <script src='http://migueljimenez.freehostia.com/cosas-geocities/editor/img.js'/></script>
    </head>

    como no lo guarda debido a que sale el error

    The element type "head" must be terminated by the matching end-tag

    e desidido no aplicar nada de el codigo hasta que los script no sean aceptados pero de todos modos te dejo la url de el blog de pruebas

    http://nuevaspruebasalea2.blogspot.com/2010/08/camila.html

    Esperare atento tu respuesta de el caso :)

    Por cierto hay un textarea funcionando en la pagina principal de ese blog es el unico que a funcionado desde el html de las entradas si puedes revisalo quisas sea de utilidad :O Saludos desde Venezuela :)

    Posted on 9/10/2010 5:43 p. m.

     
  83. Si miguel eso es lo que e hecho antes de realizar la pregunta segui las indicasiones del comentario 90 pero nada ;( no me dejo avanzar mira justo asi lo intente aplicar en la plantilla y no me dejo guardarlo..

    <script src='http://migueljimenez.freehostia.com/cosas-geocities/editor/formato%20texto.js'/></script>
    <script src='http://migueljimenez.freehostia.com/cosas-geocities/editor/img.js'/></script>
    </head>

    como no lo guarda debido a que sale el error

    The element type "head" must be terminated by the matching end-tag

    e desidido no aplicar nada de el codigo hasta que los script no sean aceptados pero de todos modos te dejo la url de el blog de pruebas

    http://nuevaspruebasalea2.blogspot.com/2010/08/camila.html

    Esperare atento tu respuesta de el caso :)

    Por cierto hay un textarea funcionando en la pagina principal de ese blog es el unico que a funcionado desde el html de las entradas si puedes revisalo quisas sea de utilidad :O Saludos desde Venezuela :)

    Posted on 9/10/2010 5:47 p. m.

     
  84. HOLA ;( USO LA OPCION "IMG" PARA LA IMAGEN PERO NO LOGOR PONER UN COMENTARIO CON UNA IMAGEN Y EN LUGAR DE ESO NO SALE MI COMENTARIO ;(

    Posted on 9/11/2010 12:00 p. m.

     
  85. Te contesto en este y en el otro comentario, lo que pasa es que blogger no permite imagenes en los comentarios; el problema no es del blog, sino de las restricciones que pone blogger ;(.

    Posted on 9/11/2010 1:55 p. m.

     
  86. ;( me sale: The element type "head" must be terminated by the matching end-tag "". porque en tu plantilla si funciona? le faltara alcomo como: type ='text/javascript'/> osea no se nada de eso peor me he dado cuenta que otros script usan al final ese " type='text/javascript'/>" peor nose abria que ponerle una funcion o algo asi

    Posted on 9/15/2010 5:46 p. m.

     
  87. :o y para solucionar eso del problema del script podria ser que mejor se ponga el script directo en la plantillas?

    Posted on 9/15/2010 5:54 p. m.

     
  88. Agregar los scripts puede llegar a ser un poco complicado, debes hacerlo todo al pie de la letra tal cual lo explico.

    Posted on 9/15/2010 7:24 p. m.

     
  89. Gracias por el aporte, me fue de mucha utilidad el post.

    Ojalá hubiera una forma de agregarlos directamente al formulario o que el mismo Blogger añadiera esas funciones :\

    Gracias de nuevo, saludos! : )

    Posted on 10/20/2011 4:07 p. m.

     
  90. hola Miguel que tal?
    sabes me encanta el editor, pero no puedo ponerlo en mi blog enserio me he partido la cabeza durante horas y nada que me da!!!
    y eso que lo exolicas paso a paso pero la verdad no pude

    Posted on 1/06/2012 11:15 a. m.

     
  91. Hola Sawako, puedes decirme ¿cúal es el problema que tienes al ponerlo? ten cuidado con el ancho de la plantilla, es posible que si lo estes haciendo bien pero no se vea porque no hay espacio.

    Posted on 1/07/2012 8:05 p. m.

     

Publicar un comentario en la entrada al viejo estilo