Cómo crear un buen blog

Mostrando entradas con la etiqueta blogger. Mostrar todas las entradas

lunes, 30 de noviembre de 2020

Cómo poner un Pie de Foto

Empecemos aclarando lo que es un pie de foto aunque si has llegado hasta aquí imagino que ya lo sabrás.
Un pie de foto es un breve texto que suele ir bajo la imagen y que describe o añade información a la misma.
Blogger incorpora esta función aunque he de admitir que está muy escondida.

Cómo poner un Pie de Foto en Blogger

Paso 1:
Sube la foto como harías normalmente. Una vez que esté subida pasa al modo Vista de redacción y pulsa sobre la foto.
Te saldrán una serie de opciones. Una de ellas es "Mostrar u ocultar Títulos". Púlsala y te saldrá un cuadro de texto bajo la foto para que escribas lo que quieras.

Resultado:

Soy el pie de página de un lindo gatito

Una vez completado este paso puedes volver a escribir en modo código, si lo deseas.

He de admitir que tengo el vago subido así que te paso esta web por si quieres crear un pie de foto con más estilo: Pie de foto sobre la imagen

Cómo añadir una tabla de contenido en blog blogspot de Blogger

A veces escribimos entradas larguísimas y complicadas llenas de encabezados y subcabezados o listas y tenemos la sensación de que el lector que acabe en ella no se va a enterar del orden de lo que intentamos explicar.

Para eso se han inventado las tablas de contenido; para que el lector pueda ver a simple vista un esquema del contenido de la entrada.

Aquí tenemos un tutorial de cómo crear una tabla de contenido en nuestro blog:

Tabla manual de contenido

A través de HTML y CSS podremos crear una tabla de contenido para tu blog blogspot de la plataforma Blogger.

Paso 1:

Escribe el siguiente código en tu entrada o página:

 

<div id="toc" class="mb-toc">

<h2>Table Of Contents</h2>

<ul>

<li><a href="#headingid1">1. Your heading text </a></li>

<li><a href="#headingid2">2. Your heading text</a></li>

<li><a href="#headingid3">3. Your heading text</a></li>

<li><a href="#headingid4">4. Your heading text</a></li>

<li><a href="#headingid5">5. Your heading text</a></li>

</ul>

</div>

Cuando escribas la entrada añade un id="#headingid1" o id="#headingid2"... según corresponda y el usuario podrá hacer clic en la tabla de contenido y ser redireccionado a ese apartado.

Ejemplo:

 

<div id="toc" class="mb-toc">

<h2>Ejemplo de la tabla manual de contenido</h2>

<ul>

<li><a href="#headingid1">1. Tabla manual de contenido </a></li>

<li><a href="#headingid2">2. Tabla automática de contenidot</a></li>

</ul>

</div>

<h2 id="#headingid1">Tabla manual de contenido</h2>

A través de HTML y CSS podremos crear una tabla de contenido para tu blog blogspot de la plataforma Blogger.

<h2 id="#headingid2">Tabla automática de contenido</h2>

Aquí iría texto sobre el tutorial...

Resultado:

Tabla manual de contenido

A través de HTML y CSS podremos crear una tabla de contenido para tu blog blogspot de la plataforma Blogger.

Tabla automática de contenido

Aquí iría texto sobre el tutorial...

Pasemos ahora a darle estilo a la tabla.

Paso 2:

Ahora tienes que agregar el código CSS a tu plantilla:

Ve al Dashboard > Diseño > Diseñador de temas

En la opción Avanzado elige en el menú desplegable: Añadir CSS

 
/* Starting of TOC Css Codes */
.mb-toc {
    border: 2px solid #ddd;
    background: #ececec;
    padding: 5px 20px 20px;
    margin: 40px 0;
    font-size: 18px;
    overflow: hidden;
    border-radius: 5px;
}

.mb-toc h2 {
    margin: 10px 20px;
    font-size: 30px;
}

.mb-toc ul {
    margin: 0;
    list-style: none;
    float: left;
    width: 100%;
}

.mb-toc ul ul li a {
    padding-left: 45px;
}

.mb-toc ul ul li {
    background: none;
}

.mb-toc li {
    list-style-type: none;
    position: relative;
    margin: 0;
    cursor: pointer;
    background: #f7f7f7;
    float: left;
    width: 100%;
}

.mb-toc li:nth-child(odd) {
    background: #fff !important;
    overflow: hidden;
    clear: both;
}

.mb-toc li:nth-child(odd) li:nth-child(odd) {
    background: none;
}

.mb-toc li:nth-child(even) {
    background: #f7f7f7 !important;
    overflow: hidden;
    clear: both;
}

.mb-toc li:nth-child(even) li:nth-child(odd) {
    background: none;
}

.mb-toc ul>li:hover>a {
    background: #fffcd1;
}

.mb-toc li a {
    color: inherit;
    padding: 8px 0 8px 25px;
    float: left;
    border-bottom: 1px solid #ddd;
    width: 100%;
	text-decoration: none;
}
/* Ending of TOC css Code */

¡Y eso es todo! Ya, si quieres, puedes modificar el CSS y ponerlo a tu gusto.

Tabla automática de contenido

Existe la opción de utilizar un código que genere de forma automática la tabla de contenido recogiendo todos los h2 de la entrada.

Paso 1:

Blogger Dashboard >> Tema >> Editar Html

Busca </head> y justo antes pega el siguiente código:


<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC plugin by MyBloggerTricks.com
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>

Paso 2:

Busca ]]</b:skin> y justo encima pega el siguiente código CSS:


.mbtTOC{
        border:5px solid #f7f0b8;
        box-shadow:1px 1px 0 #EDE396;
        background-color:#FFFFE0;
        color:#707037;
        line-height:1.4em;
        margin:30px auto;
        padding:20px 30px 20px 10px;
        font-family:oswald, arial;
        display: block;
         width: 70%;
        } 
		
.mbtTOC ol,.mbtTOC ul {
        margin:0;
        padding:0;
                      } 
					  
.mbtTOC ul {
        list-style:none;
           }   
		   
.mbtTOC ol li,.mbtTOC ul li {
        padding:15px 0 0;
        margin:0 0 0 30px;
        font-size:15px;
                            } 
          
.mbtTOC a{
        color:#0080ff;
        text-decoration:none;
          } 
          
.mbtTOC a:hover{
        text-decoration:underline; 
              }

        
.mbtTOC button{
        background:#FFFFE0;
        font-family:oswald, arial; 
        font-size:20px;position:relative; 
        outline:none;
        cursor:pointer; 
        border:none; 
        color:#707037;
        padding:0 0 0 15px;
               }  
			   
.mbtTOC button:after{
        content: "\f0dc"; 
        font-family:FontAwesome; 
        position:relative; 
        left:10px; 
        font-size:20px;
                    }

Paso 3:

Busca el código: <data:post.body/> y reemplázalo por:

<div id="post-toc"><data:post.body/></div>

Hazlo con todos los resultados que salgan.

Paso 4:

En la entrada que vayas a escribir pega al inicio:


<div class="mbtTOC">

<button onclick="mbtToggle()">Contents</button>

<ol id="mbtTOC"></ol>

</div>

Y pega este código justo al final de la entrada:


<script>mbtTOC();</script>

Si todo ha ido bien la tabla de contenido (table of content, TOC) se creará automáticamente al inicio de la entrada donde hayas indicado.

Espero que te haya sido de ayuda.

Fuente: https://mastertheseo.com/table-of-content-for-blogger/

martes, 31 de mayo de 2016

Borrar etiquetas en Blogger

Entrada actualizada en:Editar, crear y borrar etiquetas Blogger en blog Blogspot

Las etiquetas o labels de un blog sirven para categorizar la entrada. Es decir, ayudan a dividir tus entradas en diferentes categorías según su temática e importancia.
A veces, se da la ocasión en la que queremos borrar una etiqueta.

¿Cómo borrar etiquetas en Blogger?

Pues es sencillo, para eliminar etiquetas tienes que hacer que esa etiqueta no esté asociada a ninguna entrada.
Sigue los siguientes pasos:
- Loguéate en tu cuenta Blogger

- Selecciona el blog en el que quieres borrar la etiqueta

- Ve a "Entradas" o posts

- Busca los posts en los que se encuentra la etiqueta que quieres eliminar y selecciónalos

- Haz clic en el icono arriba a la derecha y selecciona el tag que quieres eliminar:

- después selecciona el icono etiquetas y elige de nuevo el nombre de la etiqueta que quieres borrar.

Hecho, ya has desasociado esa etiqueta de todas las entradas y, por tanto, se ha borrado todo rastro de dicha etiqueta.

Borrar todas las etiquetas usando HTML

Para borrar todas las etiquetas existentes de tu blog permanentemente y no volver a mostrar ninguna otra, puedes eliminar el siguiente código (antes haz una copia de seguridad de tu plantilla).
Puntualizo que esto hace que no te muestre más etiquetas aunque luego añadas otras nuevas que sí quieres.
Vamos, que no lo veo muy útil así que no lo recomiendo.
- Ve a tu Dashboard y dirígente a Plantilla (Template)
- Haz una copia de seguridad de la plantilla
- Haz clic en Editar HTML
- Pincha sobre cualquier punto del código que aparece y presiona Ctrl + F: Busca el siguiente código


 
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a> 
            <b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>

Para esconder todas las etiquetas:

Busca en tu plantilla </head>(recuerda haz una copia de seguridad siempre que modifiques la plantilla).
Pega justo antes de ]]&gt</b:skin> el siguiente código:


 
.post-labels {
    height: 0px;
    visibility: hidden;
    display: none;
}

¿Existe peligro al borrar un tag?

Depende de lo que indexe GoogleBot de tu web.
Si Google no tiene indexadas tus etiquetas, el borrarlas no tendrá ningún efecto en la Búsqueda de Google.
En caso contrario, puede ser que al borrar la etiqueta se rompan enlaces externos y de error 404 Not Found a quien intente entrar por esa etiqueta.

viernes, 9 de octubre de 2015

7 elementos para borrar de tu plantilla Blogger y cómo hacerlo

A continuación os explico cómo eliminar 7 elementos de tu plantilla web que suelen estropear el diseño de la página.

1. Elimina la barra de navegación: navbar

Empezamos con el más tonto de todos. No hay ningún agujero de seguridad ni ninguna razón de peso por la que eliminar la barra de navegación de Blogger sólo es por mera estética.
Sigue estos pasos para borrarla:

Ve a la página principal de Blogger y selecciona la pestaña "Diseño". En uno de los elementos (gadgets) del diseño de tu web verás la opción "Barra de navegación" o "navbar" haz clic en "Editar" y selecciona "NO". Después, guarda los cambios.

En el caso de que no quieras borrarla, puedes cambiar el color de la barra de navegación navbar siguiendo esos mismos pasos.

2. Elimina elementos del footer de la entrada.

En el footer o pie de página de la entrada de tu blog, blogger añade un montón de cosas innecesarias como el autor, fecha de publicación...
Puedes eliminar cualquiera de esos elementos de la siguiente manera:

Ve a la página principal de blogger y pincha en la pestaña "Diseño" ahí encontrarás un elemento (gadget) llamado "Entradas del blog".
Haz clic en editar y se abrirá una ventana emergente en la que podrás eliminar o configurar los elementos de pie de página de las entradas de tu blog.

3. Elimina el mensaje "Mostrando entradas con la etiqueta x"

Este mensaje aparece en la página que se carga tras pulsar una etiqueta en concreto de tu blog.
Es feo de narices así que puedes borrarlo de la siguiente manera:
Ve a "Plantilla" presiona "Editar HTML". Haz clic en cualquier sitio del código y pulsa Ctrl + F para abrir la caja de búsqueda.
Busca el siguiente código:


<b:includable id='status-message'>

Cuando lo encuentres pulsa la flecha pequeña a su izquierda y borra todo este código:


 <b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>

en su lugar, pega el siguiente código:


<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

4. Borra los bordes blancos alrededor de las imágenes.

Es cuestión de gustos pero si deseas eliminar los bordes blancos de las imágenes tendrás que editar el código CSS de tu plantilla
Ve al Dashboard o página principal de Blogger y pulsa sobre la etiqueta "Plantilla" y presiona "Personalizar" después elige "Avanzado" y busca la opción "Añadir CSS".

Ahí pega el siguiente código:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

5. Elimina la línea discontinua sobre "powered by Blogger" y entre Entradas nuevas, home, entradas viejas.

Sigue los pasos del punto 4 para editar código CSS pero añade este código:


.footer-outer {
border: none;
}

.blog-pager {
background: none;
}

6. Elimina el mensaje "Suscribirse a entradas Atom" que se encuentra al final de la página.

Ve a "Plantilla" presiona "Editar HTML". Busca y borra la siguiente línea de código:


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

7. Elimina comentarios en las páginas About y Contacto.

Normalmente no se quieren comentarios en estas páginas así que eliminaremos la opción de comentar en ellas.
Ve a "Páginas" y haz clic en la página en cuestión. En el menú de la derecha pulsa "Opciones" y en la sección "Comentarios" haz clic sobre "No permitir, ocultar los publicados"

martes, 12 de mayo de 2015

Cómo agregar Google Analytics en Blogger

A más de uno nos mata la curiosidad por saber si alguien visita nuestra web, de dónde viene, si usa móvil, tablet o pc y cuánto tiempo está en la página...

Es cierto que existen unas estadísticas de Blogger que son fiables pero entonces, ¿por qué usar Analytics en lugar de las analíticas de Blogger?
Porque son superficiales, muy poco completas y, parece que tienes más visitas de las que en realidad tienes porque cada página vista cuenta como un visitante (la verdad es que tus páginas vistas no son tus visitas, lo siento).

Afortunadamente podemos abrir una cuenta con Google Analytics y crear un código de seguimiento que pegaremos en nuestra web y todos nuestros deseos de cotillear al visitante, se cumplirán.
(Otra de las opciones que tenemos es crear una cuenta de Google WebMasters pero eso lo trataremos en otro post).

Para comenzar, crea tu cuenta, rellena los datos que el Sr. Google te solicite (no son muchos):
Completa los campos necesarios debajo de los títulos "Configuración de la propiedad web" y "Configuración de cuenta". En este paso es donde debes introducir información relacionada con tu sitio web, como el nombre y el URL del sitio.

Pincha la opción "Obtener ID de seguimiento". Aceptas condiciones de uso para continuar.
Obtendrás el código o ID que necesitarás pegar en tu sitio web y será algo así:


       
 
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-30000000-2', 'tuweb.es');
  ga('send', 'pageview');
 
</script>

Ahora qué hacemos con el código

Hay varias formas de implementar el código de seguimiento de Google Analytics en tu blog Blogger.

Una de ellas es ir a "Plantilla" > "Editar HTML".
Pincha sobre el código y presiona Ctrl+F
Busca </head>
Pega justo encima de el código de seguimiento,

</body>

A continuación, pulsa "Guardar Plantilla"

Otra opción menos rigurosa:

Ve a tu blog, a la pantalla de "Diseño".
Pulsa la opción "Añadir un Gadget".
Busca el que pone "HTML JavaScript".
Pega el código de seguimiento.

Por último, confirma que el código insertado corresponde con tu ID:
Ve a tu blog "Configuración" > "Otros" y en el cuadro donde pone Google Analytics
ID de propiedad web de Google Analytics pega tu ID.

Comprobación

Ahora ve a tu cuenta de Analytics, a la pestaña Administrador, selecciona la Propiedad que has creado y pincha en Información de Seguimiento y a continuación, pincha en Código de seguimiento.
Ahí podrás ver el estado de tu ID: "Estado: recibiendo datos" o "Estado: seguimiento no instalado".

Atención, ya sé que además de curiosos somos impacientes, pero, me temo que el código de seguimiento tarda unas horas (hasta 48 horas) en empezar a funcionar. Hasta entonces verás "Estado: seguimiento no instalado" y no se tratará de un error.
Paciencia, si en 24-48 horas, la cosa sigue sin rular y continúa el famoso mensaje "Estado: seguimiento no instalado", deberás intentar solucionar el error. Más abajo explico cómo hacerlo con una extensión de Google Chrome.

Comprobar que todo está correcto con Chrome

Si navegas en Chrome, puedes descargar la Extensión "Tag Assistant". Una vez instalada, reinicia el navegador y mira el icono que aparece.
Si la etiqueta está de otro color que no sea verde (rojo, azul...), es que ha habido algún problema.

En cambio, si el dibujo sale en verde, estás de enhorabuena, todo funciona correctamente.

Una lista de errores típicos sería:

✔ No tienes el código de Google Analytics en tu Web.
✔ El código de Analytics está duplicado
✔ El código de Analytics está fuera de la etiqueta ()
✔ Tienes 2 versiones de Google Analytics instaladas

Otra información sobre Analytics

Si quieres añadir más blogs a tu cuenta de Analytics deberás entender un poco del funcionamiento o JERARQUÍA:

Cuenta: Es el nivel más alto de la organización. Ejemplo: puedes tener varias cuentas; una de uso personal y otra cuenta para uso profesional.
Propiedad: Puede ser un sitio web, un blog o una aplicación móvil. Puedes tener varias propiedades (blogs) dentro de un mismo nivel de cuenta (Máximo de 100 webs).
Vista: Es el punto de acceso a los informes. Es muy recomendable dejar la vista creada por defecto a modo de copia de seguridad y crear otra como "Vista de trabajo" para comenzar a trabajar.

¿No recuerdas dónde se encuentra tu código de seguimiento de Analytics?

Entra en Google Analytics y pulsa sobre "Administrador" ve a "PROPIEDAD". Haz click sobre "INFORMACIÓN DE SEGUIMIENTO" y después sobre "CÓDIGO DE SEGUIMIENTO".

Todo lo que está dentro de las etiquetas es el código de seguimiento de Google Analytics.

¡Eso es todo!
Por último, si tu blog es nuevo, no te recomiendo que mires con frecuencia las estadísticas o te deprimirás mogollón. De primeras, confórmate con saber que están ahí y concéntrate en escribir y dar a conocer tu blog.
¡Suerte!

sábado, 25 de abril de 2015

¿Qué son los gadgets o Widget de Blogger y cuáles son los mejores?

Hasta ahora hemos empleado con regularidad una palabra para muchos desconocida: gadget o Widget.

¿Pero qué son los gadgets?

Se podría decir que los Gadgets son una serie de complementos que puedes añadir a secciones concretas del blog para realizar una función específica. Entre sus objetivos están los de dar fácil acceso a funciones frecuentemente usadas y proveer de información visual.

Pros:
✔ Puedes añadir código sin modificar la plantilla.
✔ Puedes agregar contenido sin saber de código.

Contras:
✔ Muchos gadgets pueden ralentizar la velocidad carga del blog.
✔ También puede quedar recargado y quizá anti-estético (según temática y a quién va dirigido el blog).

A lo largo de esta serie de tutoriales hemos usado gadgets (o widgets) para editar el "Diseño" como poner una imagen al título, favicon, pie de página...

Sin embargo, puedes hacer más, muucho más (y colocarlos en el sidebar, la barras a los lados de la entrada, o prácticamente donde desees).

¿Cómo se usan?

Antes que nada, vas al panel de control "Diseño" y eliges dónde quieres colocar el gadget. En este ejemplo lo colocaremos en el sidebar o barra lateral del blog:
Pulsamos sobre "Añadir Gadget"

Se abrirá una ventana con una serie de Gadgets Básicos a elegir.

¿Cuál uso?

Personalmente recomiendo los siguientes:
✔ Traductor: para aquellos que quieran cambiar el idioma del blog.
✔ Seguir por correo electrónico: Para que se envíe un mail avisando de entrada nueva a las personas que así lo elijan.
✔ Entradas populares: Muestra un listado con tus entradas más populares ampliando así la posibilidad de que sean vistas por un nuevo visitante.
✔ Adsense: si tu blog tiene una serie de visitas al mes y quieres rentabilizarlas.
✔ Cuadro de búsqueda: para facilitar la búsqueda de contenido dentro del blog
✔ HTML/Javascript: para agregar código personal como por ejemplo código de seguimiento de analíticas, tus iconos sociales, posts relacionados...
✔ Archivo del blog: muestra tu actividad de forma cronológica. Tus usuarios pueden ver rápidamente tus épocas de mayor actividad y el título de las entradas.

Elige los que más te gusten y agrégalos a tu blog (no es necesario que agreges todos estos gadgets; sólo he puesto los que recomiendo).

viernes, 13 de febrero de 2015

Cambiar Pie de Página (Footer) en Blogger

Tener un blog es para muchos un medio para un pequeño negocio o aumentar tu presencia pública; captar nuevos clientes y comunicarte con ellos.
Tanto si este es tu caso como si no, Blogger permite customizar o personalizar tu blog para que puedas expresar con él lo máximo posible con un sólo golpe de vista.
Por eso es importante que cuides hasta el último detalle y, precisamente el último que ve el visitante, es el footer o pie de página.

¿Qué es el footer o pie de página?

Es la parte donde la página llega a su fin que suele usarse para mostrar información adicional como año de creación, avisos legales, correo de contacto...

Ejemplo para página seria:

Ejemplo para página original:

Ejemplo término medio:

¿Cómo personalizo el pie de página?

Accede al panel de control de Blogger, a la sección "Diseño" y haz clic en Editar "Reconocimiento":

Se abrirá una ventana emergente donde puedes escribir tu nombre de autor, fecha, email, etc:

(No olvides pulsar "Guardar" para conservar los cambios realizados).

Puedes agregar hasta 3 columnas al pie de la página a través de "Plantilla", "Personalizar", "Diseño": Diseño de pie de página:

(¡Pulsa "Aplicar los cambios" para que se guarden!)

Tu plantilla se verá así en el panel principal de Blogger, en "Diseño":

Y podrás agregarle los gadgets que consideres apropiados (Enlaces de interés, archivo del blog, una imagen...)

En tutoriales más avanzados, cuando hayamos visto algo de programación HTML básica, nos centraremos en aspectos más concretos como ¿Cómo elimino, oculto o cambio el footer por un diseño mejor?

viernes, 23 de enero de 2015

Modificar el pie de entrada del blog Blogger

¿Te gustaría quitar el "Publicado por" o cambiarlo por otra frase?
¿No te interesa que salga la fecha de publicación de las entradas?
¿No te gusta que salgan las etiquetas?
Pues todo esto y más, tiene solución:
Los elementos del pie de entrada pueden ser modificados a través del panel de "Diseño" de blogger, sin necesidad de utilizar código HTML o PHP de diseño.

A través de esta sección, puedes cambiar rápidamente los elementos de pie de entrada:

Opciones de la página principal
✔ Número de entradas en la página principal:
✔ Texto del enlace de la página de entrada:

Opciones de la página de entrada
✔ Cambiar formato de Fecha
✔ Cambiar el texto en "Publicado por"
✔ Cambiar el texto "en" y formato de hora
✔ Cambiar el texto en x "comentarios"
✔ Mostrar u ocultar las etiquetas
✔ Mostrar u ocultar "edición rápida" (hará que no se muestre el icono del lápiz)
✔ Mostrar u ocultar botones para compartir
✔ Mostrar u ocultar anuncios
...
Sólo tienes que desmarcar las opciones que no quieras mostrar.

También podrás recolocar los elementos y decidir en qué orden serán mostrados.

sábado, 13 de diciembre de 2014

Entradas y Páginas qué son y cómo se usan en Blogger

Un blog tiene la finalidad de archivar el contenido que publicas tanto por orden periódico como de forma organizada expresamente por ti.
Existen dos formas principales de organización de los elementos de un blog a la hora de publicar en él:
✔ Las entradas.
✔ Las páginas.

¿Qué son las Entradas blog?

Las entradas son las publicaciones que se realizan de forma periódica; una aportación al blog.
Los blogs se componen de varias entradas que se archivan cronológicamente según el año, mes y día en que las publicas (la fecha se asigna automáticamente) y también, según la categoría que les asignes.

Las entradas se pueden guardar como borrador pendiente de revisión (mientras se termina de escribir) y también se pueden publicar definitivamente.

Una vez que alcanzas un número de posts o entradas en la portada del blog, se añade una página dinámica nueva (Paginación) donde se seguirán publicando tus próximas entradas de forma secuencial. En futuras entradas explicaremos el término Paginación con más detenimiento.

¿Qué son las Páginas de un blog?

Las Páginas son secciones web que alojan contenido estático. El contenido que colocas en tus Páginas no se mueve o cambia a menos que tú, manualmente, lo edites y lo cambies. No se ordenan cronológicamente sino como tú decidas.
Se suelen usar para almacenar contenido importante que no quieres publicar en entradas por temor a que se pierda a lo largo de años en el blog.

Por ejemplo:
- Un músico podría publicar las siguientes páginas:
Discografía, biografía, contacto, vídeos musicales, audio...
- Un fotógrafo: galería (fotobook), vídeo (videobook), sobre mí, contratación...
- Un productor de vídeo: galería (fotobook), vídeo reel, vídeo (videobook), making of, acerca de, contratación...

A la sección páginas se accede haciendo clic en el menú principal Blogger:

Pulsando sobre "Página nueva" te mostrará dos opciones:

Página blanco: Es un editor de páginas muy parecido al de entradas. En él puedes añadir la información que desees.

Por ejemplo:
Si eres una manitas y te encantaría mostrar una galería de tus bolillos, podrías crear una página llamada "Fotos bolillos" y en ella mostrar todas tus obras como si de una galería se tratase.

Dirección Web:
En esta opción añadirías una dirección web que enlace a otro sitio externo (una tienda online, Pinterest) o interno (alguna entrada en concreto, un resultado de una búsqueda...)

¿Dónde aparecen las páginas?

Puedes mostrar (u ocultar) las páginas estáticas desde la siguiente opción:

Como veis, las páginas pueden ser mostradas como un menú horizontal bajo el título del blog o en la barra lateral del blog como si fueran enlaces.

Una vez creadas veremos lo siguiente en el panel Páginas:

y en el blog:

Si has dado a mostrar páginas, todas ellas aparecerán en el lugar que le has indicado pero quizá no quieras enseñar una de ellas. Quizá simplemente deseas cambiar el orden en el que se muestran.
En cualquier caso, ve a "Diseño", al gadget "Páginas" y pulsa "Editar":

Una ventana emergente te mostrará las páginas actuales para que las arrastres hasta tener el orden correcto y tendrás la opción de deseleccionar las páginas que no deseas que aparezcan en el menú. Pulsa Guardar para conservar los cambios realizados.

Por tanto existen notables diferencias entre entradas y páginas pero su uso depende de la organización que desees para tu blog.

lunes, 28 de abril de 2014

Qué es y cómo subir una cabecera blogger

Cuando empezamos un blog, solemos querer personalizarlo rápidamente y, a veces, tendemos a sobrecargarlo y equivocarnos con el mensaje que transmite el diseño.

Uno de los aspectos a cuidar es la cabecera del blog tanto colores (procurando que sea una paleta armónica), como la fuente, diseño, mensaje...
Puede ser cuestión de gustos pero es merecedor de tener en cuenta.
Vayamos por partes:

¿Qué es la cabecera del blog?

La cabecera del blog es una imagen alargada que suele representar el blog con alguna fotografía, dibujo o texto. Según la temática del blog, nos inclinaremos por una o varias de las opciones.

Sigue Leyendo la Entrada » »

martes, 25 de marzo de 2014

Favicon ¿Qué es y cómo lo creo?

En el Panel principal de Blogger, podemos añadir, suprimir y editar gadgets del blog con sólo pulsar un par de botones y arrastrar.
En él, encontraremos un pequeño cuadro que dice Favicon:

¿Qué es un Favicon?

Favicon viene del inglés: favorites icon y se trata de una pequeñísima imagen (icono) por la que se asocia un página y así puedes identificarla fácilmente de entre un conjunto de pestañas abiertas o tu barra de marcadores o favoritos, historial, lector de noticias...

Parece un detalle de lo más insignificante indigno de tener en cuenta pero no, todo lo contrario; si tu blog posee un favicon, estás haciéndolo resaltar de cientos que tienen la B de Blogger y, por tanto, atraerá la atención del lector.

En el antiguo Blogger, para tener un favicon propio en tu blog, debías tener una imagen .ico y agregarla modificando el código a través de Html pero, en la actualidad, se puede realizar de manera mucho más sencilla.

¿Cómo crear un favicon?

Existen multitud de sitios donde puedes realizar esta operación online.

Por ejemplo:
- http://www.shaheeilyas.com/favicon/
- http://favicon-generator.org/editor/
- http://www.favicon.cc/

Nosotros usaremos este último como ejemplo para dibujar el favicon online:

Una vez terminado el dibujo que usaremos como favicon, pulsa "Download Favicon" y se guardará en tu disco duro como archivo "favicon.ico"

Si no deseas hacerlo a través de un editor online, puedes crearlo a través de un editor de imágenes que te permita guardar con fondo transparente (Photoshop, Gimp...).
En ese caso, tendrás que tener en cuenta que el tamaño recomendado del favicon es de 16x16 píxeles aunque también puede ser de 64x64 ó 32x32. Tendrás que guardarlo con extensión .ico, .png o .gif (si deseas que el favicon sea animado).

Ya está creado, ¿ahora qué?

¿Cómo lo subes a tu página?
Ahora vamos al Panel de Control de Blogger y pulsamos en el gadget "Favicon", "Editar".
Se abrirá una ventana emergente.

Hacemos clic en "Seleccionar archivo", buscamos en la carpeta de descarga el "favicon.ico", lo seleccionamos y, por último, pulsamos "Guardar".

Podremos comprobar que todo está correcto porque el favicon se mostrará en el Gadget Favicon.

Resumen:
Dónde crear un Favicon: programa (Gimp, Photoshop), o editor online.
Cómo: transparente, imagen fija o animada
Tamaño: 16x16, 32x32, 64x64
Extensión: .ico, .png, .gif

PUEDES DESCARGARTE EL TUTORIAL COMPLETO EN PDF SOBRE FAVICON AQUÍ: DESCARGAR

(Con imágenes en alta resolución)
Y para más información sobre programas y webs online para crear un favicon y cómo implementarlo en tu web visita esta entrada: Formas de crear un favicon