Colocar Redes Sociales y Favicon en Blogger. Hola amigos, hoy vamos con el paso #7 de Como Crear un Blog en Blogger. En esta ocación os explicare como colocar sus Redes Sociales en el Blog, como también poner algunos Gadgert y otras cositas que iremos viendo en esta explicación.
Agregar tu pagina de Facebook para recibir "Me gusta" desde tu Blog
Sigue los siguientes pasos:
Dirigete a este enlace
Luego baja un poco la pantalla y te saldrá una imagen como esta.
Width: Corresponde al ancho del Gadget. Lo dejaremos en 250.
Diseño: Lo dejaremos en Standart.
Tipo de acción: Like.
Tamaño del botón: A su elección.
Una vez que tenemos todo listo, daremos clic al botón que dice Obtener código y utilizaremos el código que sale en el paso 3. Este código lo utilizaremos después de realizar lo siguiente.
Plantilla >> Editar HTML y buscamos la siguiente linea:
<body expr:class='"loading" + data:blog.mobileClass'>
Debajo de esa linea, pegaremos el siguiente código:
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
Guardamos Tema.
Ahora vamos a Diseño >> Añadir un Gadget >> HTML Java/Script y pegaremos el código que obtuvimos anteriormente (Paso 3).
Agregar tu Twitter para conseguir seguidores
Para eso simplemente dirígete a este enlace
Luego copiamos el codigo que se nos genera y lo agregamos al Blog.
Para agregarlo vamos a:
Diseño >> Añadir un Gadget >> HTML/JavaScript
Agregar Boton Google+ para compartir
Para eso realizaremos lo siguiente:
Diseño >> Añadir un Gadget >> HTML/HavaScript y pegamos lo siguiente
<!-- Coloca esta etiqueta en la sección "head" o justo antes de la etiqueta "body" de cierre. --><script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'es-419'}
</script>
<!-- Coloca esta etiqueta donde quieras que aparezca Botón de +1. --><div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" data-href="URL DE TU PÁGINA"></div>
{lang: 'es-419'}
</script>
<!-- Coloca esta etiqueta donde quieras que aparezca Botón de +1. --><div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" data-href="URL DE TU PÁGINA"></div>
Agregar Gadget de seguidores del Blog, Suscribete al Blog, Visitas a la pagina
Para eso vamos a Diseño >> Añadir un Gadget
Luego buscamos los Gadget que queramos poner.
Colocar Redes Sociales Flotantes
Colocar Redes Sociales Flotantes
Para eso vamos a:
Diseño >> Añadir un Gadget >> HTML/JavaScript
Luego pegamos este código:
<style type="text/css">
ul#social {
position: fixed;
margin: 0px;
padding: 0px;
top: 60px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#social li {
width: 100px;
}
ul#social li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyB1CfMyhGHbcV3t8xhvgjwWPFSyGp3DhHh5vDXxHsRH2A2HY9s3QaU5Q86ct2xjI8PBUxxVj6Qcpc-zgRkC_P0FU4j2BuUaBj6RIMHYjF7C2R8vmIUjyN5MFUc5yPgQOv4sxsOoHXOAw/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a {
background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2O0eXAQBCNwdZywsWxsusSsO7wjFfZGoHOT0TUYF-xnhVAndP-Ne_mnW1N4R_J_2G1GnxL5ptm4uaEEDMgDO4H9odrRSWo3irtl_hwqlY5COIm-UHRLlYCjSWVoA9KqJ5z6jrmKMZ03k/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a {
background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirNGgKkEAb5kvO6lRvBYgjtahavs9X7CpUlsvNeTYlvLkQc9qISlwkncyXtDtVqbR2NTK7cPmXp9SpDg7WJ8Y2zdBJ9notjpLU3XB9ZtkpYHPXeqrUc3dDXe7LssHcUltR2v5lQlC8uG0/s1600/Facebook.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
$('#social a').stop().animate({
'marginLeft': '-85px'
}, 1000);
$('#social > li').hover(
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-2px'
}, 200);
},
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-85px'
}, 200);
}
);
});
</script>
<ul id='social'>
<li class='twitter'><a href='URL DE TWITTER'></a></li>
<li class='googleplus'><a href='URL DE TU GOOGLE PLUS' title='Google Plus'></a></li>
<li class='facebook'><a href='URL DE TU FACEBOOK' title='Facebook'></a></li>
</ul>
Colocar imagen de Favicon
Para eso iremos a
Diseño >> Favicon (Editar)
Te recomiendo usar una imagen de 235 x 235 pixeles
Colocar Gadget de imagen
Para colocar un Gadget de imagen, donde las personas al dar clic en esa imagen, vayan al lugar que queramos llevarlos, debemos ir a:
Diseño >> Añadir un Gadget >> Imagen
Colocar Gadget ultimas noticias
Diseño >> Añadir un Gadget >> Feed
Pegamos lo siguiente:
Colocar Gadget últimos comentarios
Pegamos lo siguiente:
Diseño >> Favicon (Editar)
Te recomiendo usar una imagen de 235 x 235 pixeles
Colocar Gadget de imagen
Para colocar un Gadget de imagen, donde las personas al dar clic en esa imagen, vayan al lugar que queramos llevarlos, debemos ir a:
Diseño >> Añadir un Gadget >> Imagen
Colocar Gadget ultimas noticias
Diseño >> Añadir un Gadget >> Feed
Pegamos lo siguiente:
http://URL DE TU BLOG/feeds/posts/default
Diseño >> Añadir un Gadget >> Feed
Pegamos lo siguiente:
http://URL DE TU BLOG/feeds/comments/default
Colocar Redes Sociales y Favicon en Blogger "Vídeo" Próximamente
¿Que te ha parecido este artículo? Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco mas abajo para que te expreses siempre en el margen del respeto y asín dejar un comentario positivo como también uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por Internet !!
Sígueme en mis Redes Sociales!!!
No hay comentarios:
Publicar un comentario