Tiempo de Optimizacion…

Es verdad, he descuidado el blog un poco, esta todo desordenado, algunos trucos están dando fallo, pensare en optimizar desde el primer truco hasta el ultimo… y también optimizarme un poco a mi para poder dar divertidas y mejores explicaciones.
Espero terminar en un par de días, así que no se preocupen si no publico algo en varios días, prometo compensarlos con nuevos y geniales trucos, estos son algunos de los blogs que pueden visitar en mi ausencia:

http://masairebis.blogspot.com
http://amox-blogger.blogspot.com
http://andercismo.blogspot.com/search/label/BLOGGER%20BETA
http://aprendiendoenlared.blogspot.com/search/label/Trucos%20blogger
http://betatemplates.blogspot.com
http://blogandroll-xosse.blogspot.com/search/label/trucos%20para%20blogger
http://www.bricoblogdesergi.blogspot.com
http://elescaparatederosa.blogspot.com
http://gemablog-.blogspot.com/search/label/Trucos%20beta
http://icaronoctambulo.blogspot.com/search/label/Utilidades%20Blogger
http://noticias-blogs.blogspot.com/search/label/Utilidades
http://recursos-blog.blogspot.com
http://srwolfman.blogspot.com
http://www.todoparablog.blogspot.com
http://vagabundia.blogspot.com/search/label/Blogger

PD: No estaré respondiendo e-mails hasta mi regreso, esperen me

Ocultar la fecha de los posts…

Este truco me llega por mail de parte Ochentero Fanatico, y sus blogs:

El Santuario de Morrison

Aventuras de Kakaroto

Hola Leonel pues este truco intente buscarlo en la red pero era imposible,bueno si pero solo del antiguo blogger y no coincidia con el actual,y se me ocurrió a raíz del truco como ocultar el navbar,en otras palabras es sencillísimo,mira lo único que hize fue colocar:

visibility:hidden

¿En donde?..Bueno dirígite a la plantilla sin artilugios y ubica este código:

/* Posts
——————————

—————–
*/
h2.date-header {
margin:1.5em 0 .5em;
visibility:hidden;
}

Como verás el código que agregue esta en rojo,ese debes colocarlo tal como te lo muestro.

Y de esta manera ocultas la fecha.La explicación salta a la vista traducido significa: Visibilidad:Oculta,es decir la fecha esta oculta.Pero no quiere decir que la fecha se transgreda solo esta oculta.

Saludos hermano, si teneis algun truco enviamelo al mail, y yo con gusto lo publicare, y con los links hacia tus blogs… Que te diviertas…

Style Sheet Switcher

El cambia estilos por fin!! , primero le voy a contar mi historia con este efecto…. Primero y antes de comenzar este blog, habia visto este efecto en un blog, le pregunte a su creador como se hacia, pero no me lo quizo decir (eso me dio un poco de coraje) entonces decidi buscar por mi propia cuenta y entonces lo encontre! se llamaba cambiar estilos dinamicamente con cookie pero me fue muy dificil realizarlo, entonces decidi buscar otro metodo, y de repente hay estaba: en Dynamic Drive, con su truco de Style Sheet Switcher, pero no le entendi su ingles tan complicado, asi que decidi seguir buscando, y encontre el de PurpleMoggy’s, y claro que le entendi, con un ingles casero es muy facil , y ahora os paso a explicar (porque despues se aburren):

Primero a lo primero, necesitamos crear nuestros archivos CSS, damos CTRL+U y copiamos todo desde body hasta un poco antes de la etiqueta style, copiamos y lo pegamos en el bloc de notas, pero lo guardamos con la extension CSS, algo asi: tuarchivo.css, y lo subimos en algun sistema de alojamiento de archivos, en este caso yo he usado Google Pages, necesitamos crear al menos dos archivos CSS, uno para dejar el blog con el diseño original y el otro donde cambiamos el diseño, los colores del blog, las imagenes y todo…

Ahora nos dirigimos a:

Plantilla–Edicion de HTML

Antes del </head> colocamos el siguiente codigo:

<link href=’http://leonelhack.googlepages.com/Default.css‘ rel=’stylesheet’ type=’text/css’/>
<link href=’http://leonelhack.googlepages.com/res8×6.css‘ media=’screen’ rel=’alternate stylesheet’ title=’res8×6‘ type=’text/css’/>

<script src=’http://yggomelprup.googlepages.com/styleswitch.js’ type=’text/javascript’/>

En azul se encuentra la URL de los archivos que debeis cambiar por las vuestras, guardamos los cambios y listo.

Ahora nos dirigimos a:

Plantilla–Elementos de la pagina–Añadir un nuevo elemento de pagina–HTML/JavaScript

Y añadimos lo siguiente:

<a href=”javascript:chooseStyle(‘none’, 365)”>1024X768</a>
<a href=”javascript:chooseStyle(‘res8×6‘, 365)”>800X600</a>

Donde res8×6 tiene que coincidir con title=’res8×6‘ del codigo anterior. El resultado quedaria la opcion de elegir la resolucion de del blog.

Muchos otros blogueros han realizado este hack y con mejor explicacion que la mia asi que si no me entendieron visitad los siguientes blogs:

Blog and Roll: Black or White
Ayuda&Kaos: Elegir el tema de la plantilla (Swicht Theme)
Vagabundia: Blogger con ancho variable
PurpleMoggy: Plantillas Prediseñadas con el Swicht Theme
Beautiful Beta: Style Switcher

Yo he decidido cambiar los aburrido links por algo de CSS para cambiar la resolucion del blog, claro que el CSS lo saque de Vagabundia espero no te moleste JMiur por copiartelo. Ahora si no he colocado algun blog, si no he respondido algun mail en mas de una semana, por favor enviarme otro con un insulto diciendome lo que piensas, espero que te haya servido Gem@ porque esto es lo que tanto me pedias, y ya lo habian realizado muchos otros blogs

CSS ¿Que?

CSS ¿como se come eso?, pues con la cuchara no? jaja, antes de seguir avanzando en los trucos para optimizar nuestros blogs, debemos aprender esto…

El blog de Tuneando lo explica de una forma, pero ahora yo lo explico de otra

CSS proviene del ingles Cascading Style Sheets, en español vendria a significar hojas de estilos en cascada, es usado para definir la presentación de un documento estructurado escrito en HTML o XML, mas facil, sirve para definir cada uno de los elementos de nuestros blogs, los colores, la posicion de la sidebar, el ancho del header, el header, los codigos para hacer las tabs, casi todo…

Entonces ¿Cual el CSS de mi blog?

Pues el CSS de Blogger se lo logra observar cuando visitamos nuestro blog, y presionamos las teclas CTRL+U (en firefox) o bien vemos el codigo fuente de la pagina, el CSS se va desde:

body {

y termina antes de:

</style>

Comunmente es empleado para separar el contenido del diseño, haciendo más fácil la maquetacion de las páginas web. El contenido puede cambiar, pero el diseño seguirá siendo el mismo.

Ahora con esta pequeñisima explicacion (porque la de Wikipedia es larguisima), muy pronto podemos avanzar a realizar mejores trucos, nos vemos pronto…

¡Te necesitan!

Pues no, este no es un truco, sino una forma de apoyar a la comunidad bloguera en sus proyectos, y como no quiero equivocarme en la explicación de como funciona el proyecto, copio y pego:

En nuestra continua búsqueda de aplicaciones para mejorar los blogs, estamos ideando un sistema para la conversión (cuasi-automática) de plantillas de blogger 1 a blogger 2 de una manera poco “dolorosa”. Para probar la aplicación, necesitaríamos recibir el mayor número de plantillas (blogger 1) posibles, con todos los script y cachivaches personalizados que contengan.

Si quieres ayudarnos y participar en esta experiencia, por favor, envía nos tu plantilla a la siguiente dirección:

tuneando.blogs[ARROBA]gmail.com

Haremos lo posible (si todo marcha según lo previsto) para devolverte la plantilla en formato blogger 2 en cuanto terminemos nuestra aplicación.

Gracias por adelantado

Genial seria no?, un proyecto realizado por “La Ceci” y el “Sr. teclas” de Tuneando Blogs, ojala todo les vaya bien, gracias a ustedes. Un Saludo, Leo

Como ver el blog en distintas resoluciones

Existen veces en la que no sabemos como se vera nuestro blog en otra computadora con distinta resolución, por ejemplo este blog se ve genial en una resolución de 1024X768, pero se ve fatal en una de 800X600 (por ahora), para poder probar como se vería el blog tenemos una muy buena utilidad online llamada: “Web Page Screen Resolution Simulator“, esta utilidad la he encontrado en Recursos Blog. Ahora he de trabajar para que este blog se vea genial en una resolución de 800X600

¿Que es un Feed despues de todo?

Feed, fed, fid, o como quieran llamarlos (aunque su nombre es Feed) los vemos en casi todos los blogs, en casi cualquier lado, nos estan inundando, nos estan invadiendo, debemos hacer algo para evitar la invasion, jaja… Un usuario de este blog me ha pedido que explicase ¿que es un feed?, y como soy muy generoso…

Un feed… un feed?, que es un feed?, pues no sabria como definirlo asi que vamos a acudir a la Wikipedia…

La palabra feed es un anglicismo cuyo significado original es alimentar. Se emplea para denominar a los documentos con formato RSS o Atom, basados en XML, que permiten a los agregadores recoger información de páginas web.

Los feeds suelen incluir titulares de noticias o artículos, a menudo acompañados de un resumen. Son muy utilizados en los weblogs o bitácoras, así como en prensa electrónica.

Este término podría traducirse como fuente, canal o alimentador dado que su función es el suministro de información a los usuarios, aunque en la actualidad no existe una traducción bien establecida y por ello suele usarse el término en inglés.

Okey espero que ya sepan que es un feed (porque sino…), Ahora el feed de los posts de nuestro blog viene por defecto con la siguiente URL:

http://elnombredetublog.blogspot.com/feeds/posts/default

El feed de los comentarios de nuestro blog seria la siguiente URL:

http://elnombredetublog.blogspot.com/feeds/comments/default

Un blog posee varios y numerosos feeds (que no pienso nombrar ahora), a los feeds se los identifica con una imagen generalmente Naranja y con unas especios de ondas hacia arriba, si necesitan mas informacion dejadme un comentario, que yo tan generoso se las proporcionare

Cambiar el color del fondo del blog aleatoriamente

Con todos esos trucos que hay para hacer que nuestro blog use tecnicas aleatorias, pues este no es la excepcion, les hablo de cambiar el color del fondo del blog aleatoriamente, o mejor dicho cada vez que se actualize el blog (presionando F5), este truco lo encontre en Mas Aire su creadora Llara, Vienna, Junio, o como ella quiera llamarse (quizas podamos hacer un truco aleatorio con sus nombres ), el post lo podemos encontrar aqui.

Ahora pasemos a la explicacion(que aburrido )…

Nos dirigimos a:
Plantilla–Edicion de HTML

Buscamos este codigo:

body {

Y despues de este colocamos:

<script>

//Ingresar lista de colores:

var bgcolorlist=new Array("#DFDFFF", "#FFFFBF", "#80FF80", "#EAEAFF", "#C9FFA8", "#F7F7F7", "#FFFFFF", "#DDDD00")

document.bgColor=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]

</script>

Guardamos y listo , ahora nosotros podemos escoger el color que nos de la gana, en esta pagina podemas elegir toda una gama

PD: En los proximos dias estare contestando los mails, comentarios, optimixando algunos posts, etc…(soy superman ). Diviertansen

Añadir tu pagerank de google a tu web

Les gustaria colocar esa estadistica de pagerank tan famosa que vemos en un chingo de webs?? pues sanshiromano al rescate, encontre una web que hace esto y es de una manera bien facil, ud entran a la pagina:

http://www.mipagerank.com

Y en la parte inferior hay una opcion en amarillo que dice lo siguiente:
“Pagerank en tu web”
Ahi tienen que meter su direccion y les generara un codigo que copiaran y pegaran donde se les inche, si todo sale bien el asunto quedaria mas o menos asi, este pagerank es el de mi blog:

Realmente este codigo no hace nada genial, simplemente es para presumir cuanto los quiere papa google jejeje

salud y rock

Etiquetas recargadas con ajax

Hemos vuelto, y mas recargado que nunca (que mentiroso), despues de unos dias fuera de esto, he vuelto, por consiguiente he dejado de responder algunos mails y comentarios, prometo responderlos lo mas pronto posible. Ahora pasemos al hack…

Como pueden ver en la barra lateral (sidebar) izquierda se encuentran las etiquetas, si damos click en alguna de ella, no recargara la pagina sino parte de ella, solamente las etiquetas, mostrando los ultimos en primer plano, y los demas seguidos por un link hacia los demas(tecnologia AJAX), este hack nos sirve para mejorar la interaccion del blog con el usuario, el post original lo podemos encontrar aqui.

1. Click en Plantilla–Edicion de HTML–Marcamos la casilla expandir la plantilla de artilugios
Buscamos el </head> y antes de este colocamos el codigo siguiente:

<style type=’text/css’>
#indicator {
position:fixed;
z-index:1000;
padding:15px 0;
top:40%;
background-color:#FFFFFF;
border:1px solid #000000;
width:176px;
left:50%;
margin-left:-88px;
text-align:center;
}
#search-result {
border:1px solid #AAAAAA;
padding:10px;
padding-bottom:30px;
font-size:85%;
}
.search-result-meta {
background:#EFEFEF;
padding:2px;
}
.search-result-meta img {
border-width:0;
vertical-align:
text-bottom;
}
.search-title{
font-size:1em;
padding-bottom:3px;
font-weight:bold;
text-align:left;
text-decoration:underline;
}
.search-cat{
display:block;
padding:3px;
font-size:1em;
margin-top:5px;
margin-bottom:5px;
border-bottom:1px solid #C0C0C0;
font-weight:bold;
}
.search-close {
color:silver;
float:right;
border:1px solid #F5F5F5;
margin-top:10px;cursor:pointer;
}
.search-result-nav {
font-size:1.4em;
font-weight:bold;
padding:5px 0pt;
text-align:center;
}
</style>

<script src=’http://bloggerhacked.googlepages.com/prototype.js’ type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
// Parametros Personalizables por el Usuario
// ----------------------------
// maxresults - Numero de resultado de mostrar por pagina
// navFlag - Poner Navegacion ON o OFF. Dar 1 para ON y 0 para OFF.
// feedLabel - Text to show for the label feed link.
// catLabel - Etiqueta para categorias.
// closeLabel - Etiqueta para boton Cerrar. Tu puedes usar hypertexto tambien.
var maxresults = 5;
var navFlag = 1; //ON por defecto
var feedLabel = "Suscribir a";
var catLabel = "Categoria:";
var closeLabel = "Click para cerrar";
//]]>
</script>
<script src=’http://bloggerhacked.googlepages.com/ajaxlabels.js’ type=’text/javascript’/>

Si tu conoces de CSS puedes modificar el widget para que luzca bien.

2. Buscar esta linea de codigo en tu HTML:

<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>

Y reemplazar el codigo por este:

<b:loop values=’data:post.labels’ var=’label’>
<a href=’#sres’ expr:onclick=’”javascript:getCat(\”" + data:label.name + “\”,null)”‘ rel=’tag’><data:label.name/></a>

3. Opcional. Si tu ya tienes las etiquetas en tu plantilla:

Buscar este codigo:

<b:if cond=’data:blog.url == data:label.url’>
<data:label.name/>
<b:else/>
<a href=’data:label.url’><data:label.name/></a>
</b:if>

Reemplazar por este:

<b:if cond=’data:blog.url == data:label.url’>
<data:label.name/>
<b:else/>
<a href=’#sres’ expr:onclick=’”javascript:getCat(\”" + data:label.name + “\”,null)”‘ ><data:label.name/></a>
</b:if>

4. Guarda tu plantilla.

5. Añade el siguiente Widget a tu blog

<div style="display:none;"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Cargando…</div> <p> <div style="display:none;"><a name="sres"></a> <div class="search-close">document.write(closeLabel);</div> <p> <div></div> <p> <div class="search-close">document.write(closeLabel);</div> </div> <p>

Guardamos el Widget. Disfrutenlo, espero os guste