Poner Botón Recomendar en Blogger (Fácil y Rápido)

Poner el botón recomendar en blogger es muy fácil, en este post te diré como puedes añadir el botón flotante Recomendar de Facebook en la esquina derecha del blog. Para lograr el objetivo tenemos que hacerlo mediante  CSS, como lo hicimos en este post. Puedes verlo funcionando en PCinternity.

Poner botón recomendar de Facebook en blogger

Ve a Diseño > Edición de HTML > al final de la plantilla, busca la etiqueta > </body>


Justo antes pega el siguiente código:

<!-- Botón Flotante Facebook -->
<div style="display:scroll;position:fixed;bottom:5px;right:0px;"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FPCinternity&send=false&layout=box_count&show_faces=false&width=500&action=recommend&font=verdana&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:65px;"></iframe></div>
<!-- Final Botón Flotante Facebook -->

Ahora, dirígete a Facebook developers, tienes que poner la URL de tu página de Facebook, y has clic en "Get  Code", verás que te genera un iframe, tienes que copiar solo la URL algo parecida a la que esta en color rojo en la parte de arriba, pero te dejo una captura:

Solo copia esa URL, y la remplazas por la URL  que esta de color rojo en el código de arriba. Eso es todo, ya tendrás tu botón de recomendar en tu blog.

Para poner el botón recomendar al lado izquerdo del blog, cambiamos right por left.

Menú horizontal con efecto Slide jQuery

Hoy día les traigo este bonito menú horizontal con un bonito efecto jQuery, el menú está conformado de solapas, las cuales estarán escondidas hasta la mitad en la parte superior del blog, cuando el usuario haga clic el menú desplegar las solapas hacía afuera con un bonito efecto, y luego volverán a su posición normal. Pueden ver la Demo.

Este menú lo vimos anteriormente, pero de forma vertical, pueden ver el post . Para ponerlo en nuestro blog, es fácil, si tenemos una plantilla del diseñador de plantillas de blogger, tenemos que hacer algunos cambios en nuestra plantilla antes de seguir con la instalación del menú, lee este artículo. Si tienes otra plantilla que no sea del diseñador de plantillas de blogger, no tienes que hacer ningún cambio.

Primero ve a Diseño > Edición de HTML > busca  la etiqueta >  </head>

Justo antes pegamos el siguiente código:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

Ahora, busca la etiqueta ]]></b:skin>

Justo antes pegamos el código CSS para darle estilo:

/* CSS menú de Navegación Slide Horizontal*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .inicio a{
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .pantallas a {
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .herramientas a {
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .telefonos a {
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .rssfeed a {
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .camaras a {
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .tv a {
background-image: url(URL-DE-TU-IMAGEN);
}

Por último, ve a Diseño > Añadir gadget > elije > HTML/Javascript > y pega el siguiente código:

<ul id="navigation">
<li class="inicio"><a href=""><span>Inicio</span></a></li>
<li class="pantallas"><a href=""><span>Pantallas</span></a></li>
<li class="herramientas"><a href=""><span>Herramientas</span></a></li>
<li class="camaras"><a href=""><span>Camarás</span></a></li>
<li class="rssfeed"><a href=""><span>Feed Rss</span></a></li>
<li class="telefonos"><a href=""><span> Teléfonos </span></a></li>
<li class="tv"><a href=""><span> Televisión </span>
</a></li></ul>

Si has hecho todo bien, te saldrán las solapas pero sin imágenes, tu tienes que subir tus imágenes a tu alojamiento de imágenes,  luego tomar la URL y pegarla donde índica.

Eso  es todo, que disfruten de este bonito menú.

Chapas para Facebook con Chapa Face

Las chapas para Facebook están muy de moda últimamente, es por eso que hoy le daré a conocer una web donde pueden encontrar chapas para Facebook gratis.

Chapas para Facebook con Chapa Face

Chapa Face, es un sitio que cuenta con una cantidad innumerable de chapas para tu perfil de Facebook, hay chapa para todos los gustos, así que si te gustan las chapas, este post te gustará. Ya que podrás tener una foto de perfil más llamativa y divertida con el símbolo, escucho, o simplemente con tu frase favorita.

En Chapa Face las chapas están organizadas por categorías, algo que hace que des más rápido con la chapa que se ajuste a lo que buscas. Las categorías que puedes encontrar son:

Categorías

• Deportes

• Animales

• Causas

• Festividades

• Marcas

• Emoticonos

• Celebridades

• Banderas

• Creencias

• Políticas

• Personalizadas

• Sugerir chapa

Como puedes ver, hay muchas categorías, así que para escoger una chapa a corde a tus gustos, puedes seleccionar la categoría que más te llame la atención, y busca tu chapa para Facebook.

Bueno, espero que les guste, y solo me queda decirles, diviértanse creando Chapas para Facebook gratis.

Enlace | Chapa Face

Vía  |  GentedeFacebook