Íconos de redes sociales en forma de estampas

En Marco Folio encontré una colección muy buena de 13 íconos de redes sociales en forma de estampillas, en diferentes tamaños ( 32x32, 64x64, 128x128).


► Descargar: Marco Folio

Navbar transparente

Hace tiempo vimos algunas opciones de lo que podíamos hacer con la navbar (como ocultarla, personalizarla o aplicar un botón para ocultarla y mostrarla). Hoy haremos algo diferente, haremos que la navbar quede como oculta por un velo gracias a la aplicación de transparencia.

♠ Con ayuda de CTRL+F buscamos ]]></b:skin> y encima de este pegaremos el siguiente código:

#navbar-iframe {
filter:alpha(opacity=20);
opacity:.20;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /*--IE 8 Transparency--*/
}

Aquí les dejo una imagen de muestra con el antes y el después.

Íconos para Twitter de BanakaBanaka

En BanakaBanaka encontré una colección muy bonita de cinco íconos de 256px/125px/60px de Twitter, y como dice su creador "los iconos pueden ser libremente usados para proyectos particulares y comerciales".


► Los íconos los puesdes descargar en esta entrada de BanakaBanaka

Formulario de Login a tu cuenta de blogger

Una de las utilidades que nos ofece la navbar es el enlace que tiene para acceder a nuestra cuenta; sin embargo, por estética y otras razones muchos la quitan.
Lo que nos queda es poner algún enlace a blogger para acceder a nuestra cuenta, etc.
Pero encontré una forma sencilla de acceder a nuestra cuenta de blogger, poniendo un formulario de acceso o login en la sidebar de nuestro blog.

Los pasos para agregarlo son los siguientes:

♠ Vamos a Diseño/ Elementos de página/ Nuevo gadget y selessionamos la opción HTML/CSS.
♠ Pegamos el siguiente código y damos click a guardar:

<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fblogger.com%2F" name="continue" type="hidden"/>

<br/>
<div>
<label for="Email"> Nombre de usuario (e-mail):
<br/><input id="Email" tabindex="1" name="Email" size="20" type="text"/>

</label>
</div>
<br/>
<div>
<label for="Passwd"> Contraseña: (<a href="https://www.blogger.com/forgot.g" target="_top" title="¿Ha olvidado su contraseña?">?</a>)

<br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>

</div>
<br/><br/>
<input id="signin-btn-ns" tabindex="0" value="Enviar" class="ubtn ubtn-block" name="submit" type="submit"/>

</form></div>

♠ Ahora, para darle alguna propiedad CSS a nuestro formulario como color de borde, color del botón, etc, vamos a Diseño/ Edición de HTML, con ayuda de Ctrl+F buscamos ]]></b:skin> y antes de éste, pegamos el siguiente código:

#Email, #Passwd{
background: #F6F4DA;
border: 1px solid #B07C3F;
}

#signin-btn-ns {
color: #fff;
background: #B07C3F;
border: 1px solid #B07C3F;
}

Si deseamos podemos cambiar los colores del código por otros y también el tipo de borde.
♠ Damos click en guardar y listo.

Y si hemos seguido todos los pasos el formulario se verá así en nuestra sidebar:

Nombre de usuario (e-mail):

Contraseña: (?)

Si tienen alguna duda, será bienvenida :)

Nuevos gadgets para blogger

Revisando hoy si había alguna novedad en Blogger in Draft, me encuentro con cuatro nuevos gadgets elaborados por Blogger Buster .

Los cuatro gadgets nuevos son:

» Post recientes (recent post).
» Updates de Twitter (Twitter Updates).
» Comentarios recientes (recent comments).
» Picassa Photostream, que mostrará nuestras imágenes subidas a Picassa.

Para incorporar estos gadgets a nuestro blog, hacemos lo siguiente:

♠ Ingresamos a Blogger in Draft con nuestra cuenta de blogger.
♠ Vamos a Diseño/ Elementos de la página/ Añadir un gadget y Destacados.
♠ En la pestaña "Destacados" encontraremos estos cuatro gadgets; escogemos cualquiera, lo configuramos y damos click a guardar.

Varios Premios

Gracias a Fabiana que gentilmente me consideró merecedora de varios premios. Y el premio que escojo es el Premio al Autor de Oro:



¿Qué significado tiene este premio?

Fabiana nos lo dice: "es para aquellos que ayudáis, colaboráis en buenas causas, compartís vuestro material o conocimiento al bien ajeno, y por supuesto sois toda esa gente maravillosa y amable que existen en la comunidad de blogs."

Reglas del Premio:
"Este premio se concede sin ningún tipo de obligación a conceder a otros ni siquiera a mencionar mi blog por obligación ninguna. Desearía que este premio fuese concedido con plena libertad de darlo a quien queramos y por lo que queramos. De esta forma es seguro que será bien concedido y recibido."

Si bien es cierto que no tiene reglas, Fabiana dió algunas reglas para reitrar los premios; una de estas reglas es entregar a los Blogs que lo merezcan o compartir el Premio.

Y bien las personas a quienes entrego el Premio Autor de Oro son:

» squirrel, con su blog Para Para Todos
» Francisco, con su blog De fierros hablamos
» Cardenal Farenas, con su blog El Confesionario †

Otros premios que fueron entregados por Fabiana a Diversas&Variadas, y que los recojo de forma simbólica, son :

» Premio Dardos:



» Premio Blog de Oro:



» Premio Symbelmine:



Muchas gracias Fabiana .

PatternWall » patrones gratuitos

PatternWall es un sitio que nos ofrece una variedad de patrones que podemos usarlos para nuestro blog.
Tiene diferentes diseños,colores y texturas.

Sobre enlaces (3): abrir todos los links en una nueva ventana

Hay quienes desean saber cómo hacer para que todos los enlaces de su blog se abran en una nueva ventana. De ser posible, lo es y además es muy sencillo, pero hay que reparar en que cuando se dice que abre todos los enlaces en una nueva ventana, es porque en verdad afecta a TODOS los enlaces incluyendo a aquellos, que por ejemplo, usamos para expandir o recoger.

Bien, después de estas palabras previas podemos empezar.

♠ Vamos a Diseño/ Ediciñon de HTML y con ayuda de CTRL+F buscamos <head> y después de este pegamos la siguiente línea:

<base target="_blank" />

Como les dije, era bastante sencillo .

Hoy estreno de Harry Potter en Perú

Haciendo hoy un alto a la temática del blog, sólo quería decirles que, para los que aún no lo saben, que hoy se estrena Harry Potter 6 en Perú.

Para los que son fans de Harry Potter, pueden ponerse en contacto con los miembros de la Orden del Sol que es el fan club oficial de Harry Potter en Perú, a través de su foro (www.ordendelsol.net/foro), o escribirles directamente a su mail : sociedadmagicaperuana@gmail.com.
Si desen saber algo más sobre la Orden del Sol, pueden leer esta entravista.

Ahora, los dejo con el trailer, pero ya saben que hoy podrán ver la peli completa.

Si ves algún video caducado, déjame un mensaje
para cambiar el video por otro. Gracias.

RSS Reader Widget: lector de feed

Mirando los diversos borradores de post que tenía , encontré este post, que empecé a escribir hace tiempo, pero que lo guardé como borrador y se quedó ahí. Hoy lo termino y lo publico :)

Spring Widgets nos ofrece este bonito y práctico lector de feed al que podemos dar múltiples usos: para ponerlo en nuestra sidebar como una tabla que muestra nuestras últimas entradas o post; y también para que muestr los últimos comentarios que tengamos.

Para que muestre los últimos post:

♠ Para empezar entramos aquí . Cuando ingresemos nos mostrará cómo se verá nuestro lector cuando lo instalemos en nuesto blog.

♠ Luego, en la parte izquierda de nuestra pantalla, veremos dos botones; oprimimos Customize this widget ; una vez que oprimamos se espandirá un pequeño formulario.

♠ En el formulario debemos configurar el tamaño del lector de Feed.

♠ Ahora este es el paso más importante: para que el lector "lea" nuestro blog debemos de escribir nuestra dirección de Feed. Encontrará dos casilleros debajo de Feed URLs: uno con un pequeño "+" al costado y el otro un poco más grande; en el casillero grande es donde deben de colocar la URL de su Feed. Por ejemplo, en el caso de mi blog, la URL del feed es http://feeds.feedburner.com/diyva.

♠ Un poco más abajo (del formulario) encontrarán un botón con el que podrán personalizar el color de los bordes de su lector de feed.

Luego de estos pasos estamos preparados para colocar el lector en nuestro blog; hacemos click nuevamente en Customize this widget para que el formulario se recoja y oprimimos en Click here to Get the Code!

♣ Se abrirá una pequeña ventana con varios logos (de Facebook, Google, etc); en nuestro caso, hacemos click en el botón de Blogger.

♣ Luego, si deseamos, ingresamos nuestro correo y contraseña con la que accedemos normalmente a nuestro blog; o sino hacemos click en Get Code.

♣ Copiamos el código que aparecerá y lo colocamos en la sidebar de nuestro blog.


Si realizan bien todos los pasos el resultado será éste:

Get this widget!

Visit the Widget Gallery

Como dije al principio, no sólo le podemos dar este usos, sino que lo podemos usar como otra forma para mostrar una lista con los últimos comentarios de nuestro blog; de la misma manera, pero cambiando la dirección URl de Feeds por la de los comentarios.
El resultado es muy bueno.

Get this widget!

Visit the Widget Gallery

Espero que les guste y que les sirva.

Cómo eliminar el número de las etiquetas

He recibido con frecuencia esta pregunta, ¿cómo eliminar el número que aparece al lado de las etiquetas? Pues ahora les explicaré cómo se hace:

♠ Vamos a Diseño/ Edición de HTML y expandimos plantilla de artilugios.
♠ Con ayuda de CTRL+F buscamos:

<span dir='ltr'>(<data:label.count/>)</span>

En algunas plantillas pueden haber dos códigos iguales a este; el código que borraremos será el primero que encontremos y no el que se encuentra más abajo.
♠ Borramos toda esa línea y guardamos los cambios.

Aquí una muestra del antes y el después:

Nube de tags (etiquetas)

Son varios los que me preguntan cómo poner las etiquetas como las que se ven en mi sidebar, en forma de nube. No es difícil conseguirlo, pero sí requiere algo de paciencia.
Bien empecemos:

♠ Ante todo debes tener actiavadas las etiquetas; sino las tienes, ve a Diseño/ Elementos de la página/ Añadir un gadget / Etiquetas y damos click a guardar.
♠ Ahora nos dirigimos a Diseño/ Edición de HTML y damos click a Expandir plantillas de artilugios.
♠ Con ayuda de CTRL+F buscamos: ]]></b:skin> y antes de éste pegamos:

/* Etiquetas

----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

♠ Ahora, nuevamente con ayuda de CTRL+F, buscamos </head> y antes de este pegamos:

<script type='text/javascript'>

// Label Cloud User Variables

var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [204,74,122];
var minFontSize = 10;
var minColor = [200,112,12];
var lcShowCount = false;
</script>

Explicación:
» var maxFontSize: tamaño de fuente de las etiquetas que tengan varias entradas.
» var maxColor: color de las etiquetas que tengan varias entradas.
» var minFontSize: tamaño de fuente de las etiquetas que tengan pocas entradas.
» var minColor: color de las etiquetas que tengan pocas entradas.

♠ Bien, ahora en la plantilla buscamos lo siguiente:

<b:widget id='Label1' locked='false' title='Etiqueta' type='Label'>
<b:includable id='main'>
<div id='menu4'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Quizás el código de tu plantilla sea diferente a este, en todo caso fíjate en la primera línea y la última.
Selecciona todo el código anterior, bórralo y sustitúyelo por el siguiente:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

♠ Mira en vista previa y si todo salió bien, damos click a guardar.

Cualquier duda será bienvenida!

Widgets de Michael Jackson

Michael Jackson ha fallecido, es una gran pérdida para la música y para sus seguidores, pero lo que quedará para siempre será su legado musical.
Y revisando un comentario que dejaron en mi blog, encontré una web que pone a disposición widgets de Michael Jackson, con un diseño muy bueno y que están con animación flash.

La página es ILoveMichael.org y seguro muchos de sus fans pondrán alguno de estos gadgets en las sidebars de sus blogs.

Aquí les pongo uno que me gustó mucho:

Algunas preguntas frecuentes

Aquí una recopilación muy pequeña de preguntas frecuentes y los links de los post que responden a esas preguntas:

1º ¿Cómo eliminar u ocultar la navbar?



Es quizás una de las preguntas más frecuentes; en realidad les ofrezco más opciones aparte de eliminar u ocultar: personalizar y agregar un botón que muestre y oculte la sidebar. Estos post son:

► La barra de navegación (navbar)
► Botón para mostrar y ocultar la navbar

2º ¿Cómo agregar una segunda sidebar o columna?

Bastante sencillo, si queremos agregar otra columna adicional a nuestro blog, veremos el siguiente post:

► Agregar una segunda columna (plantilla Mínima)

3º¿Cómo mostrar los últimos post y comentarios?

Si queremos mostrar los últimos post, vemos la siguiente entrada:

► Mostrar los últimos post en la sidebar (forma sencilla)

Y si queremos mostrar los últimos comentarios, veremos una de las siguientes entradas:

► Últimos comentarios con fecha y título del post
► Últimos comentarios (forma sencilla)

Hay más preguntas que son algo frecuentes pero las tres que mencioné son las más frecuentes y espero que les sirva esta pequeña recopilación para hallar el post que buscan.

Sobre enlaces o links (2): abrir etiquetas en una nueva ventana

En una nota anterior habíamos visto algunos códigos generales sobre los enlace o links; hoy veremos cómo abrir solamente las etiquetas del blog en una nueva ventana.

Las etiquetas nos permiten, de alguna forma, buscar algún post o entrada mediante el uso de palabras clave. Ahora vamos aver cómo hacer para que solamente las etiquetas, no todos los enlaces, se habrán en una nueva ventana.
Para ello, seguimos los siguientes pasos:

♠ Vamos a Diseño/ Edición de HTML y damos click a Expandir plantilla de artilugios.
♠ Con ayuda de CTRL+F buscamos el siguiente código:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

En algunas plantillas hay dos códigos iguales; el que vamos a usar es el primero no el segundo.
Borramos el código anterior y pegamos el siguiente:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' target='_blank'>

♠ Damos click a guardar y listo, sólo las etiquetas se abrirán en una nueva ventana, pero los demás enlaces no.