Convertir tu codigo HTML en XML para Blogger

domingo, 18 de mayo de 2014

Posted by Unknown

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