Registro

sábado, 30 de junio de 2018

Colocar Redes Sociales y Favicon en Blogger


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.



URL de las personas deben indicar que les gusta: Aquí colocas la URL de tu pagina de Facebook.
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='&quot;loading&quot; + 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 = &quot;//connect.facebook.net/es_LA/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</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>


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


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:


http://URL DE TU BLOG/feeds/posts/default


Colocar Gadget últimos comentarios


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