Abrir link en tab nueva


Las pestañas son tan comunes en una web o blog que cuando das clic a un link, normalmente se abre en la misma página. ¿Pero cómo conseguir que se abra en una nueva ventana o tab? Haciendo uso del atributo <target>.

EL ATRIBUTO TARGET

Este atributo le dice a la web que un link o enlace debe abrirse en una ventana nueva.

<a href="ENLACE URL" target="_blank">TÍTULO DEL ENLACE</a>

Ahora cuando hagan clic en un link, este se abrirá en una nueva pestaña.


¿Y si no quiero que un link se abra en una pestaña nueva?

Entonces usaremos el atributo <anchor> para abrir el contenido en la actual pestaña.


EL ATRIBUTO ANCHOR

<a href="ENLACE URL">TÍTULO ENLACE</a>


Ejemplos: 

En nueva pestaña: Cómo ser un blogger
En misma pestaña: Los límites de Blogger

Paletas de colores en hexagecimal: webs y apps

Obtener códigos de color HTML; códigos de color Hex para estilos


Para obtener colores en códigos hexagecimal (Hex), acompañados del símbolo # (almohadilla o hashtag) se puede consultar estas webs:

También hay disponibles unas aplicaciones (no programas descargables al disco duro) que identifican cualquier color que aparezca en pantalla, obteniendo así su código Hex. Tal es el caso de:

  • JC Picker (o Just Color Picker)
  • Pixel Pick
  • El complemento para Firefox Rainbow Color Tools
Todos son facilísimos de usar y muy intuitivos. Por estas vías es casi imposible quedarse sin colores.

Esquema del blog

O lo que es igual: el esqueleto de la estructura de un blog.

Foto cortesía de Quiero crear un blog

outer-wrapper: envuelve a todo el blog.
main-wrapper: lugar donde se escriben los posts o entradas.
sidebar-wrapper: columna lateral donde se insertan los gadgets.
header-wrapper: cabecera del blog.
footer-wrapper: pie de página del blog.
 

Elementos básicos de Blogger

Estos son los elementos básicos de toda plantilla Blogger. Saber distinguirlos garantiza el éxito editando el diseño de un blog.

En ambas, clicar para agrandar (+)

Fotos por cortesía de Quiero crear un blog

"Click to tweet" - Generar tuits personalizados

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtBDIUzD-5VnGers3B65xZYtdsb-pPc8p7rsGzcjPa0AN1BkbBTrTxIS8V5KaGKDd0D8Z9yUeT_Gbkdmohyphenhyphen0HTYWJeiKzDOisezGVyikSPJfrZS1ADFXj_t-JdKHIzwqfWNyJsOBsMU0Q/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.


Personalizar mensaje de cookies

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).

Flechitas ir arriba-abajo

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGOoC2gITYvP-DQYRiZUiuzCvJ8loLBKST5fC4iYgI7zJtiXwMZboyV9a304hfP_r-K0Qc7ufh-yu_OrZHd4a09LRpO_uUuW2p1j7oGL7NljtUv7zIv0Kb5YZDhjTgpiC16Qbs1zES8drz/w55-h78-s-no/?authuser=0' style='border:0;'/></a>
<br/>
<a href='#GoDown' style='display:scroll;position:fixed;bottom:165px;right:5px;' title='Ir abajo'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSS8wtQSIeukgeW-_E91FKZIidC5Y5nyi_0JIehsSW2OHbXIx3KSDQ-Ql-PCypKlaMZBh4ukfESSW0wHIOt04lNuwTdimzgk7T0lowIO2HG2OOixT1wU44_us99r63M0fkqNQZIRzyhZFE/w55-h78-s-no/?authuser=0' 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 amarillo ocre) indican en pixeles la posición de las imágenes.


Botones redes sociales con contador

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>

Editar etiquetas del blog

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.
Suscribirse a: Entradas (Atom)