sábado, 20 de noviembre de 2010

Truco Entradas mas comentadas en Blogger

Bueno muchos de nosotros los bloggeros quisiéramos saber que entradas son más comentadas y son de interés para los visitantes.

Navegando por la red encontré este condigo que es de mucho interés para realizar este truco, bueno yo solo los guiare para su implementación y cualquier consulta, dejen sus comentarios.

 <script type="text/javascript">
    function pipeCallback(obj) {
    document.write('<ol style="text-transform: capitalize;">');
    var i;
    for (i = 0; i < obj.count ; i++)
    {
    var href = "'" + obj.value.items[i].link + "'";
    var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
    document.write(item);
    }
    document.write('</ol>');
    }
    </script>
    <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=e1f5a9b2248904d8b81f794c09353010&url=http%3A%2F%2Fsiguetublog.blogspot.com&num=5" type="text/javascript"></script>


Pasos a seguir:

Copiar el código y pegar en un gadget. “ ir a añadir un gadget, luego añadimos HTML/Javascript”.

Bueno en el código debemos de tener en cuenta esto, cambiar “siguetublog” por el blog de ustedes.

Entonces buscamos en el código esta sección &num=5 que quiere decir el numero 5 las entradas que mostraremos, para ello podemos remplazar por cualquier numero que ustedes deseen mostrar.

crear y alojar un Favicon

 Aquí otra vez con un truco muy sencillo y que muchos lo usamos para poner un icono que identifique a nuestro blog o web en la barra de direcciones que se encuentra en la parte superior del navegador.
Se llama favicon y se identifica con un pequeño icono al costado de la dirección de nuestro blog, Aquí los muestro.






Para poder implementar este truco debemos de seguir estos pasos.

Encontré una página donde podemos alojar su imagen gratuitamente y para ello recomiendo usar para seguir la implementación del truco. La página es IconJ.

Paso 1: entrar en IconJ.

Paso 2: tenemos que subir la imagen de nuestra PC “clic en Examinar para subir imagen” y luego dar clic en "Upload Now".










Paso 3: bueno aquí nos mostrara dos links que se genera al subir la imagen, nos vamos directo a la opción dos que se muestra y copiamos el link que esta en “Host It at IconJ.com: (Direct Link)”.


Paso 4: bueno en esta parte tenemos que añadir el código que copiamos, para ellos nos vamos directo a edición html, luego buscamos el código <b:skin><![CDATA[/*. Y justo antes de ese código pegamos el links que hemos copiado en la paso 3.

miércoles, 17 de noviembre de 2010

Poner title y alt a un texto o imagen

Bueno en esta ocasión que me pongo a escribir es para enseñarles a usar algunos códigos de html, que sirve para resaltar mas los links o también podría ser un archivo o una imagen en todo caso sirve para poner información adicional sobre dicho enlace o imagen, la primera es‘title’ y ‘alt’, bueno vamos al ejemplo tanto en un texto normal con un link y también en una imagen.

Puedes ver la funcionalidad del truco cuando pones el cursor sobre el enlace o la imagen.

ejemplo 1 con un link.

<a href="http://siguetublog.blogspot.com/" target="_blank"title="sigue tu blog " alt="sigue tu blog">ayuda para tu blog</a>


ayuda para tu blog

ejemplo 2 con imagen.
sigue tu blog

Botón "Subir Arriba"

Para todos mis amigos bloggeros, en esta ocasión quiero presentar un código para subir arriba dentro del blog, quiere decir cuando el navegante se encuentra  abajo en la parte inferior, esto hace a que el usuario pueda volver a la parte superior, y en caso que utilicen adsense, se incrementa un poco la probabilidad de los clics.

Aquí dejo el código que es muy bueno y sobre todo es con imagen para que sea un poco atrayente, bueno en este caso la url de la imagen pueden cambiarla al de su agrado y el texto también, espero que sea de gran ayuda.

<a href='#' style='display croll;position:fixed;bottom:0px;right:0px;' title='volver arriba'><img src="http://img177.imageshack.us/img177/3782/topchicas.gif" /></a>

Presten atención como usarlo, aquí detallo los pasos a seguir:

Paso 1: Entrar en diseño
Paso 2: luego Añadir un Gadget
Paso 3: añadir HTML/Javascript
Paso 4: copiar el código.
Paso 5: clic en guardar

martes, 16 de noviembre de 2010

Eliminar o modificar barras de separación

Aquí vamos con otra entrada mas, para todos aquellos bloggeros que nos les gusta mucho la línea de separación que se encuentra en la columna de cada blog.

Bueno esto se puede modificar y en muchos casos ocultarlo.
Para esto se debe seguir los pasos:


Paso 1: ir a edición html
Paso 2: luego buscar estos códigos :
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;


Aquí va el detalle para los que quieren ocultarlo o eliminar la línea de separación, Cambia el valor border-bottom:1px por border-bottom:0px.


Para las personas que les gusto esta bien lo dejan ahí, pero si por ahí alguien quiere ver un poco mas resaltante esta línea solo tiene que cambiar border-bottom:0px el 0px por 3px.

Codigos html para generar texto en movimiento

Aquí los dejo algunos códigos html que pude encontrar en varios blogs, son códigos muy utilizados en nuestra vida diaria en cuanto se refiere a los bloggeros y otras personas que navegan en el internet, espero que sea de mucha utilidad.
Codigo 1




Texto moviendose
Codigo 2

Texto moviendose en otra direccion
Codigo 3


texto con fondo y movimiento

Eliminar Navbar (Barra de Blogger)

Muchos de nosotros los que trabajamos con blogger tenemos la barra de blogger en la parte superior y a algunos de nosotros les gusta eso y a otros no, bueno para los que no les gusta la barra de blogger, esta dedicado este truco para eliminar la barra.
Entonces presten atención copiar el código que les doy aquí y luego pegar antes de la etiqueta <head>.


<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>


Pasos a seguir:
Paso 1: ir a edición html
Paso 2. Buscar la etiqueta <head>
Paso 3: pegar antes de la etiqueta <head> el código dado.
Paso 4: guardar plantilla.


ver la imagen donde se pega el codigo:

lunes, 15 de noviembre de 2010

Poner una imagen como cabecera del blog

OPCION 1
Lo primero que debemos de hacer es tener nuestra imagen alojada en algún servidor que aloja archivos y sobre todo gratuito estaría mejor, entre los que uso y recomiendo es imaxenes, bueno cuando tengas la imagen alojada copias la ruta, y luego te diriges a blogger, haces un clic en plantilla y luego en edición html.
Buscas el siguiente código.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Entonces luego añades tu url o la ruta de tu imagen, para que puedas visualizarlo como fondo, te ubicas dentro del bloque header, en mi caso yo elimine los bordes para eso elimine la linea que contenia border: 1px solid $bordercolor y en esa línea puse el código background-image: url para poder agregar la url de mi imagen, bueno el código siguiente debe quedar así.

#header-wrapper {
width:660px;
margin:0 auto 10px;
}
#header {
margin: 5px;height:100px;
background-image: url(http://RUTA  DE TU IMAGEN);
text-align: center;
color:$pagetitlecolor;
}

Guardas todos los cambios que hiciste y listo ya puedes tener una imagen como cabecera en tu blog, pero claro no olviden el detalle del tamaño tiene que ser de acuerdo a su blog, para ello les paso el significado de esto, ancho-width, alto-height que son manejables de acuerdo al tamaño.
 Cualquier comentario hágalo llegar.


OPCION 2
Claro todo esto se puede realizar de otra manera, entrando blogger, clic en diseño, luego en agregar un gadget, encontrar cabecera de pagina y añadirlo, pero por defecto muchas veces esta agregado y solo entras al gadget, clic en editar y agregas la imagen. Pero bueno todo este proceso estaré publicando mas detallado en otra entrada.

Video Tutorial para crear un blog en Blogger

Como nuestra primera entrada en ayuda para blog aquí en siguetublog, presentamos un video tutorial con todos los pasos detallados, para crear un blog optimizado, claro todas las personas que desean seguir este video tutorial, deben de tener en cuenta que primero se debe tener una cuenta de correo electrónico, de preferencia en Gmail.



Entradas mas comentadas