Agregar responder comentario en Blogger.

Para agregar el botón:

1.- Vamos a Diseño luego a Edición HTML y Expandir plantillas de artilugios.

2.- Ahora buscamos el siguiente código <b:include data='comment' name='commentDeleteIcon'/> </span> y debajo pegamos este código (Si pegamos abajo de este código el botón estará al costado de cada autor de comentario):

<span class='comment-reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=ID_DE_TU_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>

 4.- Modificamos ID_DE_TU_BLOG por tu id de tu blogger como lo conseguimos muy fácil vamos Diseño en la url veremos la id que son solo los números los copiamos y los pegamos en su lugar de ID_DE_TU_BLOG. Como se muestra la imagen siguiente:

3.- Por ultimo Guardamos.

Si deseamos podemos sustituir RESPONDER por una imagen solo remplazamos por este código:

<img src="URL_DE_LA_IMAGEN_AQUI"/>

Cómo compartir las entradas de Blogger en Google+.

Para los usuarios de blogger el poder compartir sus entradas con sus amigos (circulos) de google+ ha sido unas de las opciones más esperadas. En el mes de octubre del pasado año Google nos indicaba la posibilidad de cambiar de perfil del que usamos en Blogger, por el que creamos en Google+. 


 Ahora está interrelación ha dado un paso más y ya es posible compartir nuestras entradas directamente en nuestra cuenta de Google+.


¿Donde indicar que queremos compartir nuestras entradas de blogger?
* Tenemos que conectarnos a nuestra cuenta de blogger.
* Vamos a la pestaña configuración y luego hacemos clic en Entradas y comentarios. 
* En la lista de Compartir en Google+, seleccionamos si y guardamos la configuración.

Ahora cada vez que se publique algo, automáticamente te dará la opción de compartirlo a los circulos sociales que le indiques de Google+. Con está opción de ahora en adelante no tendrás que copiar y pegar la entrada para colocarla en el botón de compartir.

---

Los invitó a dejar su comentario lo cuál nos ayuda a mejorar nuestras publicaciones, si les ha gustado está publicación, y no quieren perderse alguna otra pueden seguirnos en: FACEBOOK y/o RSS.

Optimizar los títulos en blogger.

Optimizar los títulos de las entradas en Blogger es importante ya que nos hace obtener más visitas. Esto había dejado de funcionar anteriormente pero ahora es posible de nuevo se ha agregado un nuevo código el cuál nos da la posibilidad de hacer la tarea que antes.

El código permite mostrar el nombre de la entrada sin traer consigo el nombre del blog. Para optimizar los títulos podemos realizar lo siguiente:

1. Dirígete a la pestaña “Diseño” y posteriormente a la opción “Edición HTML”.
2. Busca el código correspondiente a los títulos:

   <title><data:blog.pageTitle/></title>

3. Sustituye ese código por el siguiente condicional:

   <b:if cond='data:blog.pageType == "item"'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
   <b:else/>
    <title><data:blog.pageTitle/></title>
   </b:if>

Poner botón y al presionarlo mostrar bóton ME gusta de Facebook.

Lo que aprenderemos a hacer es un botón que al ser pulsado mostrara un botón adicional en el cuál podemos darle me gusta o sea el botón me gusta. Esto lo vamos a hacer de una manera sencilla utilizando código JavaScript y código XHTML. 

Lo que queremos hacer es algo como esto: 

Fig. 1.1 Al presionar aparecera la fig. 1.2

Fig. 1.2

Eso es lo que haremos colocaremos el botón y al ser presionaro aparecera el botón de Me gusta, como hacer eso, sinceramente admito que a mi no se me ha ocurrido yo lo he visto en ciudadblogger.com pero no he visto en ningún lugar como hacerlo simplemente comencé a realizarlo desde 0. 

Entramos a PLANTILLA --> EDICIÓN HTML. 

Pegamos esto antes de </head>. 

<script> var i=false; function mostrarface() { if (i== false) { i=true; document.getElementById('veoFacebook').style.visibility='visible'; } else { i=false; document.getElementById('veoFacebook').style.visibility='hidden'; } } </script>

Pegamos esto antes de </body>. 

<p align="right" style="display:scroll;position:fixed;bottom:30px;right:200px;"><b> <span id="botonenviar"></span> <input style="position:absolute; height: 49px; width: 200px;" type="button" id="gusta" name="gusta" value="Te gusta Trucos con Blogger?" onclick="mostrarface();"/> </b> </p> <div name="veoFacebook" id="veoFacebook" class="fb-like" data-href="http://www.facebook.com/Mundoenlaweb" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" align="right" style="display:scroll;position:fixed;bottom:50px;right:140px;visibility:hidden;"></div>

Donde tengo el código en color rojo pondrás el código que te genera el face para tu propio botón de me gusta.

Esto lo podemos visualizar en esté blog, al dar click aparece el botón de me gusta de facebook el botón se encuentra situado en está página en la parte inferior.
De cualquier manera si tienes dudas puedes dejarme un comentario. Saludos. Espero que les sirva.

Poner Bordes a Entradas y Gadgets.

Algunas veces las plantillas son muy planas y nos hacen sentir que las entradas se pierdan entre ellos mismos en donde empiezan y en donde terminan las entradas. Así que una opción para delimitar esto puede ser colocar bordes a cada uno de estos espacios. Podemos elegir si se lo aplicamos solo a las entradas o únicamente a los gadgets.

Veamos pues cómo enmarcar entradas y gadgets tanto en las plantillas "nuevas" como en las "antiguas" de Blogger. Para cualquiera de las dos entra en Diseño | Edición de HTML, y ahora...

Para plantillas hechas con el Diseñador de plantillas de Blogger

Antes de ]]></b:skin> agrega esto:

.post-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 20px 0;
}

.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}

.footer-inner .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}

Poner botón ir abajo e ir abajo.

Los botones arriba y abajo facilitan al usuario al desplazamiento sobre el contenido de la página, sobre todo esto es muy indispensable cuando en la página hay demasiadas entradas o cuando las entradas tienen muchos comentarios o demasiado texto. Ahora les explicare la manera de poner los botones arriba y abajo. 

Hasta el momento conocía manera pero en la web encontré una manera más sencilla de igual manera les pondré las dos maneras para que ustedes decidan cuál les agrada más. 

Entra en Diseño > Edición de HTML y antes de </body> pega lo siguiente:

Sin importar cuál forma utilicemos vamos a ver lo siguiente, si usamos la nueva plantilla de Blogger tenemos que hacer lo siguiente antes que nada: 

<div class='body-fauxcolumns'>

Y lo cambiaremos por lo siguiente:

<div id='outer-wrapper' class='body-fauxcolumns'>

Ahora buscaremos lo siguiente:

<div class='content-cap-bottom cap-bottom'>

y lo cambiaremos por esto:

<div id='footer-wrapper' class='content-cap-bottom cap-bottom'

FORMA QUE UTILIZÓ.

Lo primero que tienes que hacer antes de </head> pegamos el codigo siguiente: 

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

Ahora antes de </body> pega lo siguiente:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:450px; right:0;' title='Ir arriba'/></a>


<a href='#footer-wrapper' onclick='new Effect.ScrollTo(&quot;footer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:400px; right:0;' title='Ir abajo'/></a>

Nuevo Perfil de facebook

Ahora facebook a sacado un nuevo perfil que a todos los usuarios los está dejando con la boca abierta ya que nadie se esperaba de está mejora de facebook. 

El nuevo perfil de facebook se ve de la siguiente manera: 

El nuevo perfil de facebook, cumple con un diseño muy diferente al que le conocíamos anteriormente. Claramente facebook está mejorando por lo que si desean tener este nuevo perfil pueden entrar a la siguiente sitio: 

https://www.facebook.com/about/timeline

Donde encontraran toda la información para comenzar a usar con su nuevo perfil. 

Poner Páginas en Blogger de una manera sencilla.

Podemos poner la páginas en blogger de manera sencilla y rápida, ¿Cómo lo podemos hacer? si tu blogger aún no tiene la barra de paginas y quieres hacerla en este post te diremos cómo la hicimos nosotros de manera sencilla y rápida. 

Poner Páginas en blogger rápido y fácil. 

Este método consta de agregar el codigo CSS necesario en la plantilla y agregar un gadget HTML/Javascript únicamente. 

Agregar código en la plantilla. 

Diseño > Edición HTML > ahora buscamos lo siguiente ]]></b:skin> lo podemos usar presionando ctrl + f en nuestro navegador. 

Pegamos lo siguiente justo antes de la etiqueta encontrada. 

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Ahora ve a Diseño > Añadir gadget > elije HTML/Javascript y pega el siguiente código:

<style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#d10000;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Siguiente";</script><script style='text/javascript' src='http://dl.dropbox.com/u/3373498/PazosBlogger-blogger-page-nav-v2.js.txt'></script>

Bueno aquí lo que tenemos que destacar principalmente es lo que remarcamos mas fuerte: 

var pageCount=5;   es el código para que muestre 5 entradas por cada página cambialo por el número que quieras. 

var displayPageNum=5; es el código para el número de páginas que habrá en la lista.

Importar contenido de mi blog a pagina en facebook.

Facebook se ha convertido en una herramienta que nos permite comercializar nuestros productos rápidamente, por lo que tener enlazado nuestro sitio web a facebook es muy importante si queremos crecer más rápidamente, existen varias formas para importar nuestro contenido desde nuestro sitio web a nuestra páginas de facebook y/o perfil de facebook. Ahora lo que utilizaremos es lo que a mi perspectiva es la manera más eficiente de utilizarlo vamos a usar una aplicación que se llama RSS Graffiti en Facebook. 

Esta aplicación nos permitirá enlazarnos fácilmente para compartir nuestro contenido: 

Lo primero que tenemos que hacer es buscar la aplicación y permitir el acceso y llegaremos a tener algo así como la imagen mostrada a la derecha. Vamos a presionar el botón Añadir feed. 

Para comenzar el proceso de la importación. 

Lo mas importante es llenar con el feed correcto de nuestro blogger para esto vamos a nuestro perfil de blog, seleccionamos configuraciones, otros y ahi encontramos Publicar URL direccionada al feed esa la colocamos en el campo URL de feed ya solo damos actualizar en la pantalla central de vista previa y nos mostra como se vera nuestras importaciones. 

Ahora solamente necesitamos guardar los cambios y tendremos activo para que cada publicación este apareciendo en nuestra página o perfil de facebook. 

Santa Claus en tu blog volando con su trineo.

Hola a todos, bueno ahora que estamos en este periodo navideño, ahora les traigo un pequeño script el cuál nos ayudara a adornar nuestro blogger, si pueden observar mi blog en estos momentos tiene o en algunos momentos aparecen regalos, copos de nieve, etc algunas cosas las cuales son relacionadas con navidad si ustedes quieren tenerlas ahora les dire como: tambien si visitan http://compuroo.blogspot.com veran un trineo con Santa Claus con destellos muy padre como el siguiente:

Para ponerlo sólo entra en la Edición HTML de la plantilla y agrega antes de </head> este script:

<!-- Santa Claus volando por el blog -->
<script type="text/javascript" src="http://blogparts.giffy.me/0017/parts.js" />
<!-- Santa Claus volando por el blog -->

SI deseas los destellos de cosas navideñas coloca lo siguiente en la Edición HTML de la plantilla y agrega antes de </head> este script:

<!-- Destellos de navidad -->
<script type="text/javascript" src="http://blogparts.giffy.me/0001/parts.js" />
<!-- Destellos de navidad  -->

Es todo lo que necesitas para darle a tus lectores un poco de vista navideña. Les comento que esté script lo he encontrado desde el siguiente sitio donde podrán ver más scripts como este: 

http://blogparts.giffy.me/

Saludos y felices fiestas.

Mostrar entradas de blog en facebook.

Para importar nuestras entras o mostrar nuestras entradas de blogger en nuestro facebook, lo podemos realizar de distintas maneras una manera relativamente fácil es la siguiente:

* En el cuadro de facebook buscar colocamos el siguiente nombre RSS Graffiti o vamos a la siguiente dirección:  RSS Graffiti.
* En la siguiente aplicación después de permitir lo único que hacemos es dar clic en el botón + add feed.

Lo único que debemos agregar es lo siguiente:
- Agregamos feed url, este lo encontramos en nuestro blogger, en configuración y vamos a otros, donde dice publicar url relacionada al feed, la copiamos y la pegamos donde no la pide en la aplicación RSS Graffiti.
- Source Name: Puedes colocar el nombre de tu blog.
- Source URL: Colocar la URL de tu página web.

Presionas el botón donde dice Preview ( Click here to generate previwe).
Si aparecen tus entras correctamente puedes guardarlo para que comience a trabajar en unos minutos en caso contrario repite los pasos principalmente revisa la URL del Feed que sea correcta.

Poner Botón "Me Gusta" en Blogger.

Desde hace ya tiempo facebook tiene pluggins sociales, estos pluggins pueden ser incorporados a cualquier sitio web, mediante un código que nos proporciona facebook (javascript/html). Entre otras cosas, existe lo que es un botón de Me Gusta. Este botón es el que vemos siempre en todas las publicaciones que existen en facebook y ahora está la posibilidad de poderlo tener en nuestra web.

Ventajas de contar con este pluggin en nuestra web. 

Las ventajas que para mi cuenta este servicio son: 

- Poder identificar que a los usuarios les gusta la información, citada en nuestra web. 

- Así también, sirve para que al momento de que el usuario pulsa el botón Me Gusta está compartiendo inmediatamente en su perfil información de nosotros para que nos ayude a ser visitados. 

Agregar el bóton "Me gusta" a Blogger. 

1.- Podemos ir a la siguiente página Personalizar Redes sociales, está nos proporciona una ventana para que nosotros podamos editar nuestro botón me gusta con las características que deseemos, es relativamente fácil solo hay que interactuar con los combos y botones nos ira mostrando el diseño. 

2.- Ahora, tenemos que presionar el botón de obtener código, una vez que tengamos el código, vamos a (Incio --> Plantilla --> Edición de HTML) y pegamos el primer código que nos proporciono en sencillo para encontrarlo solo pulsen Ctrl + F y escriban sobre el patrón de busqueda la palbra y abajo de ella pegamos nuestro código. 

Nota: Les recomiendo dejar un comentario para posteriores accesos saber de que se trata ese código para colocar un comentario en la plantilla, sería de la siguiente manera: 

3.- El siguiente paso es guardar la plantilla, una vez guardada cerramos y vamos a la vista de diseño donde agregaremos el segundo codigo proporcionado por facebook. Guardamos y ya podemos ver nuestra web con el botón listo, lo pueden ver en está web, en la parte superior se encuentra mi botón Me Gusta. 

Botón Volver (Subir).

Este script nos permitirá colocar una imagen al lado derecho de nuestra pantalla en la parte inferior para que en el momento que estemos en una determinada posición nos permita llegar hasta arriba de nuestra página únicamente dando un solo clic en la imagen. 


Para esto necesitamos agregar un nuevo gadget, si como ya sabemos le ponemos que sea para código HTML/SCRIPT y escribimos el siguiente código: 


<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="#" title="VOLVER ARRIBA"><img src=" Url de la imagen del boton"/></a>


Lo único que deben cambiar es donde dice URL de la imagen del botón, colocamos la URL de la imagen que deseemos. 

Quitar barra de Blogger.

Hola a todos, hoy les traigo un nuevo truco para blogger el cuál consiste en lo siguiente, vamos a quitar la barra  de Blogger de nuestro blog para darle un mejor diseño a que nos referimos con quitarsela nuestro blog actualmente se ve así: 

Para quitar esta barra realizaremos lo siguiente: 

1. Da click en la pestaña “Plantilla” y después en la opción “Edición de HTML”
2. Busca en el código el siguiente texto:

1. body {
   ...

2. Busca en el código el siguiente texto:

   body {
   ...

3. Justo arriba de él pega el siguiente código de acuerdo a tu versión de Blogger:Para el Nuevo Blogger:

   #navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
   }

Cuadro de texto en blogger.

Una de las cosas muy sencillas que podemos insertar en nuestro blog que nos puede ser de utilidad para poner código fuente o lo que queramos para nuestro blog.

La manera de hacerlo en un post será la siguiente:
1. En primer lugar nos vamos a nuestro mensaje que queremos escribir, y escribimos lo que queramos en el mensaje y dejamos un espacio con un texto para ponerlo.

2. Cambiarmos la vista redarctar a “Edición de HTML” en la pestaña superior de donde escribimos la entrada.

3. Copiamos el siguiente código HTML en el lugar donde queremos que esté:
Estuve en compuroo.blogspot.com
Una vez hecho esto, cambiamos el texto entre las etiquetas textarea, para cambiar el número de filas para escribir habría que cambiar el 3 entre comillas por otro número. Para cabiar la anchura del campo de texto habría que dar mayor longitud de caracteres.

Guardamos y el resultado será algo similar a:

Titulo de la página con movimiento en el navegador.

El truco que traigo hoy para blogger es bastante sencillo, pero muy útil es uno de los trucos que la mayoría de los blogs estan utilizando actualmente, lo único que hace es ponerle al titulo que aparece en tu navegador movimiento para que se vea el texto como el que aparece aquí abajo: 

Así se mueve el titulo

Para poner este truco en tu blog vas a Diseño,Edicion HTML y buscas la etiqueta  </body> y encima de ella pegas lo siguiente:

<SCRIPT LANGUAGE='JavaScript'>
var txt=" Tecnología, ZetLaX y más locuras ";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</SCRIPT>

Ahora solo reemplazas Tecnología, ZetLaX y más locuaras... por el titulo de tu blog y listo

Script para hacer imagenes grandes al pasar el mouse.

Hola les gustaría hacer algo así, que cuando pases el ráton por la imagen se haga más grande.:

Esto lo puedes lograr con HTML aunque también lo puedes realizar con javascript una forma muy sencilla de realizarlo es de la siguiente manera, coloca el siguiente código y lo lograras de una forma muy sencilla.

Si quieres ver el código más comodamente sigue el siguiente enlace: 

https://docs.google.com/document/d/199OqWruc4Wq0Gp0jDaH_tiOFZkzZg1cmwQpHsiG_i68/edit?hl=es

Gadget Top 10 de visitantes

 Te presento el nuevo Gadget que he diseñado para tú blog, es una aplicación que contabiliza en imágenes los visitantes que más frecuentan tú sitio, mostrando los primeros10  visitantes usuarios de google (blogger, gmail) que más te visitan, resulta atractivo si deseas darle más popularidad y aspecto dinámico a tú sitio, y así estimular a los usuarios a que regresen nuevamente, su foto a avatar será mostrado seguidamente del número de veces que ha entrado a tu blog. Acá te anexo una captura pantalla de como quedaría el gadget:

Si deseas agregar esta aplicación en tu blog, solo sigue los siguientes pasos:

Colocar Contador de Post y de comentarios

¿Quieres llevar el contador de comentarios y post en tu blog?

Para colocar el contador de comentarios y post en tu blog, se puede desarrollar lo siguiente yo lo he encontrado por ahí en la web y está muy interesante solo necesitas hacerle cambios. 

Así se visualizaría el gadget: 

 con sus respectivos valores... 

Coloca el siguiente código en tu web. 

<script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script> <div style="heigth: 48px; width: 122px;"> <img src="https://lh6.googleusercontent.com/-__bjBPo3ZZo/Tk10VFgoGQI/AAAAAAAAASw/CWN-cRNBepc/Posts%252520y%252520comentarios%252520totales.png" style="top:0px; left:0px; position: absolute; z-index:60; heigth: 48; width: 122px;" /> <span style="font-size: 9pt; z-index:62; position: absolute; top:9px; left:94px;"><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> </span><span style="font-size: 9pt; z-index:62; position: absolute; top:25px; left:94px;"><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></span> </div><a href="http://laventanadewindows.blogspot.com/2011/08/post-y-comentarios-totales-de-un-blog.html" >¿Quieres esto en tu blog?</a>

Este material no lo he creado yo lo he encontrado en un blog llamado la Ventana Windows. Espero les sirva.