Marcadores sociales con efecto opacidad y giro

En post anteriores habíamos visto cómo agregar íconos de redes sociales con los siguientes efectos: el efecto pushbutton, el efecto de opacidad y el efecto zoom.

Hoy combinaremos dos efectos: el efecto opacidad (que vimos anteriormente) y el efecto de rotación o giro.

↪DEMO
(Pasar el cursor sobre los íconos)

Para agregar este efecto seguimos los siguientes pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Con ayuda de CRTL+F buscamos <b:skin>.Si está cerrado, damos clic en la flechita negra del lado izquierdo para desplegar el código. Debajo de <b:skin><![CDATA[/* pegaremos los siguientes estilos:

/* Opacidad inicial de los íconos */
.rotatebutton img{
opacity: 0.6;
}

/* Tiempo de transición y grado de rotación */
.rotatebutton img:hover{
opacity: 1;
transition: 0.9s ;
transform: rotate(360deg);
}

3.§ Damos clic en Guardar plantilla.

4.§ Ahora elegimos el lugar donde los colocaremos. Si es en el footer de las entradas, lo colocamos en la plantilla, encima de <p class='post-footer-line post-footer-line-3'/>

Si los colocamos en la sidebar, vamos a Diseño - Añadir un gadget - HTML/Javascript .

5.§ Pegaremos el siguiente código HTML. Podemos sustituir los íconos por nuestros íconos favoritos y/o agregar más redes sociales.

<span class="rotatebutton">
<a href="Aqui URL feed" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ7KGGtGSu1kD78YrzzGbLO_Cs9zhkhTurTTe6DywHuOIzHTJNc9qhRXB0Y5kOWLVugnBnNehbxzTeTNOq4H1OH43Sh3y_iVAfUwnOKZGbRvTdsw2K6l41eK2q1vBUvweTsYAgObUZpzE/s1600/Rss-diyva.png" /></a>
<a href="Aqui URL Twitter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4J4rT7cx6IYcjHrTnc1u7DpTrjOfbUh0ndEK8a8g-zBfM_vtk8rxNa_YHvz964xR_Qupb5o8q7q_eAh1JuYLzTneUb8-Byr-8NMA0Jw2su0z-lfg-pCeiikjN1OQUAOOtHc3Gwg96_to/s1600/Twitter-diyvapng.png" /></a>
<a href="Aqui URL YouTube" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxV7shCD5AMrAoNMBeI6hNMvpPmEjbFKLTnwlQNYccFeuutf9YjxbaGRKU2fRMFoi672VjCOpcy7269cS2QLAbWdlRsKjQGir-oSZVZDMnkmObCQ2jWllKzJb4J16jex1zUZtN_yHIKc/s1600/Youtube-diyva.png" /></a>
<a href="Aqui URL Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIXKTDAG5cnDgpOX73dlEQbBOUG2yslAItNAoChVPqLtDWZWdOlvzvFTn3YvLd2M-WbDAb7bUCMc-jpwWOvf3UatwBZdAocpSTBiqQhwEJtFCfwKkSYL6-uYauB76Lc74lmcZJAKAWuW0/s1600/Facebook-diyva.png" /></a>
<a href="Aqui URL Pinterest" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUt1VdZL5ptVkN_2q75hNA_ea313bw5SAyQ9q0XjtVJFXZQ6oFnjsB6yfrKJXx_d1GlE29_cAu2BSFSvKRPOBRH6ROUmBwzWlDD8Ze6TJBHLLb_X-TEZfdXW0ETUVjS56djHwJ-ZJyQLM/s1600/Pinterest-diyva.png" /></a>
</span>

6.§ Damos clic a Guardar y listo.

Si te gustó el post, compártelo con tus amigos. Sígueme en mis redes sociales para más novedades. Y si tienes alguna duda sobre el post, déjame tu comentario en esta entrada.

Marcadores sociales con efecto zoom

En post anteriores habíamos visto cómo agregar íconos de redes sociales con dos efectos muy vistosos: el efecto pushbutton y el efecto de opacidad.

Hoy veremos otro efecto que podemos agregarle a nuestros marcadores para darles un toque especial: el efecto zoom.

↪DEMO
(Pasar el cursor sobre los íconos)

Para agregar este efecto seguimos los siguientes pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Con ayuda de CRTL+F buscamos <b:skin>.Si está cerrado, damos clic en la flechita negra del lado izquierdo para desplegar el código. Debajo de <b:skin><![CDATA[/* pegaremos los siguientes estilos:

/* Tamaño de los íconos sin pasar el mouse y tiempo de transición */
.zoombutton img{
margin: 5px 3px 3px 2px;
text-align: center;
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
}

/* Tamaño de los íconos al pasar el mouse */
.zoombutton img:hover{
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
}

3.§ Damos clic en Guardar plantilla.

4.§ Ahora elegimos el lugar donde los colocaremos. Si es en el footer de las entradas, lo colocamos en la plantilla, encima de <p class='post-footer-line post-footer-line-3'/>

Si los colocamos en la sidebar, vamos a Diseño - Añadir un gadget - HTML/Javascript .

5.§ Pegaremos el siguiente código HTML. Podemos sustituir los íconos por nuestros íconos favoritos y/o agregar más redes sociales.

<span class="zoombutton">
<a href="Aqui URL feed" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ7KGGtGSu1kD78YrzzGbLO_Cs9zhkhTurTTe6DywHuOIzHTJNc9qhRXB0Y5kOWLVugnBnNehbxzTeTNOq4H1OH43Sh3y_iVAfUwnOKZGbRvTdsw2K6l41eK2q1vBUvweTsYAgObUZpzE/s1600/Rss-diyva.png" /></a>
<a href="Aqui URL twitter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4J4rT7cx6IYcjHrTnc1u7DpTrjOfbUh0ndEK8a8g-zBfM_vtk8rxNa_YHvz964xR_Qupb5o8q7q_eAh1JuYLzTneUb8-Byr-8NMA0Jw2su0z-lfg-pCeiikjN1OQUAOOtHc3Gwg96_to/s1600/Twitter-diyvapng.png" /></a>
<a href="Aqui URL YouTube" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxV7shCD5AMrAoNMBeI6hNMvpPmEjbFKLTnwlQNYccFeuutf9YjxbaGRKU2fRMFoi672VjCOpcy7269cS2QLAbWdlRsKjQGir-oSZVZDMnkmObCQ2jWllKzJb4J16jex1zUZtN_yHIKc/s1600/Youtube-diyva.png" /></a>
<a href="Aqui URL Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIXKTDAG5cnDgpOX73dlEQbBOUG2yslAItNAoChVPqLtDWZWdOlvzvFTn3YvLd2M-WbDAb7bUCMc-jpwWOvf3UatwBZdAocpSTBiqQhwEJtFCfwKkSYL6-uYauB76Lc74lmcZJAKAWuW0/s1600/Facebook-diyva.png" /></a>
<a href="Aqui URL Pinterest" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUt1VdZL5ptVkN_2q75hNA_ea313bw5SAyQ9q0XjtVJFXZQ6oFnjsB6yfrKJXx_d1GlE29_cAu2BSFSvKRPOBRH6ROUmBwzWlDD8Ze6TJBHLLb_X-TEZfdXW0ETUVjS56djHwJ-ZJyQLM/s1600/Pinterest-diyva.png" /></a>
</span>

6.§ Damos clic a Guardar y listo.

Si te gustó el post, compártelo con tus amigos. No olvides seguirme en mis redes sociales. Y si tienes alguna duda sobre el post, déjame tu comentario en esta entrada.

Cómo verificar tu blog en Pinterest

Si tienes una cuenta en Pinterest, una buena idea es colocar un link a tu sitio web o blog para generar más visitas.

Pero al momento de colocar la dirección URL de nuestra web nos pide verificarla. Y en este post veremos cómo hacerlo. Sólo sigue estos pasos:

1.§ En Pinterest, agregamos la url de nuestro blog de Blogger o sitio web. Le damos en el botón de Verificar sitio web.

2.§ En la siguiente pantalla nos aparecerá la opción de verificar nuestro sitio web de dos formas: descargando un archivo de verificación o verificando con una metaetiqueta. Damos clic en la segunda opción.

3.§ Copiamos la línea de código y nos vamos al blog, dejando abierta la ventana de la página de Pinterest.

4.§ Ingresamos a Plantilla y luego a Editar HTML.

5.§ Damos un clic dentro de la plantilla y con CTRL+F buscamos la etiqueta <head>. Y debajo, pegamos el código de la metaetiqueta que copiamos en Pinterest.

6.§ Guardamos los cambios en la plantilla. Ahora regresamos a Pinterest y damos clic al botón Completar la verificación. Aparecerá una ventana confirmando que nuestro sitio ha sido verificado.

» Si deseas, también puedes seguir nuestra página en Pinterest.

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