Trucos Blogger

Menú Bordeado Animado

2013-10-08T02:56:00.000+02:00

Hay muchas personas que deciden poner una gran imagen arriba en la cabecera. A mi personalmente no me gusta, pero para gustos... En estos casos, poner debajo un menú horizontal con las categorías puede ser inconveniente porque el menú quedaría escondido, con lo que perdería su eficacia. Si es el caso que la plantilla es de 2 columnas, con el sidebar a la derecha te recomendaría este menú. Como veis en la imagen a continuación, coloca una imagen arriba, por la que al pasar el ratón despliega un menú a la izquierda y abajo muy ligero y fácil de hacer.

Lo primero vamos a Plantilla y en el html buscamos la etiqueta </head> y justo antes de ella pegamos el siguiente código:

<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/recursosbit/iconos.css"/>
<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/recursosbit/menuanimado.css" />

Ahora buscamos la etiqueta </body> y justo encima pegamos lo siguiente:

<script src="http://sites.google.com/site/recursosbit/classie.js"></script>
<script src="http://sites.google.com/site/recursosbit/castromenu.js"></script>

Guardamos los cambios y nos vamos a crear un widget Html en Diseño y dentro pegamos lo siguiente:

<nav id="menucastro" class="menucastro">
    <a href="#" class="menucastro-trigger"><span>Menu</span></a>
    <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
     <li><a href="#">link 5</a></li>
    </ul>
    <ul>
     <li><a href="#" class="castro-iconos icon-twitter">Twitter</a></li>
     <li><a href="#" class="castro-iconos icon-gplus">Google+</a></li>
     <li><a href="#" class="castro-iconos icon-facebook">Facebook</a></li>
     <li><a href="#" class="castro-iconos icon-github">icon-github</a></li>
    </ul>
</nav>

Fuente: BitCreativo

Pop up con Efecto Lightbox en Blogger

2013-09-26T22:34:00.000+02:00

Los pop ups son los elementos más odiados por los lectores. Esas molestas ventanitas, llenas de publicidad sin ninguna utilidad, que empeoran tu experiencia en una web no es algo a lo que debas recurrir en un blog si quieres que tus lectores te vuelvan a visitar. Ahora bien, si el contenido en cuestión fuera de utilidad, el pop up seria un recurso a tener en cuenta, sobretodo si está integrado dentro de la misma pestaña, sin que se abran ventanas nuevas del explorador.
El pop up con efecto lightbox obliga al lector a centrarse en el contenido que quieres que lean y tienen que tomar acción, cerrando el pop up, para poder seguir navegando por tu web.
Posibles usos para el pop up con efecto lightbox:

El más conocido sería para mostrar una imagen donde anuncies algo (recuerda que sea de utilidad).

Puedes meter un formulario de correo para suscribirse a las actualizaciones de tu web.

Últimamente, se han hecho populares los pop ups con el fanbox de Facebook. Pero podrías meter el de cualquier red social de tu preferencia como Google+ o Twitter.

A continuación te mostraré sencillamente el código para que pongas tu pop up con efecto Lightbox en Blogger y más adelante crearé posts con el código concreto para crear un fanbox y los demás ejemplos que hemos visto antes. Así que ve a Diseño - Añadir un gadget - HTML/Jacascript y pega lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>; <style>
#fanback{display:none;background:url(https://sites.google.com/site/terrenoblogger/imagenes/bg.png);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}#fan-exit{width:100%;height:100%}#fanbox{background:white;width:420px;height:270px;position:absolute;top:50%;left:50%;-webkit-box-shadow:inset 0 0 50px 0 #939393;-moz-box-shadow:inset 0 0 50px 0 #939393;box-shadow:inset 0 0 50px 0 #939393;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:-135px 0 0 -210px;}#fanclose{float:right;cursor:pointer;background:url(https://sites.google.com/site/terrenoblogger/imagenes/fanclose.png) repeat;height:15px;padding:20px;position:relative;padding-right:40px;margin-top:-20px;margin-right:-22px;}.remove-borda{height:1px;width:366px;margin:0 auto;background:#F3F3F3;margin-top:16px;position:relative;margin-left:20px;}
</style>
<script type="text/javascript">
jQuery.cookie=function(key,value,options){

if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);

if(value===null||value===undefined){options.expires=-1;}

if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+ days);}

value=String(value);

return(document.cookie=[
encodeURIComponent(key),'=',
options.raw?value:encodeURIComponent(value),
options.expires?'; expires='+ options.expires.toUTCString():'',
options.path?'; path='+ options.path:'',
options.domain?'; domain='+ options.domain:'',
options.secure?'; secure':''].join(''));}

options=value||{};
var result,decode=options.raw?function(s){
return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+ encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
</script>

<script type="text/javascript">
jQuery(document).ready(function($){if($.cookie('popup_user_login')!='yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium')})}
$.cookie('popup_user_login','yes',{path:'/',expires:30})});
</script>

<div id="fanback">
<div id="fan-exit"></div>
<div id="fanbox">
<div id="fanclose"></div>
<div class="remove-borda"></div>CONTENIDO</div>
</div>

Para no ser redundantes en el código haz primero una busqueda en tu html de "jquery". A veces ya hemos llamado este script desde otro widget que hayamos instalado, o viene por defecto en nuestra plantilla y no sería necesario poner esa línea. Puedes probar a no ponerla y si no te funciona entonces la añades.
Para determinar cada cuanto se abre el pop up, este script añade una cookie. Por defecto lo he puesto para que salga cada 30 días, pero puedes cambiarlo en expires:30
Cambia CONTENIDO por lo que quieras poner: una imagen, un texto, lo que quieras. Por ejemplo, para añadir una imagen tendrías que reemplazarlo por:

<img src="URL de IMG">

Fuente del script: Terreno Blogger

Personalizar la Lista Numerada en Blogger

2013-09-24T13:59:00.000+02:00

En el post anterior estuvimos trasteando en el CSS de nuestra plantilla para cambiar las viñetas en Blogger. En esta entrada vamos a personalizar la lista numerada en Blogger del mismo modo. Os voy a enseñar el estilo que tengo puesto en este blog.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum .

Ahora vamos al lí. Vete a Plantilla > Edición HTML. Busca ]]></b:skin> y encima pega lo siguiente:

.post-outer ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{ /*Estilos de cada elemento*/
position:relative;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style: decimal;
border:1px solid #e2e3e2; /*Color de borde*/
background:#f2f2f2; /*Color de fondo*/
text-indent:10px;
}
.post ol li:before{ /*Los estilos del Número*/
content:counter(li);
counter-increment:li;
position:absolute;
top:-5px;
left:-5px;
font-family:'Oswald', serif;
font-size:14px;
width:12px;
margin:0 0 10px 0;
padding:4px !important;
color:#727272; /*Color de texto*/
text-align:left;
background:#e2e2e2; /*Color de fondo*/
text-indent:2px
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:14px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #aeaeae; /*color del triangulito*/

Ahora haz la prueba:

Cambiar las Viñetas en Blogger

2013-09-24T11:07:00.000+02:00

A los lectores les encantan los listados, es un hecho demostrado, por lo que poner un diseño bonito siempre es de agradecer. Para cambiar las viñetas en Blogger, solo hay que acceder al editor de HTML y trastear un poco. Vamos a ello.

Entra en Diseño > Edición de HTML y pega el siguiente código encima de ]]></b:skin>

/* Inicio Personalizacion de Viñetas - http://trucosbloggerblog.blogspot.com */
.post ul { list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}

.post ul li {
background:url(URL de la imagen) center left no-repeat;
margin:0;
padding:3px 3px 3px 20px;
}
/* Fin Personalizacion de Viñetas - http://trucosbloggerblog.blogspot.com */

Cambiar URL de la imagen por la direccion de la imagen que quieras poner. En Websitebullets tienes un monton de viñetas para elegir. Si tu blog tiene un fondo distinto a blanco te tocará darle un reparso con un editor de imagenes para ponerles un fondo transparente.

Tras cambiar las viñetas en Blogger, vamos a ver que tal quedan:

Lista no ordenada a
Lista no ordenada b
Lista no ordenada c

Ya puestos, no te pierdas como Personalizar la Lista Numerada en Blogger

Formulario de Contacto En Una Pagina en Blogger

2013-09-23T09:03:00.000+02:00

Si queremos que nuestros lectores se pongan en contacto con nosotros, lo mejor es usar un formulario de contacto de los de toda la vida. Para ello simplemente hay que configurar un widget y nos sale en el lateral. Lo cual me parece molesto, gasta espacio y es poco estético. Vamos a configurar uno nosotros para que al pinchar en un enlace nos salga el formulario de contacto en una pagina en Blogger.

Diseño > Añadir gadget > Más Gadgets > Formulario de Contacto. Guardar.
Para esconderlo del lateral y darle estilo vamos a Plantilla > Editor HTML. Buscamos la etiqueta </head> y encima pegamos:

<b:if cond='data:blog.pageType == "static_page"'>
<style>
#ContactForm1{ display:none!important;}
</style>
</b:if>

<style>

/*---- Compatible contact Form by MBT -----*/

.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 220px;
width: 100%;
font-weight:bold;
}

.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg182-CSgCKQtGSie_rOCpD8ObOmahxtP98J94w4hhAhyphenhyphenTAjpQkromGK1QCqbhviCKy12Ysibsi5R02L3I2zo4PtDQUZ7tEXIhPS5tdeX-6t4L7t4jqvZ0Q9iTCmax2xs9_kbU2my5TJ_Q/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;

}

.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJknEpVRqaLmSa4QH5Zgwmn215-P6HBe0R1OBQZHDKBTTVjf8FeIp_eEja7ZziTgKQaIxNN8PAwfFBLIHwpbFk1jLSWK4P91NIYIWRVYj5o3JKcb31CxFOInlYwoQV2LvjsQTEzYGV0g/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;

}

.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

padding: 5px 15px 5px 28px;

}

.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}

.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 350px!important;
height: 150px;
border-radius:4px;
}

.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}

.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}

.MBT-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.MBT-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.MBT-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

</style>



<style>
@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg182-CSgCKQtGSie_rOCpD8ObOmahxtP98J94w4hhAhyphenhyphenTAjpQkromGK1QCqbhviCKy12Ysibsi5R02L3I2zo4PtDQUZ7tEXIhPS5tdeX-6t4L7t4jqvZ0Q9iTCmax2xs9_kbU2my5TJ_Q/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;
}

.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJknEpVRqaLmSa4QH5Zgwmn215-P6HBe0R1OBQZHDKBTTVjf8FeIp_eEja7ZziTgKQaIxNN8PAwfFBLIHwpbFk1jLSWK4P91NIYIWRVYj5o3JKcb31CxFOInlYwoQV2LvjsQTEzYGV0g/s320/email.png) no-repeat 7px 8px;
padding: 15px 15px 15px 28px;

}

.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}

.contact-form-button {
height: 28px;

}

}

</style>

Para insertarlo en una página estática vamos a: Panel de control - Páginas - Página nueva - Página en blanco - Le pones un título (Formulario de Contacto) y en HTML colocamos lo siguiente:

<div class='form'>


<form name='contact-form'>



<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>



<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>



<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></textarea>
<p></p>


<input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/>


<input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>


<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>


</div>

Hay veces que no se oculta bien. Para entonces busco en el HTML la etiqueta: <b:skin><![CDATA[ y justo después pego:

#ContactForm1
{
display: none ! important;
}

Fuente: Amorsevillista

Añadir una descripcion en las entradas de Blogger

2013-09-23T01:13:00.000+02:00

Una de las primeras formar que un buscador nos encuentra es mediante la descripción de la página. No solo nos conformaremos con poner una descripción para todo nuestro blog, si no que vamos a añadir una descripcion en las entradas de Blogger individualmente.
Cuando queremos que nuestra web se vea en Google, normalmente nos preocupamos de nuestra portada, en mi caso http://trucosbloggerblog.blogspot.com y nos olvidamos del resto. Si yo quiero que esta entrada llegue a mas gente, tengo que optimizarla por si sola. Es mas, cuanto mas optimizadas esten nuestras entradas por si mismas, mas subirá en el ranking nuestra web en general.
Como veis en nuestra imagen a continuación, por defecto no tenemos don de poner nuestra descripcion.

Para añadir una descripcion en las entradas de Blogger vamos a hacer lo siguiente:

En nuestro Blogger vamos a Configuración > Lo básico
Rellenamos nuestra descripción general de la web.
Ahora vamos a Configuración > Preferencias para motores de búsqueda
En Etiquetas meta rellenamos la descripción.

Ahora cuando abrís una nueva entrada vereis que teneis el campo "Descripción de la búsqueda" disponible.

Google Analytics en Blogger

2013-09-23T00:22:00.000+02:00

Blogger incorpora unas estadísticas a las que puedes accerder desde el menú de administricion de tu blog. Ahora bien, si quieres unas estísticas más detalladas, vas a tener que incorporar Google Analytics en Blogger. Para ellos sigue estos sencillos pasos.

Entra en Google Analitics y rellena los datos que te piden. Pinchas en el botón azul "Obtener ID de Seguimiento.
Ahora nos saldrá el código que buscamos: el ID de Seguimiento algo como UA-44623533-1.
Abrimos otra ventana de nuestro navegador y entramos en Blogger > Configuración > Otros.
Debajo del todo veremos el Cuadrito donde nos pide la ID de propiedad web de Google Analytics. Pegamos el que hemos conseguido antes y hacemos click en Guardar Configuracion.

Ya teneis listo vuestro Google Analytics en Blogger.

Eligir el diseño del blog

2013-09-22T23:25:00.000+02:00

Este es un post de prueba para ver que tal se ven los diseños que estoy probando. Elegir el diseño del blog es algo divertido pero que si no se hace bien perderemos un monton de tiempo. Estoy buscando que sea bonito, por supuesto. Un blog agradable a la vista es lo primero que un lector va a agradecer. Somos asi de caprichosos. Me gusta que esté bien organizado y limpio.

Hay veces que entramos a un blog y el contenido que leemos primero es medianamente util. Lo primero que yo hago es mirar a simple vista si hay otro contenido que me interese. Somos asi de vagos. Por lo que si no ofrecemos altenativas perdemos al lector rapidamente. A primera vista, el diseño ha de ofrecer los títulos de otros post. Me gusta sobre todo el widget de posts populares, con las imagenes en miniatura es capaz de enganchar rápidamente.

Si viene equipado con widgets y botones de las redes sociales mas importantes mejor que mejor. Si no toca hacerlo a mano y se ha de invertir un monton de tiempo si no das con los códigos rápidamente.

Algo que tambien hay que tener en cuenta es el SEO, hay plantillas mas compatibles que otras y si se es un lerdo como yo en CSS, más vale que venga todo ya preparadito que no tenerlo que hacer a mano.

Valido la inscripción de este blog al servicio Paperblog bajo el seudónimo trucosblogger

2013-09-22T13:42:00.000+02:00

Valido la inscripción de este blog al servicio Paperblog bajo el seudónimo trucosblogger