Este sitio utiliza cookies para mejorar tu experiencia. Asumiré que estás de acuerdo con esto.
Leer más

Colocar Redes Sociales, Gadget y Favicon en Blogger

Gokustian viernes, diciembre 23, 2016
Colocar Redes Sociales, Publicidad, Gadget etc en Blogger. Que tal amigos, hoy seguimos avanzando con más cosillas para tener nuestro blog mucho mas modificado y en esta ocasión les enseñaré a colocar sus redes sociales en el blog, como también algunos gadget, publicidad ya sea como imágenes normales o con HTML entre otras cosillas. Bueno sin más que decir comencemos!!



 Agregar tu Página de Facebook para recibir "Me gusta" desde tu Blog

Sigue los siguientes pasos:

Dirígete a éste enlace
Luego baja un poco la pantalla y te saldrá una imágen cómo ésta


URL para indicar "Me gusta": Aquí colocas la url de tu página de facebook.
Width: Corresponde al ancho del gadget. Lo dejaremos en 250.
Diseño: Lo dejaremos en Standard.
Tipo de acción: Like.
Tamaño del botón: A su elección.

A medida que van modificando las casillas, podrán ver los resultados un poco más abajo de éstas. Una vez que tengan 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 buscaremos la siguiente línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'> 


Debajo de esa pegaremos lo siguiente:

<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 Plantilla.

Ahora volvemos a nuestro panel de control y vamos a Diseño >> Añadir un Gadget >> HTML/Javascript y pegamos el código que obtuvimos anteriormente (Paso 3). Con eso ya tendríamos nuestro facebook agregado a nuestro blog.




Agregar tu Twitter para conseguir seguidores

Para eso simplemente dirígete a éste enlace


Usuario: Tu nombre de usuario de twitter.
Botón grande: Para aumentar el tamaño del botón.
Idioma: Lo dejamos en Español.

Luego copiamos el código que se nos genera en la parte derecha y lo agregamos al blog.
Para agregarlo vamos a:

Diseño >> Añadir un Gadget >> HTML/Javascript


Agregar botón Google+ para compartir

 Para eso realizaremos lo siguiente:

Diseño >> Añadir un Gadget >> HTML/Javascript 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, Suscríbete al Blog, Vistas a la página

Para eso solo debemos ir a nuestro panel de control y luego a Diseño >> Añadir un Gadget 

Luego simplemente buscamos los gadget que correspondan.




Colocar imágen de Favicon

Para eso iremos a 

Diseño >> Favicon (Editar)

Te recomiendo usar una imágen de 235 x 235 pixeles (debe pesar menos de 100 KB).




Colocar gadget de imágen

Para colocar un gadget de imágen donde las personas al dar clic en esa imágen vayan al lugar donde queremos llevarlos sólo debemos ir a:

Diseño  >> Añadir un Gadget >> Imagen

Luego podemos colocar un título, un pie de foto, el enlace. Si deseamos que nuestro gadget de imágen no lleve título, entonces en lugar del título pon <h2></h2>




Colocar Gadget Últimas Noticias

Para colocar esta barra horizontal la cual informará de las últimas novedades puestas en el blog, lo que haremos será:

Diseño  >> Añadir un Gadget >> HTML/Javascript

Pegamos lo siguiente:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<style>
#headlines {
overflow:hidden;
position:relative;
line-height:25px;
background:#34495e; /* Color de fondo */
height:45px;
padding:0 0 0 135px;
}
#headlines h3 {
color:#fff;
font-family:Oswald, sans-serif; 
font-size:17px;
font-weight:400;
text-transform:uppercase;
margin-left:-115px;
margin-top:10px;
position:absolute;
}
#headlines .right_arrow {
padding:0 38px 0 110px;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUbQappaTg7xTGkR3qqtpi-4SVeIJQ6HxMykFKTJoMjjW6jmpJw7T8mVOl_8sJduKUIvTPRwQmUuTa-aa-ShqsZ37cWtFGdjod1NVcTfRgvCs5Pbn5tE_P2w-4XDPZFEx-W3fBHF7-MAr/s41/arrow.png) no-repeat right center;
height:46px;
line-height:46px;
position:absolute;
left:0;
top:0;
}
#ticker_post {
position:relative;
margin:0;
margin-left:20px;
height:50px;
width:auto;
}
.marquee {
width: 980px; /* Ancho del área donde se muestran las entradas */
overflow: hidden;
line-height: 45px;
}
.js-marquee a {
font-family:Oswald, sans-serif;
font-size:15px; /* Tamaño de los textos */
color: #FFF; /* Color de los textos */
padding-bottom: 20px;
text-decoration: none;
}
.ticker_separator {
color:#FFF; color: #FFF; /* Color del separador de las entradas */
margin:0 10px;
}
</style>
<div id='headlines'>
<h3>Lo Último</h3>
<div class='right_arrow'></div>
<script>
var blog_url = "URL DE TU BLOG/";
var numero_post = 10; // Número de entradas a mostrar
</script>
<script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div>
<div style='clear:both;'></div>
<script>
$(window).load(function() {
$('.marquee').marquee({
direction: 'left', // Dirección de la marquesina, usar left o right
duration: 25000, // Velocidad
pauseOnHover: true,
duplicated: true
});
});
</script>



Colocar Redes Sociales, Gadget y Favicon en Blogger "Vídeo"

¿Qué te ha parecido éste artículo?. Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco más abajo para que te expreses siempre en el margen del respeto y así poder dejar un comentario positivo como tambien uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por internet !!  😉


Puedes Seguirme en





Colocar Redes Sociales, Gadget y Favicon en Blogger  
Cualquier duda que tengas, puedes dejarla en los comentarios y en cuanto la vea te respondo.

¡¡No te olvides de revisar el Ranking Top 10 donde se encuentran las mejores páginas para ganar dinero por internet!!

8 Comentarios

  1. Anónimojueves, octubre 19, 2017

    excelente, como agrego mi YouTube ?

    ResponderBorrar
    Respuestas
    1. Gokustianviernes, octubre 20, 2017

      Gracias Agus, intenta mandarme un correo a quematucrisis@gmail.com para mandarte el código y así colocar tambien tu canal de youtube, ya que por éste medio no me permite. Saludos.

      Borrar
    2. Anónimoviernes, octubre 20, 2017

      ahora lo hago, tengo otra duda, en la barra de "LO ULTIMO", ya le agregue mi URL de mi canal y ya cree dos entradas de prueba pero NO ME SALE EN LA BARRA :(

      Borrar
    3. Gokustianviernes, octubre 20, 2017

      Quizas no esté funcionando el gadget amigo, actualmente no lo estoy usando por lo que no sé que sucederá.

      Borrar
  2. Anónimoviernes, octubre 20, 2017

    ah y la linea de LO ULTIMO no me sale las ultimas :c eso que copie igual y tmb mi URL de mi blog

    ResponderBorrar
    Respuestas
    1. Gokustiansábado, octubre 21, 2017

      Ni idea amigo, como te dije ya no estoy usando ese gadget. Saludos.

      Borrar
  3. Jarl Asathørnmiércoles, noviembre 08, 2017

    Hola,tengo un problema:
    Hace unas semanas cree mi blog personal, nada importante. Y quiero agregar música, lo he intentado todo y no aparece el gadget de sonido (música).
    ¿Por qué será?

    ResponderBorrar
    Respuestas
    1. Gokustianmiércoles, noviembre 08, 2017

      La verdad que nunca he utilizado un gadget para poner música por lo tanto no sabría porqué no te funciona Yarr.

      Borrar