Iconos minimalistas

22 iconos minimalistas de libre uso sobre redes sociales:
Digg, Facebook, Flickr, FriendFeed, LinkedIn, Myspace, Newsvine, Plurk, Reddit, RSS Icon, StumbleUpon, Technorati, tumblr, Twitter, Twitter, Vimeo, WordPress, YouTube

REFERENCIA:Arsgrafik

Botones Twitter

El otro día un amigo me comentaba de un sitio automatizado con imágenes gratuitas de Twitter el cual me pareció muy bueno para aquellos usuarios que aún no saben cómo poner el enlace de Twitter o que quieren cambiar el icono para seguir en Twitter.

La página se llama Botones Twitter y hacerse de uno de estos iconos es de lo más sencillo. Sólo hay que ingresar al sitio y escribir nuestro nombre de usuario.

Hacemos click en Go e inmediatamente veremos debajo una lista de imágenes de Twitter que podemos escoger, son muchos y los hay sólo de imágenes o bien, con textos en español o inglés.

Sólo hay que elegir el que nos guste y copiar el código que tiene. Luego nos vamos a Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pegamos el código que copiamos.

Y listo, tendremos un ícono con el enlace a nuestra cuenta de Twitter sin haber hecho nada más.


Botones Twitter

El botón trae debajo un enlace al sitio web de Botones Twitter, si alguno desea eliminarlo sólo hay que quitar esta parte del código:

<a href="http://www.botonestwitter.com/">Botones Twitter</a>

Y como recomendación para los más precavidos será subir la imagen a nuestro propio hosting para no tener que depender de la velocidad de los demás.

Enlace | Botones Twitter

Reloj en JavaScript

Código Reloj Simple:

<span id="VkuReloj"></span>
<script type="text/javascript">
//<![CDATA[
function showclock(){
var digital = new Date();
var hours=digital.getHours();
var minutes=digital.getMinutes();
var seconds=digital.getSeconds();
var dn='Am';
if (hours>12) {
dn='Pm';
hours=hours-12;
}
if (hours==0) hours=12;
if (minutes<=9) minutes='0'+minutes;
if (seconds<=9) seconds='0'+seconds;

miReloj='<b><span style="">'
+ hours + '</span> : <span style="">'
+ minutes + '</span> : <span style="">'
+ seconds + '</span></b><span style="margin-left:3px;">'
+ dn + '</span>';
document.getElementById('VkuReloj').innerHTML=miReloj;
// lo actualizaremos cada segundo
setTimeout('showclock()',1000);
}
window.onload=showclock
//]]>
</script>

Código Reloj Personalizado:

<span id="VkuReloj"></span>
<script type="text/javascript">
//<![CDATA[
function showclock(){
var digital = new Date();
var hours=digital.getHours();
var minutes=digital.getMinutes();
var seconds=digital.getSeconds();
var dn='Am';
if (hours>12) {
dn='Pm';
hours=hours-12;
}
if (hours==0) hours=12;
if (minutes<=9) minutes='0'+minutes;
if (seconds<=9) seconds='0'+seconds;

miReloj='<b><span style="color:red;font-size:22px;">'
+ hours + '</span> : <span style="color:red;font-size:22px;">'
+ minutes + '</span> : <span style="color:blue;font-size:18px;">'
+ seconds + '</span></b><span style="color:#000000;margin-left:5px;">'
+ dn + '</span>';
document.getElementById('VkuReloj').innerHTML=miReloj;
// lo actualizaremos cada segundo
setTimeout('showclock()',1000);
}
window.onload=showclock
//]]>
</script>

'Acerca del autor' debajo de cada post

Una de las "ventajas" que tiene Wordpress es que se puede agregar debajo de cada post una pequeña biografía sobre el autor para que los lectores puedan tener más información acerca de quién escribe el post, y muchos usuarios de Blogger desearían poder tenerlo también en el blog, así que vamos a ver cómo poner un 'acerca del autor' debajo de cada entrada.

En él puedes poner tu avatar, una breve información sobre ti e incluso puedes agregar enlaces sobre otros sitios webs que tengas o de tus redes sociales.

1. Primero vamos a Diseño | Edición de HTML y marcamos la casilla Expandir plantillas de artilugios ahí buscamos este código y lo eliminamos:
   

   <span class='post-author vcard'>
   <b:if cond='data:top.showAuthor'>
   <data:top.authorLabel/>
   <span class='fn'>
   <data:post.author/>
   </span>
   </b:if>
   </span>

   Esa parte que hemos eliminado es la que muestra Publicado por (nombre del autor), lo hemos quitado porque ya no será necesario con lo que vamos a agregar, pero bien puedes dejarlo si quieres y no pasa nada.
2. Ahora busca esta línea:
   

   <div class='post-footer'>

   Y debajo de ella agrega esto:
   

   <div class='acercadelautor'>
   <img border='0' src='URL del avatar' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
   </div>

3. Ahí cambia lo que está en color rojo por la URL de tu avatar. Y agrega en donde está el color naranja el texto que quieres mostrar como parte de la información de tu biografía, puedes poner enlaces incluso.
4. Por último antes de ]]></b:skin> pega lo siguiente:

   .acercadelautor {
   background:#EFFBFB; /* Color de fondo */
   border:1px solid #ccc; /* Borde */
   letter-spacing:normal;
   color:#424242; /* Color del texto */
   text-transform:none;
   font-size:12px; /* Tamaño del texto */
   padding:5px;
   margin:10px 0 10px 0;
   }
   .acercadelautor strong {
   color:#1C1C1C; /* Color del nombre del autor */
   font-weight:bold;
   font-size:13px; /* Tamaño de letra del nombre del autor */
   padding-left:5px;
   }

Esos son los estilos que tendrá el recuadro, puedes hacer los cambios que quieras en las anotaciones que he puesto en color verde.

A partir de este momento ya podrás verlo en la Vista Previa y probar si tiene los colores que deseas.

En el primer código que hemos agregado está marcado en negrita el tamaño de la imagen del avatar, esa puedes modificarla a tu gusto; si agregas poco texto en tu biografía se recomienda que hagas el avatar más pequeño para que no quede en desproporción.

¿Y si el blog tiene más de un autor?

Si el blog tiene más de un autor también podemos hacer que cada autor tenga el suyo, cada uno con su avatar y su descripción correspondiente.

---

En ese caso en lugar de pegar el código del paso 2 pegaremos este otro:

<b:if cond='data:post.author == &quot;Autor 1&quot;'>
<div class='acercadelautor'>
<img border='0' src='URL del avatar 1' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</div>
</b:if>

<b:if cond='data:post.author == &quot;Autor 2&quot;'>
<div class='acercadelautor'>
<img border='0' src='URL del avatar 2' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>

</div>
</b:if>

El primer fragmento corresponde al primer autor y el segundo al otro autor. De igual modo cambia la URL del avatar y el contenido de la biografía.

En donde dice Autor 1 y Autor 2 debes poner el nick de los autores tal como aparece en el blog respetando las mayúsculas, minúsculas y espacios, eso es muy importante.

Si quisieras agregar más autores sólo agrega otro fragmento como este:

<b:if cond='data:post.author == &quot;Autor 3&quot;'>
<div class='acercadelautor'>
<img alt='' border='0' src='URL del avatar 3' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</div>
</b:if>

Como ves el procedimiento es de lo más sencillo, no requiere scripts ni nada del otro mundo y el resultado quedará tan lindo como quieras.

P.D. Cindy y Manuel son producto de mi imaginación, cualquier parecido con la realidad es mera coincidencia.

Contador de días On-line

Código:

<script language="JavaScript">
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countup(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" días"
document.write("Este Sitio lleva "+difference+" en Internet desde su creación!")
}
//cambiar la fecha
countup(2009,05,01)
</script>

Cambiar fecha por la propia. (Año, mes, día.) y texto a mostrar.

Se puede personalizar.




Agregandole la etiqueta marquee:

<marquee>
<script language="JavaScript">
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countup(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" días"
document.write("Este Sitio lleva "+difference+" en Internet desde su creación!")
}
//cambiar la fecha
countup(2009,05,01)
</script>
</marquee>

Agregandole estilo CSS:

En este ejemplo lo centre, cambie color y tamaño del texto.

<div style="color: red; font-size: 20px; text-align: center;">
<script language="JavaScript">
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countup(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" días"
document.write("Este Sitio lleva "+difference+" en Internet desde su creación!")
}
//cambiar la fecha
countup(2009,05,01)
</script>
</div>

Otro sitio para optimizar imágenes

Cuando nos preocupa la carga del blog en lo primero que pensamos es en las imágenes, no siempre es el motivo principal y tenemos que pensar también que en la carga influyen otros factores como el uso excesivo de vídeos o la conexión.

De todas formas es bueno adquirir costumbres que a la larga van a beneficiarnos, una de ellas es optimizar las imágenes porque conseguimos que su peso sea reducido de forma considerable conservando el mismo tamaño sin mermar la calidad de la imagen.

Uno de esos sitios que podemos utilizar para optimizar imágenes es Web Resizer , además de ser una herramienta online el manejo es muy simple y nos ofrece entre otras opciones añadir marcos a las imágenes, recortar o rotar. También podemos reducirla de tamaño y no prescindir de esa fotografía maravillosa simplemente porque deseamos añadirla en un post y el espacio no lo permite.

Twuffer » programa tus publicaciones en Twitter

Twuffer es una herramienta que nos permitirá programar nuestros tweets y de esta forma comunciar a nuestros seguidores algún tema en concreto.
Es una herramienta sencilla de usar y muy útil.

Click en la imagen para ampliar

Twuffer

Menú tipo acordeón con efecto deslizante

Sin duda Mootools es una de las librerías más completas en efectos para páginas web aunque no es tan popular como otras librerías de efectos.

Este es un buen ejemplo de los atractivos efectos que se pueden conseguir con esta librería, se trata de un menú de imágenes tipo acordeón que se desliza suavemente cuando se pasa el cursor sobre él.

El menú es de ByScripts el cual ellos lo llaman Byslidemenu y ha sido Robinson quien me ha pedido que explique su instalación.

Hay dos versiones, el menú horizontal y el menú vertical.

Puedes ver funcionando el ejemplo en este blog de pruebas.

Antes de ponerlo considera que, Mootools no es compatible con la mayoría de las librerías de efectos, así que si usas jQuery, Prototype o Scriptaculous estoy casi seguro que no les funcionará.

Además que es un menú de imágenes, así que cada quién deberá crear sus imágenes con sus textos o lo que se le quiera agregar a la imagen.

Bien, habiendo aclarado lo anterior empecemos, primero hay que descargar este archivo, descomprimirlo y subirlo en algún alojamiento.

Ahora entra en Plantilla | Edición de HTML y pega antes de </head> lo siguiente:

<script src='URL del archivo mootools-core.js' type='text/javascript'/>
<script src='URL del archivo byslidemenu.js' type='text/javascript'/>
<style type='text/css'>
ul.bsm{
margin: 0px auto;
border:1px solid #B0B0B0;
list-style-type: none;
}
ul.bsm li{
border-left:2px solid #FFFFFF;
}
ul.bsm li.first{
border-style: none;
}
ul.vertical li,
div.vertical div{
border-top: 2px solid #FFFFFF;
border-left-style: none;
}
</style>

Cambia lo que está en color verde por las URLs de los archivos que subiste previamente a tu alojamiento.

Luego pega antes de </body> esto:

<script type='text/javascript'>
window.addEvent(&#39;load&#39;, function(){
var slideMenu = new BySlideMenu();
var verticalmenu = new BySlideMenu(&#39;verticalmenu&#39;, {vertical: true});
});
</script>

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega uno de estos códigos.
Si deseas usar el menú horizontal pega esto:

<ul class="bsm" id="byslidemenu">
<li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
</ul>

O si deseas el menú vertical pega este:

<ul style="display:none; visibility:hidden;" class="bsm" id="byslidemenu">
<li></li></ul>

<ul class="bsm vertical" id="verticalmenu">
<li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
</ul>

Ya sólo cambia lo que está en color rojo por las URLs de tus imágenes y por las URLs de los enlaces. Las imágenes yo las he hecho de 300px de ancho y 225px de alto, pueden ser de cualquier otra medida, pero esa de ejemplo creo que da mejores resultados visuales.

Como ves la instalación es muy sencilla, el mayor trabajo estará en diseñar las imágenes del menú, pero al final seguro tendrás un menú mejor personalizado y poco usual.

Pop-up con mensaje

Si quieres dejar un mensaje a tus visitantes al entrar a tu blog o página, como por ejemplo un nuevo proyecto, invitarlo a comentar o a suscribirse, un nuevo sorteo o lo que tu quieras informar.

Lo puedes hacer mediante una ventana Pop-up.

Tienes que poner el siguiente código arriba de </head>:

<script LANGUAGE="Javascript">
//<![CDATA[
function popupmensaje() {
text = "<html>\n<head>\n<title></title>\n<body>\n";
text += "<center>\n<br/>";
text += "<font style='color:#0093DD;'>";
text += "¡Hola! ¿Por qué no te animas y dejas algún comentario?";
text += "<br/>";
text += "¡Hola! ¿Por qué no te suscribes y así estar actualizado?";
text += "</font>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 1000); //tiempo demora en abrir
}
function windowProp(text) {
newWindow = window.open('','newWin','width=400,height=100'); // ancho y alto de la ventana
newWindow.document.write(text);
setTimeout('closeWin(newWindow)', 10000); //tiempo que se cierra sola la ventana
}
function closeWin(newWindow) {
newWindow.close();
}
popupmensaje()
//]]>
</script>

Rojo: El mensaje que quieres que diga tu ventana Va entre las 2 ""
Naranja: Tiempo en milisegundos que tarda en abrirse el pop up después de cargar la página (3000 = 3 segundos)
Verde: Tamaño del pop up (width = ancho y height = alto)
Azul: Tiempo en milisegundos que tarda en cerrarse el pop up después de que se abra (5000 = 5 segundos)
Celeste: color de texto.

Se puede personalizar el estilo con CSS.

Si no quieren que el mensaje aparesca al entrar para poder utilizarlo en un link o imagen, solo hay que quitar la siguiente linea:

popupmensaje()

Y para llamar a la función y así abrir la ventana:

<a href="javascript:popupmensaje()">Texto o imagen para abrir Ventana</a>

Ejemplo de abrir Ventana con un link

Bieicons iconos variados

Bieicons es un espacio creado por Ipietoon donde encontraremos un gran surtido de iconos de diferente temática y listos para descargar.

YouTube y su nuevo editor de videos online

YouTube Online Video Editor

Botones para compartir de Blogger

Desde hace unas semanas en Blogger in Draft había una opción de poner unos nuevos botones para compartir las entradas que funcionan igual que los marcadores sociales, y en Blogger normal ya están disponibles.

El diseño es muy sencillo y a mi gusto están perfectos pues sólo tienen los servicios básicos que la mayoría usamos que son, Twitter, Facebook, Google Buzz, Enviar entrada por correo y crear un backlink en Blogger.

Para poder usarlos vamos a mover un poco los códigos pues en las plantillas que no son de Blogger no funcionará a la primera, así que hay que hacer unos pequeños cambios.

Primero entra en Diseño y haz click en Editar sobre el elemento Entradas del blog.
Ahí marca la casilla la casilla Mostrar botones para compartir.




Ahora entra en Plantilla | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<div class='post-footer-line post-footer-line-1'>

Y debajo de ella pega esto:

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Y con eso ya tendrás los botones para compartir de Blogger.

Si crees que quedan muy arriba puedes poner el último código debajo de:

<div class='post-footer-line post-footer-line-2'>

O de:

<div class='post-footer-line post-footer-line-3'>

Leer más automático menos en el primer post

Después de haber visto cómo poner el leer más automático con imágenes en miniatura en el blog muchos son los que me han pedido que el resumen no afecte al primer post de modo que la primera entrada se muestre completa y el resto de ellas se muestren resumidas tal como está en este blog de pruebas.

Lo primero que haremos será aplicar el leer más automático en todas las entradas, así que primero vamos a Plantilla | Edición de HTML marcamos la casilla Expandir plantillas de artilugios y buscamos esta etiqueta:

<data:post.body/>

Y la sustituimos por esto:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Ahora antes de </head> pegamos este script:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Con esto ya tenemos el leer más en todas las entradas, ahora haremos que no aplique en la primera entrada, para lograrlo buscamos esta línea:

<b:include data='post' name='post'/>

Y la cambiamos por esto:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='post hentry'>

<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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-body entry-content'>
<p><data:post.body/></p>
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span>&#160;</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
</span>
</div>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Y listo, con eso ya tenemos el leer automático con miniaturas menos en la primera entrada de la página principal.

Ojo, es posible que la primera etiqueta que hay que cambiar la tengas dos o más veces, si así fuera haz el cambio en una, si dando Vista Previa no ves que funcione entonces haz el cambio en la otra que tengas repetida y así sucesivamente.

Para ver más detalles sobre cómo adornar el enlace de Leer más así como cambiar el tamaño de la imagen miniatura visita esta entrada.

Título obligatorio

Hoy me encontre con que al crear un nuevo gadget HTML/Javascript, al querer guardar me daba un error.
"Campo obligatorio; no debe dejarse en blanco"

La verdad que nunca me paso antes.

Si les pasa lo mismo y no quieren que se vea el título, no se preocupen que se puede eliminar desde Edición de HTML.

Solución 1:

Para eso primero copiamos el titulo puesto o nos fijamos el código Html como se muestra en la imagen.

Ahora ya teniendo copiado el titulo o código HTML, nos vamos desde Diseño a Edición de HTML.

Expandir plantillas de artilugios.

Buscamos (Ctrl+F) lo anterior copiado.

Veran un código igual o parecido:

<b:widget id='HTML1' locked='false' title='TITULO COPIADO' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Lo unico que hay que hacer es eliminar lo de color azul:

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

Guardar plantilla.

Solución 2:

Otra manera es, en el lugar del título poner un espacio de está forma:

&nbsp;

No lo aconsejo para los que tienen en el diseño del título algun borde, imagen o puesto margin o padding.

AGREGADO: SOLUCIÓN APORTADA POR MI AMIGA ROSA EN EL ESCAPARATE.

Solución 3:

En el lugar del título poner la etiqueta h2 de está forma:

<h2></h2>

Tiene que estar juntos la apertura y cierre de la etiqueta h2 sin espacios en medio.

Es la mejor solución si ponemos el gadget sin título y no lo vamos a modificar, ya que no crea espacios en el lugar del titulo, como pasa con la solución 2.

Si vamos a modificar el gadget seguidamente por algún motivo, es recomendable la solución 1.

Guardar gadgets sin título

Hoy que he revisado el correo me encuentro con que muchos están preguntando por qué no se pueden guardar gadgets sin título en el blog pues al intentar hacerlo Blogger marca un error lo cual impide guardar el gadget.

Desconozco si se trate de un problema de Blogger o de una nueva exigencia en cuanto a sus gadgets, pero eso no dignifica que no se pueda arreglar.

Bien, cuando intentamos agregar un gadget en el blog y queremos guardarlo sin título aparecerá este error:

Lo que haremos será escribir en el título del gadget esto:

&nbsp;

Guardamos los cambios y el gadget se guardará exitosamente:


Y por supuesto, el título del gadget no aparecerá en el blog.
¿Otra opción? esta entrada.

Botón con varios link efecto face

Código:

<script language="Javascript">
//<![CDATA[
<!-- http://loseasi.blogspot.com/ -->
var timerID = null
var timerRunning = false
var charNo = 0
var charMax = 0
var lineNo = 0
var lineMax = 4 // Cambiar por el total de link
var lineArr = new Array(lineMax)
var urlArr = new Array(lineMax)
lineArr[1] = "Lo se así - de todo un poco - blogger"
urlArr[1] = "http://loseasi.blogspot.com/"
lineArr[2] = "Dejotas Radio"
urlArr[2] = "http://dejotasradio.blogspot.com/"
lineArr[3] = "Contacto"
urlArr[3] = "http://loseasi.blogspot.com/p/contacto.html"
lineArr[4] = "Messenger"
urlArr[4] = "http://loseasi.blogspot.com/p/messenger.html"
var lineText = lineArr[1]
function StartShow() {
StopShow()
ShowLine()
timerRunning = true
}
function FillSpaces() {
for (var i = 1; i <= lineWidth; i++) {
spaces += " "
}
}
function StopShow() {
if (timerRunning) {
clearTimeout(timerID)
timerRunning = false
}
}
function ShowLine() {
if (charNo == 0) {
if (lineNo < lineMax) {
lineNo++
}
else {
lineNo = 1
}
lineText = lineArr[lineNo]
charMax = lineText.length
}
if (charNo <= charMax) {
document.formFaceVku.buttonFaceVku.value = lineText.substring(0, charNo)
charNo++
timerID = setTimeout("ShowLine()", 200) // Tiempo que aparece o se desliza el botón.
}
else {
charNo = 0
timerID = setTimeout("ShowLine()", 5000) // Tiempo que cambia de un botón o link a otro.
}
}
function GotoUrl(url)
{
top.location.href = url
}
document.write("<form name=\"formFaceVku\">");
document.write("<input style=\"color:#0093DD;cursor:pointer;\" type=\"button\" name=\"buttonFaceVku\" value=\"&{lineText}\" size=\"18\" onClick=\"GotoUrl(urlArr[lineNo])\">");
document.write("</form>");
StartShow();
//]]>
</script>

Para agregar a quitar link:

Ver las siguientes 2 lineas:

lineArr[1] = "Lo se así - de todo un poco - blogger"
urlArr[1] = "http://loseasi.blogspot.com/"

La primera linea es el texto que se muestra en el bóton.
la segunda es el link.

Donde dice lineArr[1] y urlArr[1] tienen que cambiar el numero 1, 2, 3, 4, etc...  según la cantidad de link.

Donde dice: var lineMax = 4 cambiar el 4 por el total de link puestos.

Así:

var lineMax = 6 // Cambiar por el total de link
var lineArr = new Array(lineMax)
var urlArr = new Array(lineMax)
lineArr[1] = "Lo se así - de todo un poco - blogger"
urlArr[1] = "http://loseasi.blogspot.com/"
lineArr[2] = "Dejotas Radio"
urlArr[2] = "http://dejotasradio.blogspot.com/"
lineArr[3] = "Contacto"
urlArr[3] = "http://loseasi.blogspot.com/p/contacto.html"
lineArr[4] = "Messenger"
urlArr[4] = "http://loseasi.blogspot.com/p/messenger.html"
lineArr[5] = "TEXTO 5"
urlArr[5] = "LINK 5"
lineArr[6] = "TEXTO 6"
urlArr[6] = "LINK 6"
 
Siempre que agreges o quites link (las 2 lineas) cambiar también el total maximo.

Cambiar velocidad:

200 es el tiempo que aparece o se desliza el botón.

5000 es el tiempo que cambia de un botón o link a otro.

Personalizar el botón:

Donde dice: style=\"color:#0093DD;cursor:pointer;\"

Se puede agregar estilos CSS.

  

Ejemplo un fondo de color negro con letras blancas sin borde y un separación de 2px:

style=\"color:#ffffff;cursor:pointer;background-color:#000000;border:0;padding:2px;\"

 OJO, tiene que ir dentro de:  \" y \" separados por ;

Wallpapers Widescreen

REFERENCIA:Widescreen

Abrir 2 ventanas emergentes pop-up

Antes vimos como abrir 1 ventana emergente pop-up.

Hoy les voy a dar el código para poder abrir 2 ventanas pop-up al mismo tiempo.

Crearemos una función con los elementos que queremos que tengan nuestras ventanas pop-up junto con los link que se abrirán.
Ponemos el siguiente código arriba de </head>:

<script language="javascript">
function abrir2popup()
{
a= window.open("http://link1","",
"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=500, height=185, top=85, left=140");
b= window.open("http://link2","",
"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=500, height=185, top=185, left=240");
}
</script>

Cambiar los link y personalizar el pop-up.
En la otra entrada mostre la forma de pesonalizar el pop-up, así que no lo voy a hacer en esta entrada.

Ahora llamaremos a la función.

<a href="javascript:abrir2popup()">Texto o Imagen</a>

Por algunas preguntas realizadas anteriormente agrego que no solo se pueden abrir otras páginas con una ventana pop-up, también abre imágenes, flash, videos, etc...

Ver Ejemplo:
Abrir 2 Ventanas

Guía para personalizar plantillas Blogger

Guía para personalizar plantillas Blogger (The Cheats' Guide to Customizing Blogger Templates) es un libro elaborado por Amanda de BloggerBuster que nos ayudará a personalizar nuestro blog con lecciones muy entendibles y con una infinidad de gráficos..

El libro está estructurado en cinco capítulos que tratan los siguientes temas.

» Personalizar plantillas de ancho fijo.
» Personalizar plantillas de maquetación fluida.
» Personalizar el sidebar.
» Botones, banners e imágenes.
» Más recursos.

Ficha

Autora:

Amanda Fazani

Idioma:

Inglés

Páginas:

53

Publicación:

Enero del 2008

Formato:

PDF

Precio:

Descarga gratuita

Licencia:

Creative Commons

Leer online | Descargar

Ejecutar dos funciones javascript en un evento onclick

Se ponen las 2 funciones Entre " y " separadas por ;

Así:

onclick="funcion1();funcion2();"

Ver ejemplo:

Click aquí para ver mi foto

Para el ejemplo utilice 2 funciones JavaScript :

1 mensaje (alert) y la función de esta entrada

Sustituir imagen de fondo en las nuevas plantillas

Ya decíamos que el diseñador de plantillas nos traería algún que otro quebradero de cabeza debido a las diferencias que se muestran al cambiar de plantilla.

Una de esas diferencias es lo que veremos si deseamos cambiar de imagen de fondo (background). En las nuevas plantillas veremos el fondo con background: $(body.background);

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

}

Si tenemos una imagen de fondo de nuestro agrado como en el caso de Maty y queremos que sustituya la añadida con el diseñador simplemente debemos sustituir la línea background: $(body.background); por nuestra imagen:
background-image: url ('url-nuestra-imagen');

De querer añadir una textura, una imagen estática o redimensionarla obramos de igual forma sustituyendo la línea background: $(body.background); por la que proceda.

Menú de categorías

Aunque la mayoría ya sabe hacer un menú de categorías basado en las etiquetas cada día son más los usuarios nuevos de Blogger que preguntan cómo hacerlo, así que vamos a ver cómo crear un menú (cualquiera que sea) basado en las etiquetas del blog.

Lo primero que necesitamos es tener etiquetadas las entradas, es decir, asignarles una catagoría a cada una según el tema del que hable o la información que contenga. Por ejemplo, una entrada que contengas videos podemos ponerle la etiqueta Videos.

Para hacerlo tenemos que editar las entradas yendo a Entradas y click en Editar sobre la entrada que desees.
Ahí veremos en la parte derecha las opciones de entrada; daremos click en Etiquetas y ahí escribimos la etiqueta que le corresponde, en nuestro ejemplo se llamará Videos.

Si quisieras que la entrada tenga más de una etiqueta sólo agrega una coma y después agrega la otra etiqueta, por ejemplo Videos, Música

Hacemos lo mismo para todas las entradas tanto las ya publicadas como las nuevas que publiquemos.

Ahora vamos a Diseño | Añadir un gadget y seleccionamos el gadget que se llama Etiquetas y guardamos los cambios.

El siguiente paso es buscar un menú que nos agrade, en la sección Menús de Ciudad Blogger puedes encontrar algunos, pero también encontrarás estupendos menús buscando un poco en Google.
Escoge el que quieras e instálalo en tu blog, cada menú requiere distintos pasos, pero al final y la parte que ahora nos interesa es cuando tenemos que poner los enlaces del menú, generalmente veremos algo muy parecido a esto:

<ul>
<li><a href='URL del enlace'>Pestaña 1</a></li>
<li><a href='URL del enlace'>Pestaña 2</a></li>
<li><a href='URL del enlace'>Pestaña 3</a></li>
</ul>

Bien, para poder llenar esos enlaces hacemos lo siguiente, entramos a nuestro blog y buscamos el gadget de etiquetas que pusimos, nos posicionamos en el nombre de la etiqueta a la que queremos conseguir su URL y damos click con el botón derecho.

Según sea el navegador que usen será la opción que debamos elegir, pero lo que haremos será copiar la URL del enlace. Así es como se ve en los distintos navegadores:

Ya que hemos copiado la URL de la etiqueta la pegamos en la parte del menú que corresponde:

<li><a href='URL del enlace'>Pestaña 1</a></li>

Lo mismo haremos con todas las etiquetas que queremos agregar en el menú.
En general, las URL de las etiquetas son algo así:

http://nombre-de-mi-blog.blogspot.com/search/label/NombreDeLaEtiqueta

Podemos ponerlas así para evitar el paso anterior, pero en el caso de que tus etiquetas tengan acentos, espacios o caracteres especiales entonces será mejor seguir los pasos tal como lo he explicado

Y así de simple habremos creado un menú por categorías. Ahora verás que al dar click en una pestaña del menú, por ejemplo Videos, aparecerán todas las entradas que contengan esa etiqueta.

En el mismo menú se pueden agregar otros enlaces, ya sea de páginas estáticas o de otra dirección web, de modo que puedes personalizar tu menú como tú quieras.

Cursores del mouse

Lista de los cursores disponibles por defecto en Windows:

• default (flecha)
• crosshair (cruz)
• e-resize (flecha que apunta a la derecha)
• hand (mano) Solo IE
• help (signo de pregunta)
• move (cruz con flechas en los extremos)
• n-resize (flecha que apunta hacia arriba)
• ne-resize (flecha que apunta al noreste)
• nw-resize (flecha que apunta al noroeste)
• pointer (mano)
• s-resize (flecha que apunta hacia abajo)
• se-resize (flecha que apunta hacia el sudeste)
• sw-resize (flecha que apunta hacia el sudoeste)
• text (I-beam)
• w-resize (flecha que apunta a la izquierda)
• wait (reloj de arena)
• progress (flecha con reloj de arena)

Para cambiarlos se tiene que agregar un estilo CSS.

Ejemplo: style="cursor: pointer"

Acá sin ser un link, cambia por una mano

El código que utilicé fue el siguiente:

<h5 style="cursor: pointer">Acá sin ser un link, cambia por una mano</h5>

Se puede utilizar en un texto o imagen.

Dejotas Radio

Fuente:

Fuegos artificiales en el blog

Si quieres decorar tu blog con un efecto de

FUEGOS ARTIFICIALES.

Puede ser por el cumpleaños o aniversario del blog, una fiesta, evento, etc...

Ver página entera

Ir a Diseño, Edición de HTML y justo arriba de </head> poner el siguiente código:

<script type="text/javascript">
//<![CDATA[
var bits=100; // cuantos bits
var intensity=7; // que tan "poderosa" es la explosión. (recomendado entre 3 y 10)
var speed=20; // rapidez (a menor numero, mas rapido)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");

//azul rojo verde purpura cyan, naranjo

var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}

function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
//]]>
</script>

Detener Error en Internet Explorer

Muchas veces en Internet Explorer nos muestra una ventana avisando que hay un error asociado a un script.

Algunos tienen configurado para que no muestre la ventana, pero igualmente aparece el error en la barra de abajo.

Para no verlo vamos a:
Herramientas, Opciones de Internet, Opciones avanzadas.
Buscamos y desmarcamos: Mostrar una notificación sobre cada error de script.

Con esto solo logramos que no nos muestre la ventana en nuestro propio navegador, pero si se lo mostraría a otros visitantes.

Lo mejor es ver la ventana, buscar el motivo del error y solucionarlo.

Pero es una tarea muy difícil para algunos que no sabemos mucho sobre Script.

Para el ejemplo yo cree un script erroneo en body.

Como muestra la primera imagen el error esta en la linea 9 carácter 22. (Como no entiendo mucho de script, no encuentro que causa el error ni cual es el carácter 22 ya que no es la columna 22)


Igualmente hay muchos de estos errores que no afectan en lo mas mínimo el funcionamiento.

Si no logramos encontrar y solucionar el error en el script, lo podemos ocultar agregando un código a nuestra plantilla.

Esto no soluciona el error, solo va a hacer que los visitantes no vean mas esa molesta ventana.

Entramos en Diseño, Edicón de HTML, y buscamos </head>.

Justo arriba colocamos el siguiente código:

<script> function detenerError(){return true}window.onerror=detenerError</script>

Guardamos los cambios.

Ahora ya los visitantes no van a ver esa molesta ventana.

Dos nuevas secciones en el blog

Este mes traerá novedades que espero beneficien a todos los lectores y seguidores de Diversas y Variadas. Y bien vamos con las novedades.

Ahora el blog posee dos secciones nuevas:

1.§ LIBROS Y MANUALES

Esta sección surge por las preguntas que me hacen sobre libros para ampliar temas como CSS, HTML, diseño, Photoshop,Image Ready, etc.
Así que el fin de esta nueva sección, Libros y manuales, será recomendar libros, revistas, etc., que puedan ayudar a los que desean profundizar en los temas antes mencionados.

2.§ EL FORO DEL BLOG

El blog ya posee un foro que será complementario al blog; en este foro se debatirá y opinará sobre temas afines pero no iguales a la temática del blog.
La idea de crear el foro la tenía desde hace bastante tiempo y después de mucho pensarlo ya es una realidad.
Para acceder al foro, sólo den click al botón "Foro" del menú superior o haciendo click en este link.
El foro está estructurado en las siguientes categorías, cada una con distintos sub-forums:

» Diseño: CSS, HTML y diseño gráfico.
» Software: Multimedia (Video, imagen y fotografía),programas para computadora y Ofimática.
» Variedades: cine, música y literatura.

La última categoría, Variedades es complementaria a la sección del mismo nombre que hay en el blog.

Espero que la creación de estas secciones sea un beneficio para todos.

El diseñador de plantillas a disposición de todos.

Hace unos días en Blogger Buzz nos informaban que el diseñador de plantillas ya está disponible para todos sin necesidad de acceder por Blogger in Draft como veníamos haciendo.

Recordemos que algunas de las funcionalidades eran el poder disponer de 19 nuevas plantillas, diseños definidos en CSS, cientos de imágenes libres de derechos, un solo control para cambiar los colores del diseño y previsualización en tiempo real.

Recordemos también que al seleccionar una plantilla nueva se borrarán todas las personalizaciones de la plantilla existente y que el cambio no sólo afecta al diseño del blog sino a la plantilla.

Contador que cuenta días hacia atrás

Ya vimos anteriormente: Reloj contador que cuenta hacia atrás.

Este código solo muestra los días.

Código: (Se pone en el lugar que quieran mostrarlo)

<SCRIPT language=JavaScript>

//cambia este texto para indicar el acontecimiento que desees

var before="AQUÍ EL NOMBRE DEL EVENTO"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countdown(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var futurestring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1)
if (difference==0)
document.write(current)
else if (difference>0)
document.write("<strong><FONT FACE=verdana SIZE=2 COLOR=#083b00>FALTAN SÓLO "+difference+" DÍAS PARA: "+before+"</FONT></strong>")}

//usa la fecha del evento que quieres señalar en el formato año/mes/día

countdown(2015,01,01)</script>

Cambiar los datos en rojo.

Facebook advierte: no puedes saber quién visitó tu perfil

Es muy común buscar la personalización hasta el extremo de los servicios que utilizamos y descubrir características que aún no poseen nuestros amigos. Pero Facebook está advirtiendo que no es posible saber quién miró tu perfil, pese a que numerosas aplicaciones lo pregonan a los cuatro vientos.

Las mismas se promocionan a través de grupos o páginas, que suelen pedir que recomiendes a todos tus amigos que se unan. Algunas proporcionan directamente el enlace a la aplicación, mientras que otras aseguran que te enviarán un mensaje con la información, algo que a veces ni siquiera ocurre. O peor aún, lo que recibes es spam.

El problema de utilizar estas herramientas falsas es que, por el diseño de la privacidad del site, el creador obtiene acceso a diversos datos de tu cuenta, pudiendo darles un uso legítimo o no. Por ello, la red social pide que las denuncies, ya que significa una violación de las condiciones de uso.

Si fuiste víctima de alguno de estos engaños, es posible revocar la autorización desde la configuración del sitio.

Fuente:

Botones Flash para Twitter Gratis

Casualmente encontré esta página donde tienen botones animados muy bonitos para twitter, yo misma puse uno en mi blog para ver que tal funcionan, y la verdad es que si funcionan y funcionan muy bien. Lo que más me gusto, es que no aparece ningún botón alrededor de éste con publicidad, lo que lo hace ver limpio.





Estas son los ejemplos de los botoncitos que puedes llevarte gratis a tu blog

¿Cómo lo obtienes?



Paso 1. Estando en la página principal seleccionas el color de fondo, arriba a la izquierda, luego seleccionas el botoncito que más te guste (get the bottom).



Paso 2. Después, defines el tamaño, y escribes en el espacio correspondiente tu twitter ID (http://www.twitter.com/ TU_ID_AQUI), para que el botón se enlace a tu página de twitter,  lo aplicas, y taraan!  :) listo...,te generará un código que tendrás que pegar en la parte de la plantilla que más te convenga, seleccionando la opción de HTML/javascript en tu plantilla.

:D Así de fácil y rápido.

NOTA: Ya no recomiendo este página, ya que está agregando publicidad intrusiva a los botones. Lo siento chic@s.

Ventana emergente pop-up

Ventanas emergentes en sitios web o blog.

El término denomina a las ventanas que emergen automáticamente (generalmente sin que el usuario lo solicite) mientras se accede a ciertas páginas web. A menudo, las ventanas emergentes se utilizan con el objeto de mostrar un aviso publicitario de manera intrusiva. Una técnica relacionada a esta es la denominada pop-under (que consiste en abrir de manera intempestiva nuevas ventanas que se sitúan detrás de la ventana en uso).

Los anuncios pop-under (como dicho anteriormente) son una variedad de lo que son los pop-up.

Leer más en Wikipedia:

Pop-up con JavaScript.

Primera forma:

Crearemos una función con los elementos que queremos que tenga nuestra ventana.

Ponemos el siguiente código arriba de </head>:

<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>

Elementos para dar forma a la ventana:

• fullscreen: Hace que la ventana se abra en toda la pantalla.
• toolbar: Hace que la ventana se abra con o sin barra de herramientas.
• location: Hace que la ventana se abra con o sin barra de direcciones.
• directories: Hace que la ventana se abra con o sin barra directorios.
• status: Hace que la ventana se abra con o sin barra de estado.
• menubar: Hace que la ventana se abra con o sin barra de menú.
• scrollbars: Hace que la ventana presente o no las barras de desplazamiento.
• resizable: Si la ventana puede cambiar de tamaño o no.
• width: El ancho de la ventana.
• height: El alto de la ventana.
• top: La posición vertical de la ventana.
• left: La posición horizontal de la ventana.

Cuando ponemos el atributo=YES estamos forzando a que ese elemento se vea.
Cuando ponemos atributo=NO lo que hacemos es evitar que ese elemento se vea.

Ahora llamaremos a la función.

Les voy a dar 3 ejemplos con los cuales podemos abrir nuestra ventana pop-up.

Abrir una ventana al entrar a la página.

<body onload="Abrir_ventana('http://URL/ejemplo-popup.html')">

Abrir una ventana al cerrar la página.

<body onunload="Abrir_ventana('http://URL/ejemplo-popup.html')">

Estos 2 ejemplos anteriores se colocan reemplazando la etiqueta <body>.

Abrir un ventana a través de un enlace. (El enlace llama a la función que abre la ventana)

<a href="javascript:Abrir_ventana('http://URL/pop-up.html')">Click aquí para abrir la ventana</a>

Cambiar link del pop-up (http://URL/pop-up.html).
Cambiar (Click aquí para abrir la ventana) por otro texto o una imagen.
Poner en el lugar que se quiera mostrar el link.

Ver ejemplos:

Segunda forma:

Para mí, esta es la mejor manera. (la recomiendo)

No necesitamos poner ningun otro código, solamente se coloca el siguiente código en el lugar que se quiera mostrar el link.

Abrir un ventana a través de un enlace. (El enlace llama a la función que abre la ventana)

<a href="http://URL/pop-up.html" onClick="window.open(this.href, this.target, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140'); return false;">Click aquí para abrir la ventana</a>

Cambiar link del pop-up (http://URL/pop-up.html).
Cambiar (Click aquí para abrir la ventana) por otro texto o una imagen.
Cambiaremos los elementos segun quieramos mostrar la ventana al igual que en la primera forma.

Ver ejemplo:
Click aquí para abrir la ventana