Cuando escribimos un post nos gusta que nuestros lectores se hagan eco del mismo, que lo compartan en redes sociales...etc. Pero, ¿y si queremos destacar una frase para que sea compartida en Twitter? La red del pajarito azul es un buen escaparate para difundir lo que escribimos. Además, generar tweets de determinadas partes del post ayuda a potenciar los contenidos y el llamado personal branding, que no es otra cosa que la marca personal.

Hay herramientas que se prestan a esta labor, como ClickToTweet, pero aquí vamos a explicar una forma sencilla de generar tuits personalizados en las entradas del blog. Tan solo hay que copiar este código en el post, en donde queramos que aparezca la frase para tuitear. El ejemplo incluye los atributos fieldset y legend para definir el tweet en su conjunto.

Importante en referencia a lo marcado en rojo:

  • El hastag de Twitter (#) se escribe en código HTML de esta forma: %23 
  • En "ESTO ES UN EJEMPLO DE #TUIT" hay que editarlo y poner la frase que queremos que se tuitee (3 veces).
  • En "NOMBRE De USUARIO" poner nuestro nombre de usuario en Twitter (2 veces).
  • En "ENLACE DE LA ENTRADA" ponemos la url del post que queramos que se comparta en el tuit (2 veces).  Si no queremos enlace en el tuit, simplemente no lo ponemos, dejamos ENLACE DE LA ENTRADA.

<fieldset>
<legend align="center"><img scale="0" src="https://lh3.googleusercontent.com/-bqtdyTHGd88/VePMwtNFzwI/AAAAAAAAQYA/wmBomWFWT3Q/s256-Ic42/tweet-this.png" width="40" /></legend>
<br />
<div class="tm-ctt-text">
<h2>
<span style="color: grey; font-family: Neucha;">ESTO ES UN EJEMPLO DE #TUIT.</span></h2>
</div>
<a class="tm-ctt-btn" href="https://twitter.com/share?text=ESTO ES UN EJEMPLO DE %23TUIT.%20v%C3%ADa%20@NOMBRE USUARIO&amp;url=ENLACE DE LA ENTRADA" target="_blank"></a><br />
<div style="text-align: right;">
<a class="tm-ctt-btn" href="https://twitter.com/share?text=
ESTO ES UN EJEMPLO DE %23TUIT.%20v%C3%ADa%20@NOMBRE USUARIO&amp;url=ENLACE DE LA ENTRADA" target="_blank">Click To Tweet</a></div>
</fieldset>

Un ejemplo aplicando todo lo anterior sería este (se ve mejor en esta entrada):


#50SombrasDeGrey, ese libro que empecé leyendo con desidia... y me lo acabé en un santiamén.


Google, como dueño y señor de Blogger, es el que manda, y desde ahora hay que cumplir su política de cookies. Con este truco podemos personalizar el mensaje de aviso y aceptación de los cookies. No se recomienda quitarlo ya que es una obligación que debemos cumplir.

  • Ubicación: plantilla.

Buscar esta línea 

/* Header
----------------------------------------------- */

...y justo debajo pegar este bloque: 

#cookieChoiceInfo {
top: auto !important;
bottom: 0px !important;
background-color: #000000 !important;
color: #E9EBEB !important;
font: normal normal 14px 'Sue Ellen Francisco', cursive !important;
text-align: center !important;
text-transform: uppercase !important;
line-height: 10% !important;
}

Se puede personalizar a razón de...
  1. color de fondo (BACKGROUND-COLOR)
  2. color del texto (COLOR)
  3. tamaño y tipo de fuente (FONT)
  4. ubicación del texto (TEXT-ALIGN)
  5. cambiar de mayúsculas a minúsculas (TEXT-TRANSFORM), que en este caso habría que poner lowercase
  6. espacio entre líneas (LINE-HEIGHT)
Las líneas top: auto !important y bottom: 0px !important indican que el aviso aparecerá en el footer del blog. El ejemplo quedaría así:

Clic para ver a tamaño natural

PERSONALIZAR EL MENSAJE DE COOKIES


Blogger por defecto pone este mensaje en el aviso:

Este sitio emplea cookies de Google para prestar sus servicios, para personalizar anuncios y para analizar el tráfico. Google recibe información sobre tu uso de este sitio web. Si utilizas este sitio web, se sobreentiende que aceptas el uso de cookies.

Si queremos personalizarlo hay que seguir este paso:

Antes de </head> pegar este bloque: 

<script>
cookieOptions = {msg: &quot;Este sitio emplea cookies de Google. Si continuas navegando consideramos que aceptas su uso.&quot;, close: &quot;Entendido&quot;, learn: &quot;Más información&quot;, link:&quot;http://www.google.com/policies/technologies/cookies&quot;};
</script>

El mensaje está en rosa, pero puede ponerse otro. El botón de aceptación de los cookies dice "Entendido", pero puede ser también "OK" o "Vale". El enlace de "Más información" lleva a las políticas de los cookies de Google (en naranja).
Con esta flechita se agiliza subir y/o bajar del blog de forma rápida, más si es extenso. Las flechitas son estas y aparecen a una altura media al margen derecho del blog.



  • Ubicación: plantilla.

Pegar antes de <body> el siguiente bloque de código:

<a href='#' rel='nofollow' style='display:scroll;position:fixed;bottom:250px;right:5px;' title='Ir arriba'><img src='https://lh3.googleusercontent.com/-Tzn_h2RUIj4/VRi-9QpYiPI/AAAAAAAAOJI/aBhSMD9bGAw/s60-Ic42/up1.png' style='border:0;'/></a>
<br/>
<a href='#GoDown' style='display:scroll;position:fixed;bottom:165px;right:5px;' title='Ir abajo'><img src='https://lh3.googleusercontent.com/-jCRZCMh_4L0/VeICWBlVU5I/AAAAAAAAQRo/kTZAic0_RNQ/s60-Ic42/down2.png' style='border:0;'/></a>
<a name='GoDown'/>


Las secciones que están en rosa identifican las URL de las imágenes a utilizar, y los valores numéricos (en verde) indican en pixeles la posición de las imágenes.

Con este truco, los visitantes de un blog podrán compartir en las redes sociales las entradas que más le interesen. Este tutorial muestra los botones por cortesía de GetShares al final de los posts (post-footer).

 

  • Ubicación: plantilla

1. Buscar estas líneas </b:if><div class='post-footer-line post-footer-line-1'> y pegar encima el siguiente bloque. Tan solo hay que cambiar el nombre de usuario de Twitter en la parte negrita que dice "usuario". En verde se especifican las redes sociales para compartir los contenidos.

<!-- BOTONES SOCIALES GETSHARES -->
<div style='font-family: Arial; font-size: 11px; color: #555555; text-transform: uppercase; letter-spacing: 2px; text-align: center;'><br/>
Compartir</div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='buttons'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<script src='http://cdn.getshar.es/lib/0.8.0.min.js' type='text/javascript'/>
<link href='http://cdn.getshar.es/lib/0.8.0.min.css' rel='stylesheet' type='text/css'/>
<style>#buttons{text-align:center; margin:10px auto;font-weight:normal;}</style>
<script type='text/javascript'>
(function(){
var settings;
settings = {
root: $(&quot;#buttons&quot;),
counter: {
position: &quot;inside&quot;
},
share: {
url: &quot;<data:post.canonicalUrl/>&quot;,
imageUrl: &quot;<data:post.firstImageUrl/>&quot;,
message: &quot;<data:post.title/>&quot; + &quot; <data:post.canonicalUrl/> Vía: @usuario&quot;
}
};
new GetShare($.extend(settings, {network: &quot;googleplus&quot;}));
new GetShare($.extend(settings, {network: &quot;twitter&quot;}));
new GetShare($.extend(settings, {network: &quot;facebook&quot;}));
new GetShare($.extend(settings, {network: &quot;linkedin&quot;}));
new GetShare($.extend(settings, {network: &quot;pinterest&quot;}));
new GetShare($.extend(settings, {network: &quot;pocket&quot;}));

//Más redes en http://getshar.es/
}).call(this);
</script>
</b:if>
Para poner las etiquetas del blog con colores o cambiar su fuente o tamaño, basta este sencillo truco.

  • Ubicación: plantilla.

Buscamos esta línea ]]></b:skin> y pegamos ENCIMA el siguiente bloque:

}.etiquetas {
    padding:4px;
    color:#000000;
    opacity:0.6;
    text-shadow:0 0px 0px ;
    background:none repeat scroll 0 0 #D2D2D2;
    }
    .etiquetas: hover {
    opacity:0.9;
    }

Solo queda editar parámetros y listo.
En Blogger te damos un montón de espacio, verás cómo estos "límites" en realidad te limitan bastante poco. Por si tienes curiosidad, aquí te explicamos lo que "cabe" en una sola cuenta de Blogger. 
  • Número de blogs: una cuenta puede tener 100 blogs como máximo.
  • Número de entradas: no hay ningún límite en el número de entradas que puede contener un blog. Todas se guardan en tu cuenta (a menos que las elimines a mano), independientemente de si publicas archivos o no.
  • Número de páginas: no hay ningún límite en el número de páginas que puede contener un blog.
  • Tamaño de las entradas: aunque las entradas individuales no tengan un tamaño máximo determinado, si publicas entradas larguísimas tendrás que vértelas con el límite de tamaño de la página (véase el punto siguiente).
  • Tamaño de las páginas: las páginas individuales (la página principal del blog o las páginas de archivo) tienen un límite de tamaño de 1 MB. Ese tope te permite varios cientos de páginas de texto, pero te puede dar problemas si incluyes cientos de entradas en la página principal de tu blog. Si llegas a ese límite, verás el mensaje de error "006 Ponte en contacto con el servicio de asistencia de Blogger". Para evitar ese error, puedes reducir el número de entradas de tu página principal. Además, así tu página se cargará más rápido. 
  • Número de comentarios: no hay ningún límite en cuanto al número de comentarios que admite una entrada. Al igual que ocurre con las entradas archivadas, si eliges ocultar los comentarios de tu blog, todos los comentarios anteriores se guardarán en tu cuenta.
  • Número de imágenes: hasta 1 GB del espacio total de almacenamiento, compartido con la web de Picasa. Si has conectado tu blog con Google+, tus fotos se guardarán en Fotos de Google+. Allí dispones de 15 GB de espacio de almacenamiento, compartido con Gmail y con Drive. 
  • Tamaño de las imágenes: si publicas imágenes a través de Blogger para móviles, cada imagen no puede superar los 250 K.
  • Miembros del equipo: un blog puede tener 100 miembros como máximo.
  • Número de etiquetas: hasta 2.000 etiquetas exclusivas por blog y 20 por entrada.
  • Descripción del blog: puede tener 500 caracteres como máximo, y nada de HTML. Si escribes más caracteres o código HTML, se recuperará la descripción anterior.
  • Datos del perfil "Sobre mí": 1.200 caracteres como máximo.
  • Intereses y favoritos del perfil: cada campo admite un máximo de 2.000 caracteres.
  • Importación de blogs: no hay ningún límite de tamaño de archivo para los blogs importados. Sí que es posible que tengas un máximo de importaciones por día.
 Visto en Ayuda de Blogger.
Hasta ahora, los gadgets los poníamos en la sidebar, al lateral del blog. La cuestión es que, ¿por qué no ponerlos encima de las entradas? Blogger no nos da esta opción a tenor de las plantillas que incorpora en su sistema. Pero ahora sí podemos hacerlo. Hay que editar el código para poner integrarlas.


  • Ubicación: plantilla.

1. Buscamos estos códigos: 

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'/>
</b:section>

2. Luego pegamos este bloque justo antes del código anterior:
<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
El parámetro en rosa es el ancho de cada gadget. Para amoldarlos al espacio, reducir dicho número hasta que queden bien.

Esta es una forma curiosa y sobre todo original de lucir las secciones con las páginas independientes de Blogger. El resultado es muy estético. Este truco ha sido visto en Ciudad Blogger.

Cortesía de Ciudad Blogger

  • Ubicación: plantilla.

1. Se empieza buscando esta línea ]]></b:skin> para pegar el siguiente bloque justo antes:

/* Menú Listón
----------------------------------------------- */
#menuListon:after, #menuListon:before {
content: '';
position: absolute;
}

#menuListon {
height:25px; /* Alto del menú */
text-align: center;
position: relative;
margin: 0 -30px 5px -30px;
padding: 10px 0;
background: #e5592e; /* Color del listón */
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
box-shadow: 0 2px 0 #bbb;
}
#menuListon:before, #menuListon:after {
border-style: solid;
border-color: transparent;
bottom: -10px;
}

#menuListon:before {
border-width: 0 20px 10px 0;
border-right-color: #8C3115; /* Color de la sombra del doblez */
left: 0;
}

#menuListon:after {
border-width: 0 0 10px 20px;
border-left-color: #8C3115; /* Color de la sombra del doblez */
right: 0;
}

#menuListon ul {
margin-top: 0px;
}

#menuListon li {
list-style: none;
display: inline;
padding-right:20px;
}
#menuListon li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: inline;
text-decoration: none;
color: #f0f0f0; /* Color del texto */
font-size: 18px; /* Tamaño del texto */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}

#menuListon li a:hover {
font-size:20px; /* Tamaño del texto al pasar el cursor */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}



Editamos parámetros de colores... Para ajustar el listón al blog, modificar el parámetro margin, ambos -30px y marcados en rojo. Cuanto más se rebaje el número, más se reducirá el listón, y viceversa.

 2. Seguidamente, buscamos este otro bloque...
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
</b:section>

...y pegamos justo debajo el menú:

<div id='menuListon'>
<ul>
  <li><a href='URL del enlace'> Pestaña 1</a></li>
  <li><a href='URL del enlace'> Pestaña 2</a></li>
  <li><a href='URL del enlace'> Pestaña 3</a></li>
  <li><a href='URL del enlace'> Pestaña 4</a></li>
  </ul>
</div>

Si queremos añadir un icono a la pestaña, debemos poner este código:

<img src="URL IMAGEN"/></a>

Así que, el código final quedaría así, con el icono:

<li><a href='URL del enlace'><img src="URL IMAGEN"/></a> Pestaña 1</a></li>

Solo nos queda cambiar lo que está en rosa por las urls de las páginas, y lo de verde por el nombre de las secciones del menú.