Añade el botón de Pinterest para compartir tus post

Pinterest es una red social que está de moda y si queremos tener en el blog un botón para compartir nuestras entradas, hoy les ensñaré cómo hacerlo.

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Escogemos el lugar donde queremos que está el botón (puede ser al inicio o al pie de le entrada).

3.§ Una vez decidido el lugar para colocarlo, escogemos uno de estos tres botones.

Cabe indicar que podemos pegar el código tal como está o sino podemos separarlo y pegar el script antes de </body>:

» Botón Vertical:

<script type='text/javascript'>
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>

<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
</div>

» Botón Horizontal:

<script type='text/javascript'>
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>

<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
</div>

» Botón sin contador:

<script type='text/javascript'>
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>

<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='pin-it-button' count-layout='none' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
</div>

Visto en : LatestHack y Tumblring

Crear una página de fans en Facebook

Hoy vamos a ver cómo crear una página de fans para nuestro blog.

1.§ Lo primero que hacemos es acceder a Facebook con nuestro correo y contraseña de siempre y luego entramos a esta página de Facebook.

2.§ Veremos que aparece una página con dos formularios, uno llamado "Página de la comunidad" y otro "Página oficial". Usaremos el que dice "Página oficial".

3.§ Ahora marcamos la opción Marca, producto u organización y de la lista desplegable damos click en Sitio web; llenamos el apartado llamado Nombre de la página con el nombre de nuestro blog y marcamos la opción donde indicamos que somos representantes del blog, en este caso, tal como lo muestra la siguiente imagen:

Click en la imagen para ampliar

4.§ Damos clik a Crear una página oficial y con eso termina el proceso; nuestra página ya ha sido creada ahora sólo debemos cargar alguna imagen (puede ser la cabecera de nuestro blog) llenar algunos datos y, claro, darla a conocer en nuestro blog para que los seguidores de nuestro blog puedan hacerse fans.

Agregar botón para votar en Bitácoras.com

Una pregunta que me han planteado frecuentemente es cómo agregar los botones que nos proporciona Bitacoras.com para que nuestros lectores puedan votar por nuestros post. Hoy vamos a ver cómo hacerlo.

1.§ Vamos a Diseño - Edición de HTML y Expandir plantilla de artilugios.

2.§ Ahora buscamos:

<p class='post-footer-line post-footer-line-3'/>

3.§ Debajo del código mencionado en el paso 2.§, pegamos cualquiera de los siguientes códigos, con el ícono que más nos guste:

» Botón grande:

<a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/big/&quot; + data:post.url' style='vertical-align:middle;border:0;' title='Votar esta anotación en Bitacoras.com'/></a>

» Botón normal:

<a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/normal/&quot; + data:post.url' style='vertical-align:middle;border:0;' title='Votar esta anotación en Bitacoras.com'/></a>

» Botón Mini:

<a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/mini/&quot; + data:post.url' style='vertical-align:middle;border:0;' title='Votar esta anotación en Bitacoras.com'/></a>

» Botón Mini sin fondo:

<a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/mini2/&quot; + data:post.url' style='vertical-align:middle;border:0;' title='Votar esta anotación en Bitacoras.com'/></a>

» Botón Mini sin texto:

<a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url' title='Votar esta anotación en Bitacoras.com'><img alt='Votar esta anotación en Bitacoras.com' src='http://static5.bitacoras.com/images/agregador/bitacorascom16x16.gif'/></a>

NOTA
Si deseas agregar el botón al interior de las entradas, pega el código debajo de <data:post.body/>

Ocultar / eliminar el Suscribirse a entradas Atom

Han sido varias las personas que me han preguntado cómo eliminar u ocultar el enlace que aparece por defecto en la parte inferior de las entradas, el Suscribirse a: Entradas (Atom). Hoy vamos a ver cómo ocultar o eliminar este enlace.

PARA LAS ANTIGUAS PLANTILLAS

Si usamos una plantilla antigua, es decir, que no está hecha con el nuevo Diseñador de plantillas, entonces haremos lo siguiente:

1.§ Vamos a Diseño - Edición de HTML.

2.§ Buscamos lo siguiente y agregamos el código que está en negrita:

.feed-links {
clear: both;
line-height: 2.5em;
visibility:hidden;
display:none;
}

3.§ Damos click a Guardar.

PARA LAS NUEVAS PLANTILLAS

Si usamos una de las nuevas plantillas entonces seguimos el paso 1.§ y buscaremos el siguiente código, añadiendo lo que está en negrita:

.blog-feeds, .post-feeds {
margin: 1em 0;
text-align: center;
color: $(feed.text.color);
visibility:hidden;
display:none;
}

❁ NOTA:
Debemos de tener en cuenta que el código puede no ser igual, puede cambiar un poco, lo más importante es añadir lo que está en negrita:
visibility:hidden;
display:none;

En un futuro post veremos, para los que deseen conservar este enlace, cómo personalizarlo: cambiando texto, agregar algún ícono, etc.

Marcadores redes sociales con BubbleUp jQuery

Hoy vamos a ver una nueva forma de hacer nuestros marcadores de redes sociales más vistosos con este nuevo efecto-burbuja de Aext.net

Para ello usaremos un plugin de jQuery y claro la libreria jQuery. La DEMO pueden verla casi al final de la entrada.

1.§ Lo primero que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente. Si no la tenemos, entonces haremos lo siguiente: ingresamos a Diseño - Edición de HTML y buscamos la etiqueta </head>. Antes de éste, pegamos el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

2.§ A continuación descargamos el siguiente archivo .js ↪ Descargar .
Posteriormente lo subimos a nuestro alojamiento preferido.

3.§ Nuevamente buscamos </head> y debajo del primer código que pegamos, pegaremos el siguiente:

<script src='http://www.alojamiento.com/jquery.bubbleup.js' type='text/javascript'/>

<script type='text/javascript'>
$(function(){
$(&quot;ul#menu li img&quot;).bubbleup();
});
</script>
<script type='text/javascript'>
$(function(){
$(&quot;div#demo ul#menu li img&quot;).bubbleup({tooltip: true, scale:64});
});
</script>

Reemplazamos lo que está en negrita por la URL de la página donde subimos nuestro archivo.

4.§ Para agregar los estilos CSS, buscamos ]]></b:skin> y encima de éste pegaremos el siguiente código:

✵ Ver CSS [+/-]

div#demo ul#menu{
margin:5px 0px;
list-style:none;
display:inline-block
}
div#demo ul#menu li{
padding:0px;
float:left;
position:relative;
margin-left:5px;
margin-right:5px;
width:48px;
height:48px
}
div#demo ul#menu li a{
position:absolute
}
div#demo ul#menu li img{
position:absolute;
width:48px;
top:0px;
left:0px;
padding:0px;
margin:0 8px 0 0;
border:none;
overflow:hidden
}
#bubbleupfeatures tr th, #bubbleupfeatures tr td{
border:1px solid #F0F0F0;
padding:5px;
text-align:left
}
#bubbleupfeatures tr th{
background-color:#F0F0F0
}

5.§ Finalmente, vamos a Diseño - Elementos de la página - Añadir un gadget y HTML/Javascript. En el gadget pegaremos el siguiente código:

<div id="demo">
<ul id="menu">
<li><a href="URL-de-la-página" >
<img src="http://img245.imageshack.us/img245/6186/feedyb.png" alt="Feed via RSS" /></a></li>
<li><a href="URL-de-la-página" >
<img src="http://img36.imageshack.us/img36/7931/emailmh.png" alt="Email" /></a></li>
<li><a href="URL-de-la-página" >
<img src="http://img541.imageshack.us/img541/5271/twitterjp.png" alt="Síguenos en Twitter" /></a></li>
<li><a href="URL-de-la-página" >
<img src="http://img442.imageshack.us/img442/3434/facebookha.png" alt="En Facebook" /></a></li>
<li><a href="URL-de-la-página">
<img src="http://img580.imageshack.us/img580/8707/deliciousr.png" alt="Delicious" /></a></li>
<li><a href="URL-de-la-página">
<img src="http://img840.imageshack.us/img840/7849/technorati.png" alt="Technorati" /></a></li>
</ul>
</div>

Reemplazamos URL-de-la-página por la dirección url de nuestras redes sociales. Por cierto, las imágenes las aloje en Imageshack pero si desean pueden guardarlas y alojarlas en un servidor propio.

Y este es el resultado (pasar el mouse por encima de los íconos):

Algunas notas adicionales:
» Podemos usar otros íconos y reemplazarlos cambiando la URL de los mismos en el código HTML (paso 5.§)
» Este código funciona perfectamente en Opera, Safari, Firefox e Internet Explorer; sin embargo, el efecto no se nota en IE6.

Visto en : Aext.net

Green Thumb Social Icons

Green Thumb es una colección primaveral de íconos de las principales redes sociales.

CARACTERÍSTICAS

Pack de 12 íconos de las principales redes sociales: RSS, Delicious, Facebook, Design Bump, Design Float, Digg, Linkedin, Myspace, Reddit, Stumbleupon, Technorati y Twitter.
Autor : Chris Thurman
Formatos: PNG, ICO.
Tamaños: 256x256, 128x128, 64x64, 32x32.

Descargar

Íconos de redes sociales científicos

Bulb Social Media Icons es una colección de íconos científicos,en forma de matraz, con las principales redes sociales.

CARACTERÍSTICAS

Pack de 9 íconos de las principales redes sociales.
Autor : Sargsyan de DeviantArt
Formato: PNG.

Descargar

Set de íconos de redes sociales en 3D

3D Social Icons es una colección de íconos con las principales redes sociales cuya peculiaridad es que están dibujados o hechos en 3D lo que les da un efecto muy especial.

CARACTERÍSTICAS

Pack de 20 íconos de las principales redes sociales.
Autor : Pink Moustache
Formato: PNG.
Tamaños: 128x128,64x64 px.

Descargar

Marcadores sociales con efecto opacidad o transparencia

Ya habíamos visto como agregar marcadores sociales a nuestro blog. Hoy les vamos a darles un toque especial con un efecto de opacidad.



1.§ Lo que tenemos que hacer es seguir los pasos de este post, pero en lugar del código que usamos, pegaremos el siguiente código tal como lo indica el post que mencioné:

<div class='msociales'>
<ul>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='msociales-redes' src='http://img30.imageshack.us/img30/1893/delicious24x24s.png'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='msociales-redes' src='http://img30.imageshack.us/img30/8708/digg24x24.png'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='msociales-redes' src='http://img17.imageshack.us/img17/6836/google24x24.png'/></a></li>
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='msociales-redes' src='http://img2.imageshack.us/img2/1722/technorati24x24.png'/></a></li>
<li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' class='msociales-redes' src='http://img30.imageshack.us/img30/3479/magnolia24x24.png'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='msociales-redes' src='http://img30.imageshack.us/img30/7517/reddit24x24.png '/></a></li>
<li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='msociales-redes' src='http://img14.imageshack.us/img14/5392/blinklist24x24.png'/></a></li>
</ul>
</div>

2.§ Ahora buscamos ]]></b:skin> y encima de éste pegaremos:

.msociales ul{
display:inline;
font-size:100%;
margin:0pt !important;
padding:0pt !important
}
.msociales li{
display:inline;
list-style-type:none;
background:transparent none repeat scroll 0%;
margin:0pt;
padding:2px
}
.msociales img{
border:0pt none;
float:none;
margin:0pt;
padding:0pt
}
.msociales-redes{
opacity:0.4;
filter: alpha(opacity=40);
}
.msociales-redes:hover{
opacity:2;
filter: alpha(opacity=200);
}

3.§ Guardamos los cambios.

NOTA:

El efecto de transparencia u opacidad funciona en Opera, IE7, Firefox y Safari.

► Si deseas puedes aplicar el efecto pushbutton a los marcadores sociales, para ello mira esta entrada » Marcadores redes sociales con efecto pushbutton

Íconos de redes sociales de Halloween

Quedan muy pocos días para Halloween y qué mejor que adornar nuestro blog con algunos de estos íconos diseñados por TNerd.com.

CARACTERÍSTICAS

Pack de seis íconos de las principales redes sociales.
Formatos: PNG, PSD.
Tamaños: 32x32 , 64x64.

Descargar

La colección también incluye 2 wallpapers de Halloween que pueden ser descargados en el mismo enlace de descarga de arriba.

Marcadores redes sociales con efecto pushbutton

Hace tiempo, habíamos visto como agregar el efecto pushbutton a imágenes e íconos, y como han sido varios los que me han preguntado cómo agregar ese efecto a los marcadores de redes sociales que insertamos en el blog en un post anterior, hoy vamos a verlo.

Lo que tenemos que hacer es seguir los pasos de este post, pero en lugar del código que usamos, pegaremos el siguiente código tal como lo indica que el post que mencioné:

<span class='pushbutton'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' src='http://img30.imageshack.us/img30/1893/delicious24x24s.png'/></a></span>
<span class='pushbutton'><a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' src='http://img30.imageshack.us/img30/8708/digg24x24.png'/></a></span>
<span class='pushbutton'><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' src='http://img17.imageshack.us/img17/6836/google24x24.png'/></a></span>
<span class='pushbutton'><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' src='http://img2.imageshack.us/img2/1722/technorati24x24.png'/></a></span>
<span class='pushbutton'><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' src='http://img30.imageshack.us/img30/3479/magnolia24x24.png'/></a></span>
<span class='pushbutton'><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' src='http://img30.imageshack.us/img30/7517/reddit24x24.png '/></a></span>
<span class='pushbutton'><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' src='http://img14.imageshack.us/img14/5392/blinklist24x24.png'/></a></span>

♠ Guardamos los cambios y listo!

Marcadores de redes sociales en Blogger

Han sido varios los que me han preguntado como agregar íconos de redes sociales a su blog. Hoy vamos a ver cómo hacerlo y más adelante veremos como darle algunos "efectos" (pushbutton, transparencia,etc.)


Para colocar los íconos haremos lo siguiente:

♠ Vamos a Diseño - Edición de HTML y Expandir plantilla de artilugios.
♠ Con ayuda de CTRL+F buscaremos lo siguiente:

<p class='post-footer-line post-footer-line-3'/>

♠ Antes del código anterior, pegaremos lo siguiente:

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' src='http://img30.imageshack.us/img30/1893/delicious24x24s.png'/></a>
<a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' src='http://img30.imageshack.us/img30/8708/digg24x24.png'/></a>
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' src='http://img17.imageshack.us/img17/6836/google24x24.png'/></a>
<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' src='http://img2.imageshack.us/img2/1722/technorati24x24.png'/></a>
<a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' src='http://img30.imageshack.us/img30/3479/magnolia24x24.png'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' src='http://img30.imageshack.us/img30/7517/reddit24x24.png '/></a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' src='http://img14.imageshack.us/img14/5392/blinklist24x24.png'/></a>

Damos click a guardar y eso sería todo. Si queremos podemos agregar más redes sociales o cambiar los íconos que les proporcione por otros.

Por cierto si desean alojar directamente los íconos, aquí les dejo el link de la colección de íconos que usé » Descargar

► Iconos vía Fasticon

Íconos sociales de Plechi

En DeviantART podemos encontrar una colección muy bonita de 16 íconos vectoriales de redes sociales hechos por Plechi.


► Descargar: DeviantART

Íconos de redes sociales en 3D

Insic Designs ha sacado dos colecciones muy bonitas de íconos de redes sociales en 3D. Aquí una muestra:

» Colección #1:



Descarga : Insic Designs

» Colección #2:



Descarga : Insic Designs

Íconos sociales "hechos de madera"

Puede que el título os parezca extraño, pero así es. En Pink Moustache podrán encontrar esta hermosa colección de íconos de redes sociales que tienen la apariencia de estar hechos en madera.
La colección está formada por 11 iconos en formato PNG de 64x64.


► Descargar: Pink Moustache

Í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

Í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

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.

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.

IconPot » 2500 íconos en un solo lugar

IconPot es un lugar donde podremos descargar íconos para nuestro blog. Posee una colección de más de 2500 íconos , que están en libre descargar, es decir, que podremos descargarlos gratuitamente.

Debo de decir que me han encantado muchos de ellos.



► IconPot