sábado, 22 de marzo de 2014

Subir un vídeo de youtube

Muchas veces encontramos en youtube contenido interesante para nuestro blog, pero poner el enlace sin más no queda muy bien.

Así que vamos a ver cómo podemos poner un vídeo para que se visualice en nuestro propio blog, es muy sencillo y lo he aprendido del blog El Perro de Papel.

Cuando tengas localizado un vídeo sólo tienes que coger el código html que te da, pero ¿dónde está?

Compartir ---> Insertar

Te aparece una cajetilla con el código html, y ya sólo tienes que copiarlo y pegarlo en tu blog :)

martes, 18 de marzo de 2014

¿Cómo añadir la opción de responder a los comentarios?

Es algo muy sencillo que he encontrado en el blog Personalización de blogs.

No hay que tocar esta vez html ni nada de eso, es cuestión de configurar el blog de cierta manera.

Para que te salga la opción de responder a un cierto comentario hay que tener activadas dos opciones:

Configuración ---> Otros ---> Permitir feed del blog ---> Completo

Configuración ---> Entradas y comentarios ---> Ubicación de los comentarios ---> Debajo de la entrada

Con esto ya tiene que salir automáticamente la opción de responder.

sábado, 15 de marzo de 2014

Añade un link cuando comentas en otro blog

Para darnos a conocer puede ser una buena idea incluir un link a nuestro blog cuando comentamos en otro, así poco a poco nos podemos dar a conocer.

¿Cómo se hace?

<a href="url del blog" >palabras que queramos que tengan el link</a>

Si añadimos esto en los comentarios aparecerá el link y será más fácil que otros bloggeros nos encuentren ;)

miércoles, 12 de marzo de 2014

Añadir apartado de comentarios recientes

Encontré la explicación en el blog Lireth´s Notebook.

Para conseguir el código html necesitamos entrar en esta página way2blogging y rellenar los campos.

Cuando se nos genere el código html, lo tendremos que copiar y pegar en un gadget como html y ya lo ordenamos en la posición que más nos guste.

sábado, 8 de marzo de 2014

Instalar google analytics

Para tener un seguimiento de las visitas que recibe nuestro blog, es importante incorporar la herramienta de google analytics.

En el blog Mamá quiero ser blogger viene bien detallado.

Primero hay que ir a la página de GOOGLE ANALYTICS, y entraremos con nuestra cuenta de blogger.
Después nos pedirá que nos registremos, así que lo hacemos rellenando todos los campos.

Cuando esté todo hecho nos aparecerá una página con un código.

   - Lo tendremos que pegar en diseño, en una plantilla HTML, y colocamos el widget debajo de entrada.

Después tenemos que ir a:

Configuración ---> Otros ---> Google Analytics

Y copiamos ahí el ID que nos ha proporcionado la página.

Una vez hecho esto ya nos reconocerá y podremos ver las estadísticas y visitas que tiene nuestro blog.

Poner botón de Pin It en las fotos del blog

Pinterest puede hacer que consigamos más tráfico en la web, si pinean muchas veces una foto nuestra, conseguiremos avanzar puestos.

Así que vamos a ver cómo se coloca el botón para que los lectores puedan pinear todas nuestras fotos, en el blog Mamá quiero ser blogger está detallado paso a paso.

Tenemos que ir a la plantilla HTML.

Buscamos: </body>

Y justo encima copiamos el siguiente código:

<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg74u5UgJdP1D3ml69Vu8ztOV4Q2SMMlq4GLMTe1UbFRgvkRa7gA2LpN1MzOiXX6RDzovOrpzMwMX_w2hUUs9EZwad915fXNH6WlxUePkbphmF3zncqbJpQn0rt4-3GB8deykXnrXmSyYF3/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "topleft";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'></script>
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/">Blogging tips</a></div>

Podemos cambiar la ubicación del botón con de esta manera:

Topleft
Topright
Bottomleft
Bottomright
Center

Y el enlace lo podemos cambiar por nuestro propio botón de Pinterest personalizado.

miércoles, 5 de marzo de 2014

Poner un enlace en el comentario de un blog

Es cuestión de usar códigos HTML, el código lo he sacado del blog Personalización de blogs.

Debes escribir un comentario normal en el blog que quieras, y cuando quieras escribir una frase con enlace hay que poner:

<a href="url de la página " >palabras que queramos que tengan el link</a>

Con esto ya tendrás tu comentario con un enlace que redirige donde quieras ;)

lunes, 3 de marzo de 2014

Añadir los iconos de redes sociales

Es muy fácil añadir los iconos de redes sociales en tu blog para que te encuentren los lectores, en el blog Mamá quiero ser blogger viene muy bien detallado.

Se implementan mediante un gadget.

Cambiar los botones de las páginas

Debajo de la portada aparece una línea que contiene las páginas de nuestro blog, parece que lo único que podemos hacer es jugar con los colores y las letras, pero también podemos añadir botones personalizados ;)

En el blog Mamá quiero ser blogger, da una explicación paso a paso muy completa.

En esta ocasión se hace desde un gadget, así que nos vamos a diseño.

    Eliminamos el gadget de páginas.
    Creamos un nuevo gadget HTML.

Ahora lo que tenemos que escribir en contenido es:

<center><a href="URL de la página de destino"1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="tu imagen" /></a>

Tenemos que cambiar lo subrayado por los links correspondientes, en el primero ponemos la url de la página a la que queremos que nos lleve (guardarla antes de borrar el gadget de páginas) y en el segundo la url de la imagen que queramos colocar a modo de botón.

Y debemos escribir un código por botón.

También hay que tener cuidado con los tamaños, ya que el ancho total no podrá ser mayor al de la portada, así que si queremos poner muchos botones, tendrán que ser más pequeños para que nos quepan todos.



Poner separadores entre los posts

Es muy sencillo y da un aspecto de orden al blog. Lo he sacado del blog Mamá quiero ser blogger, donde lo explica con un vídeo paso a paso.

Consiste en añadir un código html.

Plantilla ---> Editar HTML

Tenemos que buscar este código: <b:include data='post' name='post'/>

Y justo debajo tenemos que copiar este otro:

<center><img src='URL de tu imagen'/></center>

El diseño lo tienes que tener preparado y subido al servidor, y se sustituye lo subrayado por la url de tu imagen.


Poner imagen de "leer más"

Esta idea la he sacado del blog Mamá quiero ser blogger, donde lo explica todo detalladamente.

En blogger te dan la opción de añadir "leer más" para continuar leyendo un artículo.

Diseño ---> Entradas del blog ---> Texto del enlace de la página de entrada

Y ahí ya escribes el mensaje de "leer más" o lo que quieras.

Pero vamos a personalizarlo con una imagen propia que diseñemos.

Poner separadores en el sidebar

En muchos blogs vemos que en el sidebar tienen separadores que le dan otra vida al blog, vamos a ver cómo se colocan esos separadores, la idea la he cogido del blog Mamá quiero ser blogger donde lo detalla todo en un vídeo.

Primero tenemos que preparar el diseño y para saber el ancho de la imagen nos tenemos que ir a un gadget de imagen y ahí nos dice cuál es el ancho de nuestro sidebar.



Recomiendo que de alto el diseño mida unos 10-20 px.

Y ahora, para colocar los separadores nos tenemos que ir a la plantilla:

Plantilla ---> Editar HTML

Y buscamos /* Widgets, y al final del todo pegamos este código:

.sidebar .widget {
background-image: url(url de la imagen);
background-position: bottom;
background-repeat: no-repeat;
padding-bottom:70px;
}   

El padding-bottom es para ajustar lo separado o junto que quieres los separadores de los gadgets.

Y con esto ya se te colocan los separadores entre cada gadget que tengas.


domingo, 2 de marzo de 2014

¿Cómo poner una firma al final de cada post?

Es una de la opciones que ofrece blogger, así que es muy sencillo.

Configuración ---> Entradas y comentarios ---> Plantilla de las entradas

Y añadimos en código html la firma que queramos, también se puede poner una imagen, sólo hay que subirla previamente al servidor y poner la url.

Poner el nombre de tu blog en movimiento en la barra superior

Esta idea la he sacado del blog El Perro de Papel, donde lo explica todo paso a paso y es muy sencillo.

Consiste en escribir un código html.

Plantilla ---> Editar HTML

Hay que buscar: </head>

Y justo encima debemos copiar el siguiente código:

<script>
//<![CDATA[
var txt="Nombre de tu blog";
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>

Guardáis y ya veréis que efecto más chulo se queda. :)

Crear formulario de contacto

Hay una página que genera formularios de contacto, es el más sencillo que existe y es muy útil ya que los mensajes te llegan al correo.

 Vamos a ver cómo se puede crear un formulario de contacto como este:


Tenemos que irnos a esta página:


Rellenamos los campos a nuestro gusto y le damos a crear formulario. Nos dará un código html que será el de nuestro formulario que es el que debemos poner en la página (vista html) o gadget, pero si probáis, os sale un formulario poco estético, así que vamos a hacer una pequeña modificación para que salga uno más bonito.

En vez de copiar el código que nos dan, vamos a copiar este otro:

<iframe src="http://es.foxyform.com/form.php?id=145354&sec_hash=a0caf4f2bbc" scrolling="no" width="500px" height="450px" style="border: none;" frameborder="0"></iframe>

Y debemos cambiar lo subrayado en amarillo por los datos id y hash propios que nos dio la página.

Con esto ya tenemos un formulario más bonito y que se puede personalizar más fácilmente.

¿Cómo escribir tu propio mensaje en el formulario de comentarios?

Esta opción te la ofrece blogger.

Configuración ---> Entradas y comentarios ---> Mensaje del formulario de comentarios

Le das a añadir y ahora puedes escribir lo que quieres en lenguaje HTML.

Pero también se pueden poner imágenes, y eso ya se hace desde la plantilla html. Esta idea está sacada del blog El Perro de Papel, donde lo explica paso a paso.

Primero tienes que preparar un diseño y subirlo al servidor para tener un link de la imagen.

Después hay que ir a la plantilla:

Plantilla ---> Editar HTML

Buscamos esto:

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

Y cambiamos lo subrayado por el link de nuestra imagen. Y nos tiene que quedar así:

<b:else/>
      <h4 id='comment-post-message'><center><img src=”URL de la imagen”/></center></h4>
      <p><data:blogCommentMessage/></p>

Y con esto ya puedes atraer nuevos comentarios.



Personalizar la fecha

Vamos a ver cómo se puede poner una fecha redonda, cuadrada o subrayada como la tengo yo.

La idea la he cogido del blog Personalización de blogs, pero he cambiado un poco los pasos.

Nos vamos a nuestro código html.

Plantilla ---> Editar HTML

Y buscamos lo siguiente:

]]></b:skin>

Y justo encima colocaremos lo siguiente:

.date-header span {
padding: 5px 5px 5px 5px;
border-radius: 100px;
/*pb*/  /* borde de la fecha*/

A partir de este código ya podéis jugar con él y cambiarle los parámetros para ponerlo a vuestro gusto, yo lo he puesto para conseguir un subrayado y para ello sólo he tenido que añadir abajo esto:

border-bottom: dashed;
border-color: #F78181;

Con la primera frase indico que quiero una línea discontinua abajo (un subrayado) y con la segunda estoy indicando el color de la línea.

Personalizar el botón de "Buscar"

En blogger hay un gadget para poner un botón buscardor en nuestro blog, pero es genérico y a través dfel blog de "El Perro de Papel" aprendí que se puede personalizar ese botón, así que vamos a ello.

Primero hay que crear un gadget HTML y escribir en contenido lo siguiente:

<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> 
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>


Y ahora es momento de ir a la plantilla para añadir más códigos que nos van a permitir la personalización propiamente dicha.

Plantilla ---> Editar HTML

Y buscamos lo siguiente:

]]></b:skin>

Pues justo encima de eso tenemos que escribir lo siguiente:

#search {
width: 228px; /* Ancho del buscador */
height: 25px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: #8FE1D8 url(#) no-repeat;
border-radius: 10px 10px 10px 10px; /* Borde del marco del buscador */

}
#search-box {
margin-top: 3px;
border:0px;
background: #FFFFFF;
text-align:center;
border-radius: 10px 10px 10px 10px; /* Borde del cuadro del buscador */
}

He copiado tal cual el código que nos dan en El Perro de Papel, así que si lo dejáis tal cual os saldrá el buscador que ella tiene, y ahora es cuestión de irle cambiando los parámetros para personalizarlo al gusto de cada uno.

Si se añade border y border-color, se puede cambiar el tipo de línea y el color, tal y como lo tengo yo.



Sólo es cuestión de tener unos conocimientos básicos de HTML.

Eliminar la frase "Suscribirse a: Enviar comentarios (Atom)"

En todo los blogs aparece debajo de cada post la siguiente frase: "Suscribirse a: Enviar comentarios (Atom)".

Esto se puede quitar y lo he aprendido del blog "Personalización de blogs" donde aparece todo perfectamente explicado.

Para ello hay que toquetear la plantilla HTML.

Plantilla ---> Editar HTML

Y buscar lo siguiente:

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

Y hay que eliminar la siguiente frase:

<b:include data='feedLinks' name='feedLinksBody'/>

Guardamos y con esto desaparece esa etiqueta. :)

Actualizo porque me he dado cuenta que de esta manera sólo desaparece de la página principal, pero no del resto.

Para que desaparezca para siempre vamos a añadir un código para ocultarla y que no se vea.

                                                    Plantilla ---> Editar HTML

Y buscamos en el buscador:

]]></b:skin>


Y justo encima vamos a poner lo siguiente:

.feed-links {
visibility:hidden;
display:none;
}

Con esto ya tiene que quedar oculto para siempre.

Vuelvo a actualizar, porque ninguna de las 2 soluciones que he escrito me ha funcionado del todo, así que he buscado en el código html feed-links y he borrado el div entero. Problema resuelto.

Cambiar la firma "Con la tecnología de blogger" por una personalizada

¿Sabéis que podéis quitar la firma que viene por defecto?


Si, si, se puede quitar "Con la tecnología de blogger" y poner una tuya. Esto lo aprendí del blog Personalización de blogs. viene muy bien explicado, así que haré aquí sólo un breve resumen.

Tenemos que irnos a HTML.

Plantilla ---> Editar HTML

Y buscamos lo siguiente:

<!-- outside of the include in order to lock Attribution widget -->
      <b:section class='foot' id='footer-3' showaddelement='yes'>
        <b:widget id='Attribution1' locked='false' title='' type='Attribution'>


Tenemos que sustituir lo que he subrayado de amarillo por lo que viene, y guardamos.

Ahora vamos al gadget en cuestión.

Diseño ---> Reconocimiento

Y ya nos dará la opción de eliminar, así que lo eliminamos.

Ahora ya podemos crear uno personalizado, para ello tenemos que crear un nuevo gadget HTML y escribir en el contenido lo que queramos poner en código HTML, muy importante.

Con esto podemos colocar imágenes, texto, y lo que queramos, siempre y cuando sepamos escribirlo en HTML.


Yo lo he dejado así, le he puesto el nombre de mi blog en negrita, centrado y con la letra de color.

sábado, 1 de marzo de 2014

¿Cómo poner un botón de subir arriba?

El botón de subir que aparece abajo en la derecha en muchas páginas es muy sencillo de colocar y muy útil.

El diseño de cada uno ya tiene que salir de vuestra imaginación. :) Y el tamaño ideal son unos 100-150px.

Para crear este botón se hace mediante un gadget.

Diseño ---> Añadir un gadget ---> HTML

Y en el cuadro de contenido deberéis escribir esto:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="URL de tu imagen" /></a>

Cuando diseñéis la imagen, la tenéis que subir en vuestro servidor y copiar esa url y pegarla en la parte que he subrayado.


Con esto ya tendréis vuestro propio botón de subir arriba.

Personalizar la barra de páginas

La plantilla de blogger ya nos permite personalizar bastante nuestro blog. Concretamente, en cuanto a la barra de páginas podemos cambiar el tipo de letra, el color de la letra y el del fondo.

Plantilla ---> Personalizar ---> Avanzado

Esto es lo que yo he conseguido con las opciones que nos da blogger.



No está mal, pero podemos añadir algunos detalles más para que nos quede más bonito.

Centrar las páginas

Viene muy bien explicado en el blog Personalización de blogs, pero haré aquí un resumen.

Hay que ir al CSS.

Plantilla ---> Personalizar ---> Avanzado ---> Añadir CSS

Y escribir lo siguiente:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Ahora damos a Aplicar al blog, y con esto se nos quedan las páginas centradas.



Sencillo, ¿a qué sí? Pero yo las dejaré a la izquierda porque veo que quedan mejor.

Eliminar las líneas entre páginas

Si os fijáis, entre las distintas páginas hay una línea que parece imposible de quitar.


Pues vamos a ver cómo podemos quitar esas líneas, viene muy bien explicado en el blog El perro de papel, pero aquí tenéis un resumen.

Para ello nos tenemos que ir a Plantillas ---> Editar HTML.

Y buscamos la parte en la que sale esto: /* Tabs

Más abajo tienes que encontrar esto:

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-left: 0px solid #ffffff; /* Borde izquierdo de la celda */
border-right: 0px solid #dddddd; /* Borde derecho de la celda */
}

La parte subrayada es la que tienes que sustituir por la que aparece por defecto en la plantilla para que desaparezcan esas líneas.


Y voliá! líneas fuera.

Estas son los detalles más importantes que todos necesitamos saber, se pueden hacer muchas cosas más, pero eso lo podéis hacer siguiendo este tutorial de El perro de papel, que viene todo muy bien explicado. ;)

Diseñar la portada del blog

Para saber el tamaño de la portada tenemos que ir a:

Diseño ---> Cabecera

Y abajo nos dice el ancho que tiene nuestra cabecera.

Preparamos un diseño personalizado con esas medidas, y cuando vayamos a subir la imagen en el gadget tenemos que clicar en "En lugar del título y la descripción" y en "Reducir hasta ajustar".

De esta manera os quedará bien centrado y con el tamaño adecuado.




¿Cómo crear un blog en blogger?

Lo primero que tienes que hacer es entrar en la página de blogger:


Y lo primero que te pedirá es tener una cuenta de gmail, si no la tienes, te la creas y una vez hecha ya podrás crearte un blog, que estará asociado a esa cuenta de gmail.

Arriba a la izquierda está la opción de "Nuevo blog", pinchas y te sale este cuadro:


Lo más importante es tener bien clara la dirección que vas a querer, puesto que es la dirección por la que te buscarán los seguidores y no se puede cambiar.
Comprueba si está disponible la dirección deseada, pones un título (que después podrás cambiar, si quieres) y en cuanto a plantilla, recomiendo escoger la simple y "tunearla" al gusto, porque si coges otra plantilla después te puede dar algunos problemas a la hora de querer incorporar elementos para tu blog.

Se le da a "Crear blog" y ya tendrás listo tu primer blog.

Blogging tips