Colocar el título de tu blog en movimiento

jueves, 22 de mayo de 2014

Posted by Unknown

Este truco es para poner el título del blog en movimiento. ¿Dónde se mueve? Arriba en la ventana del explorador, abajo en el botón de la barra de herramientas y en la pestaña de la ventana.

Hacerlo es muy sencillo, sólo entra en Plantilla | Edición de HTML y después de <head> pega lo siguiente:

<script>
//<![CDATA[
var txt=" Título del blog ";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
//]]>
</script>

Cambia lo que está en rojo por el título de tu blog y listo.

Cómo poner una imagen flotante en tu blog de blogger

miércoles, 21 de mayo de 2014

Posted by Unknown

0 Comments

Tag : Trucos Blogger

Una imagen flotante o estática es una imagen que permanece visible aunque bajemos o subamos toda la barra de desplazamiento de una página y esta siga en el mismo lugar. Puedes ver un ejemplo en esta misma entrada, debajo del lado izquierdo verás la imagen que permanece ahí aunque bajes la página.

Puedes poner tu logo, un mensaje, una foto, o la imagen que más te guste. Colocarla es muy fácil, sólo entra en Plantilla | Edición de HTML y pega antes de </body> lo siguiente:

<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;'/>

Sólo debes cambiar la URL de la foto; esta imagen quedará en la parte inferior izquierda, para cambiarla de posición remplaza bottom por top si la quieres arriba, y right por left si la quieres a la derecha.

Este truco igual lo puedes usar para poner una flecha (ir arriba) y que los mande al inicio del blog, si ese es el caso entonces usa este código:

<a href='#'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;'/></a>

Cómo colocar una cuenta regresiva para el Mundial Brasil 2014 Blogger

Posted by Unknown

0 Comments

Tag : Gadget y Widgets

La fiebre del fútbol se ha apoderado de la gente, el mundial esta a la vuelta de la esquina y que mejor oportunidad para adaptar nuestros blogs a este evento tan importante.

Con este pequeño pero interesante gadget que te indica cuantos días falta para el mundial.

Para agregarlos vamos a Diseño y agregamos un nuevo gadget HTML/Javascript y pegamos el contador con el diseño que mas te guste.

<div style="margin: 0 auto; text-align: center;"><iframe align="middle" allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://goo.gl/UDVp3h" style="height: 140px; width: 260px;"></iframe></div>

<div style="margin: 0 auto; text-align: center;"><iframe align="middle" allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://goo.gl/MpRJzt" style="height: 88px; width: 300px;"></iframe></div>

<div style="margin: 0 auto; text-align: center;"><iframe align="middle" allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://goo.gl/VwUiA5" style="height: 150px; width: 300px;"></iframe></div>

<div style="margin: 0 auto; text-align: center;"><iframe align="middle" allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://goo.gl/Tt1g56" style="height: 240px; width: 210px;"></iframe></div>

Cómo colocar un cursor con letras en movimiento en blogger

lunes, 19 de mayo de 2014

Posted by Unknown

0 Comments

Tag : Trucos Blogger

Este truco es uno de mis favoritos... Sirve para que un texto siga el cursor del mouse. El texto puede ser el título del blog, un mensaje, o lo que quieras mostrar.

Puedes ver un ejemplo de cómo el texto sigue al cursor AQUI

METODO 1

Para ponerlo en tu blog entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el siguiente código:

<script language="JavaScript" type="text/javascript">

mensaje = 'EL TEXTO QUE QUIERAS';
font = 'Verdana,Arial';
size = 2;
color = 'orange';
velocidad = 0.7;

n4 = (document.layers);
ie = (document.all);
n6 = (document.getElementById);

mensaje = mensaje.split('');
n = mensaje.length;

a = size*10;
ymouse = 0;
xmouse = 0;
props = "<font face="+font+" color="+color+" size="+size+">";

if (n4)
{
for ( i = 0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="n4mensaje'+i+'" height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else if (ie)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}

if(n4)
window.captureEvents(Event.MOUSEMOVE);

function Mouse(evento)
{
if(ie)
{
xmouse = event.x+20;
ymouse = event.y+20;
}
else if(n4 || n6)
{
xmouse = evento.pageX+20;
ymouse = evento.pageY+20;
}
}

if(n4)
window.onMouseMove = Mouse
else if(ie || n6)
document.onmousemove = Mouse;

y = new Array();
x = new Array();
Y = new Array();
X = new Array();
Yaux = new Array();
Xaux = new Array();

for (i=0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
Yaux[i] = 0;
Xaux[i] = 0;
}

function asigna()
{
if (ie)
padre.style.top = document.body.scrollTop;

for (i = 0; i < n; i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top = y[i];
document.layers['n4mensaje'+i].left = x[i]+(i*(a/2));
}
else if(ie)
{
iemensaje[i].style.top = y[i];
iemensaje[i].style.left = x[i]+(i*(a/2));
}
else if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top = '"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left = '"+(x[i]+(i*(a/2)))+"px'");
}
}
}

function ondula()
{
y[0]=Math.round(Y[0] +=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0] +=((xmouse)-X[0])*velocidad);

for (var i = 1; i < n; i++)
{
Yaux[i] = Math.round(Y[i]);
Xaux[i ]= Math.round(X[i]);
y[i] = Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] = Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}

window.onload = ondula;
</script>

Para personalizarlo debes cambiar el mensaje que dice EL TEXTO QUE QUIERAS, si quieres otro tipo de letra cambia donde dice font, para el tamaño de la letra en size, el color donde dice orange, puedes poner el color que quieras (black, red, green, etc) incluso puedes modificar la velocidad.

Nota: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger entonces cambia esta parte del código:

document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}

Por esta otra:

document.write('<div id="padre" style="position:absolute;top:-270px;left:-150px; z-index:400;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top0px;left:0px;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:-270px;left:-150px; z-index:400;"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0px;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}

Verifica que cambies sólo y únicamente la parte que se menciona para no afectar el funcionamiento del script.

METODO 2:

Si tienes algun tipo de problema con el Metodo 1, les daré otro código. Este al igual que el anterior hará que un texto persiga al cursor, sin embargo este tiene un efecto más suave al ondularse el texto. .

Entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

<script language='javascript' type='text/javascript'>
//Cursor con texto en movimiento

//<![CDATA[
var x,y
var tempo = 10
var espera = 0

var texto = "Aquí va tu texto"

texto = texto.split("")

var xpos = new Array()
for (i = 0; i <= texto.length - 1; i++) {
xpos[i] = -50
}
var ypos = new Array()
for (i = 0; i <= texto.length - 1; i++) {
ypos[i] = -50
}

function seguir(e){

//si no es NS4, usa objeto window.event
if (!e) var e = window.event

//NS4
if (e.pageX || e.pageY) {
x = e.pageX
y = e.pageY
window.status = x + ' : ' + y
//IE y compatibles con DOM
} else if (e.clientX || e.clientY) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
window.status = x + ' : ' + y
//no soportado, no hace nada
} else {
return
}

espera = 1
}

function animar_cursor() {

if ( espera == 1 ) {
for ( i = texto.length - 1; i >= 1; i--) {
xpos[i] = xpos[i-1] + tempo
ypos[i] = ypos[i-1]
}
xpos[0] = x + tempo
ypos[0] = y
}

//para el IE 4.x
if ( espera==1 && document.all ) {
for (i = 0; i <= texto.length - 1; i++) {
var letra = eval("span" + i + ".style")
letra.posLeft = xpos[i]
letra.posTop = ypos[i]
}
}
//para el Netscape 4.x
else if ( espera==1 && document.layers ) {
for (i = 0; i <= texto.length - 1; i++) {
var letra = eval("document.span" + i)
letra.left = xpos[i]
letra.top = ypos[i]
}
}

//para navegadores compatibles DOM
else if ( espera==1 && document.getElementById ) {

for (i = 0; i <= texto.length - 1; i++) {
var letra = document.getElementById( "span" + i)

letra.style.left = xpos[i] + 'px'
letra.style.top = ypos[i] + 'px'
}
}

var timer = setTimeout("animar_cursor()", 30)
}

if (document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = seguir
//]]>
</script>
<style type='text/css'>
.cursoranimado {
position:absolute;
visibility:visible;
top:-50px;
font-size:11pt;
font-family:Arial;
font-weight:bold;
color:red;
}
</style>
<script language='javascript' type='text/javascript'>
//<![CDATA[
if (document.layers) {
for (i=0;i<=texto.length-1;i++) {
document.write('<span id="span' + i + '" class="cursoranimado">')
document.write(texto[i])
document.write('</span>')
}
} else if (document.all || document.getElementById) {
for (i=0;i<=texto.length-1;i++) {
document.write('<div id="span' + i + '" class="cursoranimado">')
document.write(texto[i])
document.write('</div>')
}
}
animar_cursor()
//]]>
</script>

Sólo cambia lo que está en rojo por el texto que quieres que aparezca junto al cursor. En font-size puedes cambiar el tamaño del texto y en color para cambiar el color de las letras.

Ver número de usuarios en linea en tu blog de blogger

Posted by Unknown

0 Comments

Tag : Gadget y Widgets

¿Quieres saber cuántos lectores en línea hay en tu blog, en tiempo real?

Navegando en internet me di cuenta que Whos amung us nos trae esta herramienta sencilla para nuestro sitio web. Sabremos el número de usuarios en línea, estadísticas como de qué paises nos visitan o cuándo tuvimos más visitantes en línea.

Agregarlo es lo mejor, ya que NO NECESITAS REGISTRARTE, sólo entra a la página de Whos amung us y ve a Widgets, selecicona el contador web que quieras, copia el código y pégalo en tu blog. Para ello entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código que copiaste.

Cuando quieras ver tus estadisticas completas sólo haz click en el gadget que colocaste. Más sencillo imposible ¿no? Así que si quieres que tus lectores vean cuántos bloggers más están leyéndote, esta es tu mejor opción.

Cómo cambiar el fondo de nuestro blog por una imágen

Posted by Unknown

0 Comments

Tag : Trucos Blogger

Hoy quiero enseñarle a cómo cambiar el fondo de nuestro blog por una imágen o cambiar la imagen de fondo actual por otra. Para ello ve a Plantilla | Edición de HTML y busca este código:

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor;
font-family: arial,verdana,helvetica,tahoma;
font-size: 100%;
width: 100%;
}

Es posible que tu código no se vea exactamente como este, ya que varía según su plantilla, lo importante es que localices el background que está dentro de body {
Ahora lo que hay que hacer es cambiar lo que está en rojo por este código:

background: url(URL de la imagen) no-repeat;
background-attachment : fixed;

Sólo cambia donde dice URL de la imagen por la dirección donde tienes alojada la imagen de fondo que vas a usar. Si quieres que el fondo se mueva cuando bajen la página con el scrollbar entonces omite la última línea del código.
Con ese código la imagen no se repetirá, pero si tu imagen es pequeña o un patrón (pattern) entonces elimina lo que está en negrita para que la imagen de fondo se repita.

Si sólo quieres cambiar el color de fondo en lugar de una imágen entonces sólo cambia el código de color, por ejemplo: background:#fffff; esto dará un fondo de color blanco.

Como poner un buscador en tu blog de blogger

Posted by Unknown

0 Comments

Tag : Gadget y Widgets

Esto es algo que todo blog debe tener... Piensa que si tienes muchos post publicados y aunque tengas todo bien etiquetado talvez se les dificulte a tus lectores encontrar alguna información que hayas publicado en el pasado.

Así que acá van tres formas de poner un buscador en el blog. El primero es muy simple, está basado en Javascript y el aspecto es muy sencillo.

Para agregarlo entra en Dieño | Añadir un gadget | HTML/Javascript. Y pega este código:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>

El resultado será este:

Y por último este buscador de Google, que a diferencia del anterior en este aparecen las casillas en el buscador sobre dónde queremos hacer la búsqueda. El código es el siguiente:

<form action="http://www.google.com/search" method="GET">
<input value="UTF-8" name="ie" type="hidden"/>
<input value="UTF-8" name="oe" type="hidden"/>
<table bgcolor="#FFFFFF">
<a href="http://www.google.com/">
<img border="0" alt="Google" src="http://www.google.com/logos/Logo_25wht.gif"/>
</a>
<input maxlength="255" value=""
name="q" size="15" type="text"/> <input value="Buscar" name="btnG" type="submit"/>
<font size="-1">
<input value="URL DEL BLOG"
name="domains" type="hidden"/><br/><input value=""
name="sitesearch" type="radio"/> la Web<input checked value="URL DEL BLOG" name="sitesearch" type="radio"/> NOMBRE DEL BLOG<br/>
</font>
</table></form>

Sólo debes cambiar los datos que están en color rojo por los tuyos y el resultado será este:

En la web Ayuditas Blogger

Como cambiar el orden de las entradas del blog de blogger

Posted by Unknown

0 Comments

Tag : Trucos Blogger

Como ya sabemos.... Los post (o entradas) del blog se ordenan automáticamente de los más nuevos a los más antiguos, es decir, de forma cronológica. Así que lo que podemos hacer para cambiar el orden en los post es editando la fecha de las entradas de modo que le pongamos la fecha que deseamos para poder así ordenarlas a nuestro gusto.

Para ello vamos a Entradas y damos click en Editar en la entrada a la que deseamos cambiarle el orden, luego buscamos al lado derecho donde dice Configuración de las entradas y damos click en Programar... Ahí cambiamos la fecha y la hora del post.

Si pones una fecha antigua entonces la entrada se bajará o se dejará de mostrar en la portada, y de forma contraria, si pones una fecha reciente la entrada se moverá hacia arriba.

Hacemos esto con todas las entradas a las que deseamos cambiar el orden y listo.

Como expandir un post de tu blog blogger

domingo, 18 de mayo de 2014

Posted by Unknown

0 Comments

Tag : Trucos Blogger

Hace poco tiempo estuve leyendo acerca de cómo poner la opción de leer más en un blog, y bueno, hice como veinte cambios y simplemente no quedaba. Luego me fijé que aunque se mostraba la opción, había posts que estaban tan cortos que no era necesario tener esa utilidad; hasta que me topé con un artículo de Ciudad Blogger en el que nos daba una alternativa, expandir post. Esta me pareció perfecta, pues además de que me quedó a la primera resuelve el problema de que eliges en cada post si quieres que aparezca expandir el post o no.

Para hacerlo entra en Diseño | Edición de HTML y marca la casilla Expandir plantillas de artilugios. Pega el siguiente código antes de </head>

<script type='text/javascript'>
//<![CDATA[
// Expandir entradas
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'none';
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
found = 1;
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
//]]>
</script>

Ahora busca este código:

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> 
</div>

Y reemplázalo por este:

<b:includable id='post' var='post'>
<div class='post hentry' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull("post-" + data:post.id + "");"' href='javascript:void(0);'>Seguir leyendo [+]</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull("post-" + data:post.id + "");"' href='javascript:void(0);'>Minimizar [-]</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> 
</div>

Guarda los cambios. Ahora cuando quieras que esta opción aparezca en un post sólo escribe lo que quieras que aparezca, y antes del texto que quieres que se oculte agrega esto:

<span id="fullpost">Aquí el texto que quieras ocultar</span>

Ver ejemplo aquí

Como crear un mensaje de alerta al entrar y salir del blog

Posted by Unknown

0 Comments

Tag : Trucos Blogger

Si quieres poner un mensaje de bienvenida en el blog o un mensaje de advertencia como el que se ve en el ejemplo entonces hacemos lo siguiente:

Vamos a poner esta alerta en el blog entrando en Diseño | Edición de HTML y pega antes de </body> lo siguiente:

<script language='JavaScript'>
alert("Aquí escribe tu mensaje");
</script>

Si quieres que el mensaje aparezca cuando el usuario abandona el blog entonces busca la etiqueta <body>
Y cámbiala por esta:

<body onunload='confirm("Aquí tu mensaje de despedida");'>

Si usas una plantilla hecha con el Diseñador de Plantillas de Blogger entonces busca esta línea:

<body expr:class='"loading" + data:blog.mobileClass'>

Y cámbiala por esta otra:

<body expr:class='"loading" + data:blog.mobileClass' onunload='confirm("Aquí tu mensaje de despedida");'>

Para muchos este mensaje de alerta puede resultarles muy molesto, así que recomiendo que sólo lo uses si es realmente necesario.

Convertir tu codigo HTML en XML para Blogger

Posted by Unknown

0 Comments

Tag : Trucos Blogger

Muchas veces, algunos de nosotros buscamos modificar nuestros blogs para que se vean mucho mejor para el publico pero nos topamos aveces con un problema "Nuestro código HTML" no es reconocido por la plantilla de Blogger, esto se debe a que las plantillas de blogger están basadas en XML y en algunas partes de esta sinos permite el código HTML este no nos muestra el elemento, este es el caso de lo bloques de Adsense.

ENLACE: Convertir Codigo HTML a XML

Como ocultar anuncios adsense en moviles

Posted by Unknown

0 Comments

Tag : Trucos Google

Muchas plantillas en la actualidad son "Responsive" por lo que se adaptan a muchos dispositivos moviles, pero nuestros bloques de adsense no hacen lo mismo.. por lo que al abrir nuestra pagina en un dispositivo móvil muchas veces vemos los anuncios cortados.. y pues esto a Google Adsense no le gusta mucho que digamos.

Para resolver este problema se tiene una solucion basada en JavaScript con condicionales if y else, esta solucion esta totalmente permitida por Adsense y esta dentro de las nuevas reglas impuestas.

¿Como solucionarlo?

Para esto remplazaremos los codigos de nuestros anuncios por estos:

-Este primer codigo hara que si el tamaño de la pantalla es mayor o igual a 400px mostrar adsense, de lo contrario no muestra nada:

<script type="text/javascript">
var width = window.innerWidth || document.documentElement.clientWidth;
if (width >= 400) {
google_ad_client = "ACA_ID_ADSENSE";
google_ad_slot = "ID_SLOT";
google_ad_width = 728;
google_ad_height = 90;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

- Ahora en este codigo un poco mas avanzado este codigo nos mostrara anuncio de 728x90 si la pantalla es mayor a 800px, uno de 300x250 si la pantalla es menor a 800 y mayor que 400, y uno de 468x60 si no coincide con estos tamaños especificados:

<script type="text/javascript">
var width = window.innerWidth || document.documentElement.clientWidth;
google_ad_client = "ACA_ID_ADSENSE";
if (width >= 800) {
google_ad_slot = "AD_SLOT";
google_ad_width = 728;
google_ad_height = 90;
} else if ((width < 800) && (width < 400)) {
google_ad_slot = "AD_SLOT";
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = "AD_SLOT";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

*REPITO: Estas modificaciones estan permitidas por Google Adsense según el nuevo reglamente establecido.

Gadget de los Últimos Comentarios en tu blog con efecto Slider

Posted by Unknown

0 Comments

Tag : Gadget y Widgets

Hoy haciendo unas pruebas pude añadirle exitosamente el gadget de últimos comentarios con el famoso efecto slider, y hoy lo compartiré con todos ustedes.

Vista Previa del gadget (lo pueden ver en el sidebar de blog ahora mismo).

Para añadir a sus blogs este espectacular gadget, solo debes ir a Diseño, Añadir Gadget, HTML/JavaScript y pega allí lo siguiente:

<marquee direction="up" scrollamount="3" style="background- text-align: left; width:280px;height:340px;border:0px solid #000000;padding:3px" onmouseover="this.scrollAmount='3'" onmouseout="this.scrollAmount='3'">
<br/><style type="text/css"></style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 15,
showAvatar = true,
avatarSize = 40,
roundAvatar = false,
characters = 60,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "https://lh3.googleusercontent.com/-RIC-7Z86S0E/UPYX-7IVLuI/AAAAAAAABTk/qx1fLgBjaJk/s40/user.png",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://nombre-de-tu-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=15"></script></marquee>
<style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0 0 15px 0;padding:0; background:none;width:100%} .w2b_recent_comments li{background:#A9D0F5 !important;padding:3px 4px 3px 0!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px 0; border:1px dashed #fafafa} .w2b_recent_comments li .avatarImage{padding:2px;border:1px solid #e7e7e7;background:#fff;float:left;margin:0 4px 7px 3px;position:relative;overflow:hidden}.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block} .w2b_recent_comments li span{text-shadow:1px 1px 1px #fff;margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;padding:2px 0 6px 0;line-height: 1.2} .w2b_recent_comments li a{color:#064f4c;text-shadow:1px 1px 1px #fff}.w2b_recent_comments li a:hover{margin-left:4px;}</style>

Ahora solo debes reemplazar la parte resaltada en azul por el nombre de tu blog y listo, guarda los cambios.

Es un truco muy fácil de agregar y que le dará a tu blog un toque de profesionalismo y elegancia único.

Cuéntame si te ha sido de utilidad y como te ha parecido este gran truco.

Cómo ampliar el tamaño de tu blog blogger

Posted by Unknown

1 Comment

Tag : Trucos Blogger

¡Hola a Tod@s! Cuando abrimos un blog, por defecto, blogger nos deja elegir alguna de sus plantillas, pero casi todas son muy estrechas. Yo cuando comencé elegí la plantilla "Sencilla" para poder modificar todo a mi gusto desde 0.

Blogger ha cambiado muchas veces la forma de modificar las características de nuestro blog, así que explicaré las 2 maneras que yo he visto para modificar el ancho del blog, así como el ancho de la barra lateral.

OPCIÓN 1

Vamos a Escritorio de Blogger y entramos en la opción Plantilla. Nos vamos a Personalizar

En personalizar nos encontramos con el apartado "Ajustar Ancho". Ahí nos enseña el tamaño total del blog y el tamaño de la barra lateral, la resta de esas cantidades más un pequeño margen, nos dará el tamaño de nuestra barra principal, donde se visualizan los posts.

Ahora podréis ponerle el tamaño que queráis. Para orientaros un poco con respecto a mi blog, yo tengo un ancho de 1050px con barra lateral de 300px

Una ves modificado le damos a "Aplicar al blog" que lo tenéis arriba a la derecha y ¡listo!

OPCIÓN 2:

Si os pasa como a mi y vuestro blog ya tiene algún tiempo, no se visualiza el tamaño en "Ajustar Ancho", por lo menos a mi no. Así que hay otra opción para modificar el ancho, en HTML

Nos vamos a Plantilla, opción HTML

Al abrir nos encontramos con la nueva mejora que ha hecho blogger en HTML, bueno mejora por decir algo, porque yo así de lío más. Desplegamos la primera flecha que encontramos y veremos todas las características básicas de nuestro blog.

Bajamos hasta encontrar el texto: #header-wrapper {

Este es el tamaño de nuestra cabecera que debe ser igual que el ancho total del blog, si no se nos quedará descentrada.

Más abajo encontramos:
#outer-wrapper { - Es el tamaño total del blog
#main-wrapper { - Tamaño de la barra principal
#sidebar-wrapper { - Tamaño de la barra lateral

Cambiamos el valor que tenemos dejando todo lo demás igual, los espacios y el px; Tenéis que tener en cuenta dejar un poco de margen, como veis yo dejo 70px de margen entre la barra principal y la barra lateral, para que no estén demasiado juntas.

¡Espero que os sea útil! Si queréis que os explique cualquier otro truco o tenéis alguna duda sobre Blogger y sus características ¡escribidme!

Como ocultar la barra de Blogger (Navbar)

Posted by Unknown

0 Comments

Tag : Trucos Blogger

Tal vez a algunos les parezca funcional dejar en su blog la barra superior de Blogger (navbar) , pero yo les recomendaria que por estética deberian eliminarla.

Ocultarla es muy sencillo, sólo debes ir a Diseño | Edición de HTML, y pegar después de </head> este código:

<style type="text/css">
#navbar-iframe {display: none !important; }
body .navbar {height: 0 !important}
</style>

Habiendo hecho eso habrás ocultado la navbar de Blogger. Así de simple.

Coloca un contador de visitas en tu blog

Posted by Unknown

0 Comments

Tag : Trucos Blogger

Tener el conocimiento de cuántas personas nos visitan es básico, así que te daré dos opciones para que conozcas el número de visitantes que tiene tu blog.

La primera es buscar en Google algún sitio que ofrezca contadores gratis, verás que hay muchísimas empresas que lo hacen. Una de las más completas y que es gratis es Histats, sólo debes elegir el diseño, proporcionar los datos de tu blog y copiar el código que te den.

Este código tienes que pegarlo en un elemento HTML/Javascript del blog. Para ello ve a Diseño > Añadir un gadget, selecciona HTML/Javascript y pega ahí el código que copiaste anteriormente. Eso es todo, coloca el gadget donde mejor te guste y listo.

Ahora bien, si quieres que nadie más que tú sepa el número de tus visitan

tes entonces te recomiendo que entres a Google Analytics, que no sólo hará un conteo de tus visitantes de modo oculto, sino que te dará informes detallados como las ciudades de donde te visitaron, el sistema operativo que usaron, el explorador de internet con el que lo hicieron, el promedio del tiempo en el que estuvieron en ella y mucho más.

Jugar con el buscador de Google

Posted by Unknown

0 Comments

Tag : Trucos Google

Quiero mostrarles alguno truquitos ya un poco viejos pero estoy seguro que la mayoría no los conoce, así que acá se los dejo para que se entretengan un rato con Google.

Mover logotipo de Google

Para hacer "bailar" el logotipo de Google debes hacer lo siguiente:
1.- Entrar a http://www.google.com/
2.- Borrar todo de la barra de direcciones.
3.- Pegar este código en la barra de direcciones y darle enter:

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

De este modo verás cómo el logo de Google se va de un lugar a otro. Por cierto que este truco funciona para muchas páginas que usen Java.

Goolge bailando