Archive for septiembre 2010

los contadores en ocaciones hacen ver a una página mas popular o con muy buen desempeño por eso en esta ocacion les mostrare este codigo para que pongan en su pagina un contador de visitas y comentarios.
Aqui la codificacion:

<span style="font-weight:bold;">Este blog tiene</span> <script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script><script src="url de tu blog/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> entradas y <script src="url de tu blog/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> <span style="font-weight:bold;"> comentarios.Gracias!</a> </span>

Publicado (con datos todo al blog):

Este blog tiene entradas y comentarios.Gracias!

Que tal despues de ausentarme unos dias traego esta pequeña codificacion pero que talvez a muchos de ustedes les va a interesar.
¿han visto que muchas webs tienen un texto que se desplaza de un lado a otro asi como este?

mi web...

bueno aqui tengo la codificación <marquee> tu texto</marquee>

si quieres editarlo un poco para que se ajuste a tu web aqui tengo unas opciones:

bgcolor = "codigo de color" Indica el color del fondo de la marquesina
direction = left / right Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha
                  (right)
height = num o % Indica la altura de la marquesina en puntos o porcentaje en función de la ventana del                             navegador
width = num o % Indica la anchura de la marquesina en puntos o porcentaje en función de la ventana del                          navegador.

Ejemplo terminado:
*codificacion:
<marquee bgcolor="#3308C2" direction=right  height=10% width=20%> todo al blog </marquee>

*publicado:
todo al blog

Que tal gente en esta ocacion explicare algo muy básico pero que no todos sabemos
¿Como hacer un hipervinulos nosotros mismos? y saber editarlo...


Entonces empecemos:
lo primero y lo que siempre debe de lleva cualquier hipervinculo es "<a href=" (sin comillas, "<" es para la apertura, "a" viene siendo un ancla asi como las que se usa en programas como word etc., y el "href" es la abreviatura del inglés Hypertext Reference).
 Despues de eso sigue "http://www.nombredetublog.com" (esta si incluye las comillas, la direccion que se pone es a la que queremos que nos envie al momento de darle clic).
Aqui es donde puede variar Tenemos  2 opciones
*no agregar nada (al momento de darle clic se abrira en la misma ventana nuestra página solicitada)
*usar TARGET="_new" (se abrira la página solicitada en una nueva ventana)

 Ya cuando decidimos como queremos que abra simplemente le agregamos
>texto que quieres que se muestre</a> 

y asi quedaria nuestro hipervinculo:

*   <a href="http://www.nombredetublog.com">texto que quieres que se muestre</a> 
*con target  <a href="http://www.nombredetublog.com" TARGET="_new">tu texto </a>

lo pegas donde quieras y ya tienes un hipervinculo creado por ti mismo 

Unos ejemplos ya terminados


* Clic AQUI para mostrar

*con target Clic AQUI para mostrar

Que tal, el día hoy muy temprano andaba buscando la forma de poner post relacionados debajo de un post usando codificación y si lo encontre pero para mi sorpresa es muy tedioso y probablemente muchos se revuelvan así que seguí buscando y recordé una página que hace exactamente lo mismo pero solo que esta la agregas como un gadget, la pagina se llama linkwithin 


primer paso:
 una ves que entraste a la pàgina te va a pedir que ingreses los siguientes pasos
  *Email: (tu correo)
  *Blog Link:  (el link de tu pagina, ejemplo http://nombredetublog.blogspot.com/
  *Platform: (quiere desir en donde tienes tu pagina ejemplos Blogger, wordpress-version gratuita, etc.
  *Width: (la cantidad de relacionados que quieres que aparescan)
   teniendo todos los datos llenos damos clic a Get Widget

Segundo paso:
ya que le dimos clic en Get Widget, nos va a aparecer los pasos para instalar el gadget (si por alguna causa cerraste la pagina este es la direccion donde lo instalas Clic Aqui) y nos van a aparecer dos opciones:

 *Seleccionar un blog: (en caso de que tengas mas de uno selecciona en cual quieres que aparesca)
 *Título: (es el nombre que va a apreser en la pestaña diseño)

Damos clic en añadir artilugio y listo tu gadget de post relacionados esta puesto en tu blog

Banner es lo que mejor conocemos como publicidad por Internet, consiste en atraer visitas a un sitio poniendo una imagen o un texto para atraer a los usuarios.
Los banners son creados a partir de imágenes (gif o jpeg), o también animaciones creadas por tecnologías como Java, adobe shockwave y flash, esto para hacerla mas llamativa.

El tamaño clásico de un banner es de 468 x 60 (Ver ejemplo)

Otros ejemplos de tamaño:

120 x 120 - (ver ejemplo clic AQUÍ )
600 x 120 -(ver ejemplo clic AQUÍ )
120 x 60 - (ver ejemplo clic AQUÍ )

Consejos:
*Procura poner una frase para que las personas que vean el banner se sientan atraídas a él,
  no solo se trata de mostrar tu "marca" o "logo".
*si haces una animación procura no saturar mucho en imágenes/tiempo por que puede afectar el peso del archivo y eso   hace mas lenta la pagina.
*si eres nuevo en esto y quieres un lugar donde poner tu banner, pregunta a otras webs si puedes hacer un             intercambio de banners esto puede resultar muy bueno por que es una ayuda para ambas partes.

Este tema hace una combinacion bastante buena de colores morados
su forma es de 3 columnas, 2 las usa para los post y una al lado derecho para que pongas el contenido que desees, por lo que se que le gustara a mas de una persona.


Descarga: Clic AQUI

Este tema de la chica de disney popularmente conocida por Hannah Montana es especial para aquellos fanaticos del programa de television. 


Descarga: Clic AQUI

1 Ingresamos a ésta pagina http://www.html-kit.com/favicon/ 
subimos la imagen que vamos a querer de favicon y editamos las con las opciones que te da la página. 
Despues de eso descargamos el paquete con los 2 favicons el estatico y el animado

2 Ya descargados tenemos que subirlos a algun sitio y que mejor que a http://img1.imageshack.us// 
localizamos el codigo Url que te da al subirlo.  

3 Nos metemos a Diseño> Edición de HTML y en la codificacion buscamos esta linea o codigo

<title><data:blog.pagetitle><title> 


 y despues de estalinea pegamos el siguiente codigo:

<link href='http://tufavicon.png' rel='shortcut icon' type='image/x-icon'/>
<link href='http://tufavicon.png' rel='icon' type='image/png'/>


Guardamos la plantilla y listo 

 

 

En esta ocacion mostrare como poner un pequeño banner y un cuadro de texto con el codigo para que te puedan enlazar en otras webs

Primer paso: Crear el banner

puedes crearlo tu mismo con ayuda de programas como photoshop o fireworks este ultimo es mas amigable en su diseño o puedes buscar una pagina que te ayude a crear uno
*Si creaste tu banner sugiero subirlo a imageshack.us porque vas a necesitar la url


Segundo paso: añadirla al blog

para eso tenemos que ir a Diseño> Elementos de la página y agregaremos un Widget HTML/Javascript en la parte donde queremos el banner.

Tercer paso: pegar el codigo
ya que agregamos el widget dentro agregamos estos dos codigos

Codigo 1

<a href="http://TUBLOG.blogspot.com"><img src="URL de tu banner"/></a><p>

Codigo 2

<h2 class="sidebar-title">Código para enlazarme</h2>
<textarea rows="3" cols="25" class="code" wrap="off"><a href="http://TUBLOG.blogspot.com " target="_blank">
<img src="URL de tu banner"/></a></textarea><p></p>

puedes cambiar los valores de rows y cols
*rows es para hacerlo mas largo
*cols es para hacerlo mas ancho

guardamos y listo


Aqui la muestra de como queda



En ocaciones el gadget que te ofrece blogger deja de funcionar pero eso en esta ocacion les muestro este gadget.
Instrucciones 
*copias el codigo
*vas a Diseño > Elementos de la pagina 
*creas un nuevo gadget (en el lugar donde quieres ubicarlo)
*seleccionas HTML/Javascript 
*pegas el codigo 
*guardas los cambios y listo  

Este es el codigo:

<!-- Script de los comentarios recientes -->
<script type="text/javascript">
function showrecentcomments(json) {
for(var i=0; i < a_rc; i++) {
var b_rc=json.feed.entry[i];var c_rc;
if(i==json.feed.entry.length)break;
for(var k=0; k < b_rc.link.length; k++) {
if(b_rc.link[k].rel=='alternate') {
c_rc=b_rc.link[k].href;break;
}
}
c_rc=c_rc.replace("#","#comment-");
var d_rc=c_rc.split("#");
d_rc=d_rc[0];
var e_rc=d_rc.split("/");
e_rc=e_rc[5];
e_rc=e_rc.split(".html");
e_rc=e_rc[0];
var f_rc=e_rc.replace(/-/g," ");
f_rc=f_rc.link(d_rc);
var g_rc=b_rc.published.$t;
var h_rc=g_rc.substring(0,4);
var i_rc=g_rc.substring(5,7);
var j_rc=g_rc.substring(8,10);
var k_rc=new Array();
k_rc[1]="Ene"; k_rc[2]="Feb"; k_rc[3]="Mar"; k_rc[4]="Abr";
k_rc[5]="May"; k_rc[6]="Jun"; k_rc[7]="Jul"; k_rc[8]="Ago";
k_rc[9]="Sep"; k_rc[10]="Oct"; k_rc[11]="Nov"; k_rc[12]="Dic";
if("content" in b_rc){
var l_rc=b_rc.content.$t;
} else if("summary" in b_rc) {
var l_rc=b_rc.summary.$t;
} else var l_rc="";
var re=/<\S[^>]*>/g;
l_rc=l_rc.replace(re,"");
if(m_rc==true)document.write(k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');
document.write('<li><b>' + b_rc.author[0].name.$t + '</b>');
if(n_rc==true)document.write(f_rc);
document.write(':<br/>');
document.write('<a href="' + c_rc + '">');
if(l_rc.length < o_rc) {
document.write(l_rc);
} else {
l_rc=l_rc.substring(0,o_rc);
var p_rc=l_rc.lastIndexOf(" ");
l_rc=l_rc.substring(0,p_rc);
document.write(l_rc+'&hellip;');
}
document.write('</a></li>');
}
}
</script>

<script type="text/javascript">
var a_rc=6;
var m_rc=false;
var n_rc=false;
var o_rc=60;
</script>

<script src="http://TUBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
<!-- Fin del script de los comentarios recientes -->


donde dice TUBLOG tienes que poner la dirección de tu blog.

var a_rc=6; controla la cantidad de comentarios recientes a mostrar. Se debe modificar el número 6.

var o_rc=60; controla la cantidad de carácteres que habrá en cada comentario reciente. Se debe modificar el número 60



Fuente: google support

Este tema es de 4 columnas es ideal para aquellos que sienten que no tienen espacio en una simple pàgina, su diseño es muy elegante porque aunque tiene muchas columnas estas estan perfectamente ubicadas.


Descarga: Clic AQUI 

Este tema en base a rojo tiene un diseño simple y elegante que podria ser del agrado de muchos, tambien por ser de 3 columnas puede ser una opcion verdaderamente aceptada

Descarga: Clic AQUI 

 

Si con tener tu computadora con el sistema operativo esta es tu oportunidad para usar este tema con el estilo de Win-7 

descarga: Clic AQUI

Este tema de 2 columnas tiene una combinacion de colores oscuros que puede resultar agradable para muchas personas.


descarga: clic AQUI

Este tema para blogger es para aquellos que les gusta el video juego 
o simplemente les gusta la forma del blog ya que es de 3 columnas y el diseño esta bastante interesante.



descarga: Clic AQUI


Uno siempre se pregunta como pusieron varias cosas en las webs? bueno ahora en esta ocacion les voy a enseñar como poner una nube de etiquetas en forma de esfera con movimiento. 

Lo primero es ir a diseño >edicion html y donde viene toda la codificaciòn buscamos la siguiente
linea  <b:section class='sidebar' id='sidebar' preferred='yes'>
ya encontrada la linea, abajo pegamos lo siguiente:


<b:widget id='Label99' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;object type="application/x-shockwave-flash" data="http://ciudadblogger.hostzi.com/tagcloud.swf" width="190" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://ciudadblogger.hostzi.com/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>



Ahora podemos personalizar nuesta nube con los datos que están en color rojo:
* Nube de etiquetas, es el nombre del gadget
* 190 es el ancho
* 200 es el alto
* #ffffff es el color de fondo, en este caso blanco
* 000000 es el color de la letra
* style='12' es el tamaño de la letra
* "tspeed", "100" es la velocidad con la que se mueven las etiquetas


Que vamos a hacer.


Ir a TwitterFeed.com y haga clic en Regístrese ahora. Luego, llene el formulario y haga clic en Crear cuenta..
Luego se le llevará a otra página que contiene 3 pasos.

Paso 1: Nombre de la suscripción y Añadir URL de origen.
Tendrá que introducir su
- Nombre de la suscripción 
- URL de RSS, la dirección URL predeterminada de un blog por lo general debe ser el siguiente. "http://nombredetublog.blogspot.com/feeds/posts/default"  (solo cambias "nombredetublog" por el de tu blog")
O usted puede entrar a su url feedburner si usted es un miembro de feedburner.
Y haga clic en Continuar al paso 2

Paso 2: Configuración de Servicios de Publicación.
En este paso podrá autenticar sus cuentas en Twitter, Facebook, Laconica, Ping.fm y HelloTxt con su cuenta twitterfeed.com,
Por ejemplo, haga clic en Facebook, en la siguiente página, haga clic en Conectar con Facebook, una nueva ventana se abrirá, escriba su facebook e-mail y contraseña y haga clic en conectarse Luego haga clic en permitir el acceso y haga clic en crear servicios
Y después de agregar y autenticar todas sus cuentas, haga clic en Todos Hecho.

Paso 3: Hecho.

En este paso simplemente haga clic en Ir al escritorio o dashboard . Desde su escritorio o dashboard puede agregar, editar o eliminar los servicios de su cuenta.

Y ahora ya está.preparado para actualizar automaticamente sus cuentas

ta1to