Botón "ir arriba" que aparece y desaparece

Al igual que en poner botón “ir arriba” e “ir abajo” este script nos sirve para subir hacia arriba de la página cuando estemos abajo, la única particularidad es que el botón, ícono o imagen que pongas solo aparecerá cuando bajemos el scroll, y desaparecerá una vez que hagas click en él y subas a la cabecera del blog.

Puedes verlo funcionando aquí.  

Para poner este truco entra en Plantilla, Editar html, y antes de </head> pegas la librería Jquery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

Ten en cuenta que si anteriormente ya has puesto en tu blog JQuery, no tendrás que ponerlo otra vez. Solo asegúrate que sea la última versión.

Ahora nuevamente buscamos en la plantilla ]]></b:skin> y justo antes ponemos los estilos que definirán el botón o la imagen que pondrás:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px;
left: 30px;
}

#IrArriba span {
width: 50px;
height: 30px;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wArdvlEMAWiYzQS3rwehGfdsrBgJdd_G9sxUQESAhclJGU9SASVZFDh3-FC6rMMwWdD6d8NHhl6IHCdWmcB8e7rq24rEn6dAEDO-vDYm7HSmzAdCdFXYCcsmx7jZuVDtTmwyJStIFFM/w50-h30-no/Sin+t%25C3%25ADtulo.png) no-repeat center center;
}

Ahora solo falta poner el script que hará que este artilugio eche a andar. Para ello buscamos </body> y antes de ahí pegamos el script:

<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
</script>

Solo cambia https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wArdvlEMAWiYzQS3rwehGfdsrBgJdd_G9sxUQESAhclJGU9SASVZFDh3-FC6rMMwWdD6d8NHhl6IHCdWmcB8e7rq24rEn6dAEDO-vDYm7HSmzAdCdFXYCcsmx7jZuVDtTmwyJStIFFM/w50-h30-no/Sin+t%25C3%25ADtulo.png por la Url de tu imagen. Procura que el tamaño de la imagen no exceda de 50x30px para que no distorsione en tu blog. Ahora, si quieres que el botón (o lo que hayas puesto) vaya al lado derecho cambia left: 30px por right: 30px. Y eso es todo.

Cambiar el color de fondo del blog a gusto del lector

Hay un truco que me pareció muy simpático y adecuado para que nuestros visitantes puedan interactuar en nuestro blog y que lo vi en ciudad blogger. Se trata de que quienes entren al blog puedan cambiar el color del fondo de nuestro blog.

Y lo mejor es que para lograr esto solo se tiene que ingresar un gadget en uno de tus sidebar y listo. Puedes probarlo en esta entrada haciendo click en los colores que tengo a tu derecha, si ingresas en esta entrada.

El código que debes pegar es este:

<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggi9bSrLO2MuHJtIhO2SpZJlXbN3o2HIzp-mOoBFAUJ29BR4oZncie6O8lGXQ8I2zz2OdxkLfJIncF_qD40iPvb4QODWXkZKs5_dmcwHHH4IbJAoHTyMvR2DXFL47VWsCsvPRFrB27zehX/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIKUjg3xh0STfe0VYnhUHqHRW46vWyGAM9ii45o3KvqtMbJGjfm3h1u8kOuw6nyKWPxgKTTy2BZPNadkEuSPMDglzFqoVHiWEVAbxJp1CccNIF0Lqu-kiVGI1vY3Dwke6ovVozv2GquLlF/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpOXqwv47PY3_PUjfQFzYBquwSNCOsPim_atUdOrfzakZIIPcPFnf7FR_d9C415D6tjHnVMnkSnAIhdZVdAfN2nGtyoOMXzUIeMk4id0pmj_CcgDsvjxn-kmsHsM_MJyT6PNtzYLjUBVV/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbiAaCV_bM4den0dd6yrFHSuy6m-t8LAUMBLxdW_LxN0iqm1aE2VvEe0LUZzzdN_bno_qqo9NWcvjgYibJAzDq7ZS1BCBg39aHzYTC-tGlu0a-6pxHb9aw0Whb3nI0Ch-O6Y2nQbFSDPle/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp4YHmXUWSwrmtFZO2V2JL6CajS-C0e4RVmZ7meODpb9sOOmhhF3enm6JnzmuJkoJw5vL32cFyB6bKXlKybORhLOtboV4ykX3EG-FEbRtUmlEbubWTWo0luqecvtAKdy4SEYhckHzZg0-P/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL7EgU7Wqtle55cIt5FhJJe0G1XmTgsT35cF32N4fTrOwZpWLWBCPGUTbGpjiPwCET-AUp2N1mVGs_XF8P_38IufoBNPz-acYNAm8pAUi0N84DT7dW6GfJrX76sZg0qoQUlyDJlOve9PCs/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhubTD0NWN9cIHSR5RrLWG8f0pYUzZWXKsuU0_u2d668eaIzfAPYY6saiiv4x901gGSXwXpZfbHMfIE9wx1SZmaSNhiwIb1x8oiOvJ9C85z-ue5MbLwZDiaqU7pJLF7SWnRNHlpv-CRzMTp/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45rAR2gOHereb7No0gwETF-3obWIkIlxmcDOnsTNoT-SOBhC-eh-JbN7Wtabxq4w5RfrFWnM93sqplkn1WEsXmCRTk4I9evT1P9uBl9VzDoAFydgZNssyLVaygiyKfkFQOYT3H80Hz31H/s200/body-blanco.png" /></a>
</center> 

Si quieres cambiar los enlaces de la imagen de los colores con letras solo tienes que reemplazar <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45rAR2gOHereb7No0gwETF-3obWIkIlxmcDOnsTNoT-SOBhC-eh-JbN7Wtabxq4w5RfrFWnM93sqplkn1WEsXmCRTk4I9evT1P9uBl9VzDoAFydgZNssyLVaygiyKfkFQOYT3H80Hz31H/s200/body-blanco.png" /> por el nombre del color que corresponda y listo, así quedará el enlace únicamente con letras.

Casi lo olvido: Asegúrate de probar primero el fondo de tu blog. No sea que las letras de tu entrada "desaparezcan" (no se distingan) al cambiar de color el fondo de tu blog.

Dividir las entradas del blog

Dividir la entrada de nuestro blog en dos columnas es algo que a mí siempre me ha llamado la atención, aparte de ser un truco bastante sencillo de aplicar, hace que las entradas del blog parezcan como si fuesen un periódico o una revista, detalle que no deja de ser bastante bueno.

Puedes ver un ejemplo en este blog de pruebas

Para hacer esto solo se requiere de un pequeño código que debes insertar una vez hayas escrito tu entrada. El código deberás insertarlo en la parte que dice Código html, y no en la de Redactar, tal como se muestra en la imagen:

El código que debes poner es el siguiente:

<div style="float:left; width: 50%">Aquí tu primera parte</div><div style="float:right; width: 50%">Aquí tu segunda parte</div>
<div style="clear: both"></div>

Si ocurre que las columnas quedan muy grandes para entrar en el blog, solo cambia la parte del código donde dice 50% en ambos lados por un valor más pequeño hasta que entren las dos columnas. Lógicamente debes reemplazar la parte “Aquí tu primera parte” por la parte de la entrada que quieras que vaya primero. Y así mismo con la otra parte.

No olvides primero escribir tu entrada con todos los enlaces y luego si cambiar a Edición Html y desde allí dar en publicar tu entrada, caso contrario provocarás un caos. 

Personalizar la primera letra de las entradas del blog

Existe una manera muy sencilla de hacer que la primera letra de las entradas de nuestro blog aparezca de diferente tamaño en relación al resto del contenido, dándole una apariencia parecida a los periódicos que hace que se vea un poco más elegante. Hacerlo es en realidad muy sencillo.

Te quedaría algo más o menos así:

Claro que puedes personalizar tanto el tamaño, color y estilo de las letras como para que queden a tu gusto y que combinen con el estilo de tu blog.

Veamos cómo hacer este truco. Primero entra en Diseño, Edición html y, con los artilugios expandidos, pega antes de ]]></b:skin> lo siguiente:

.post-body:first-letter {

float:left;

color: #333333;

font-size:100px;

font-family:none;

line-height:80px;

padding-top:1px;

padding-right:5px;

}

font-style: italic;

}

Con esto te aseguras que en todas tus entradas esta primera letra aparezca como tú la hayas personalizado.

Ahora lo que debes cambiar a tu gusto es el tamaño de las letras que están en rojo, el color que lo he puesto en azul, y el alto de las letras que ya depende de tu gusto que puede ser más grande, más pequeño, etc, etc., que lo he puesto en verde.

Personalizar la fecha en las entradas del blog

Aunque hace ya bastante tiempo existen plantillas que muestran la fecha estilo calendario también es cierto que muchos de los que ya teníamos una plantilla a veces nos rehusamos a cambiar de plantilla (quizás por afecto o capricho o cualquier otro motivo) y lógicamente quisiéramos que en la plantilla que usamos también se muestre la fecha de este modo sin tener que correr el riesgo de deshacernos de nuestro blog.

Cualquiera que sea el motivo, existe una manera sencilla y rápida de poner el script que hace que la fecha en nuestras entradas se muestren al estilo calendario. Antes de entrar a la plantilla, asegúrate que la configuración de la fecha en tu blog sea así:

Para ello debes ir a Configuración, Idioma y Formato, y modificar la fecha tal cual se muestra en la imagen.

Una vez asegurado esto, entras en Diseño, Edición html, Editar Plantilla. Allí buscas lo siguiente:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

En algunas plantillas (muy pocas) quizá esta línea de código se encuentre dos veces. No te preocupes, solo eliminaremos la última. Luego de eliminarla la reemplazas con este fragmento de código:

<div id='Fecha'>
<script>cambiarFecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Fecha'>
<script>cambiarFecha(&#39;&#39;);</script>
</div>

Listo, esto era lo más difícil. Ahora, antes de </head>, pegas el script que lo hace funcionar:

<script type='text/javascript'>
//<![CDATA[
var FechaCalendario;
function cambiarFecha(d){
if (d == "") {
d = FechaCalendario;
}
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";

document.write(mes+dia+anio);
FechaCalendario = d;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU_sddm7R0fD1CS1ziS_SfJFcRkHtwJlW99vAG9K7UD2zqArVlyfoBU2GHBDI-XcgEvKQwb1VVnnHCXITtLm8GqVtYedas1fpN0jv0UhAoQcqZHYxFml3QIDxb0ospICNlvARh_pp5dIM/w60-h59-no/) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -30px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 13px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#282828;
}

.fecha_dia {
display: block;
font-size: 22px;
font-weight:bold;
margin-top:-4px;
text-align:center;
color:#282828;
}

.fecha_anio {
display: block;
font-size: 13px;
margin-top:-4px;
text-align:center;
color:#282828;
}
</style>
</b:if>

Recuerda que la imagen de calendario queda dentro de las entradas. Si lo quisieras fuera de ellas solo cambia -30px por un valor más alto. La url de la imagen puedes cambiarla con una imagen que tú quieras y que combine mejor con el color de tu blog, pero recuerda que no debe ser mayor de 50x50px para que no distorsione con el resto del código. Por lo demás, no hay problema.