6 jul. 2014

Tutorial: poner gadget de seguidores deslizante

image

Como han visto hoy he puesto el gadget de seguidores arribita a la derecha del blog deslizante :3 La verdad es que me ha costado un poquito, ahora mismo en España son las 6 de la mañana osea que no he dormido nada xD Pero bueno, les dejare el tuto.

Vamos a editar plantilla y buscamos: ]]></b:skin>
Arriba de eso pegamos este código:

.barrightblogger { background: url('url imagen sigueme');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:50px; z-index:1000;}
.barrightbloggerc { background: url('url imagen sigueme');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:50px; z-index:1100;}
.barconteblogger {margin:12px 0 0 47px}
Donde pone url de la imagen sigueme tienes que poner el url de la imagen que va por fuera que pasas el mouse y se abre el gadget, como la que yo tengo.

Ahora buscamos la etiqueta: </body>
Arriba de ella vamos a pegar el código para modificar todos los colores, bordes, y esas cosas. Es este:

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><div class="barconteblogger">
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-3082905992843096175" style="width:200px;border:7px dashed #9F81F7;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ffffff';
skin['ENDCAP_BG_COLOR'] = '#FFFFFF'; /* Esto es el color del fondo de la barrita donde pone ''participar en este sitio''*/
skin['ENDCAP_TEXT_COLOR'] = '#E2A9F3'; /* Color de las palabras*/
skin['ENDCAP_LINK_COLOR'] = '#BE81F7'; /* Color de los links*/
skin['ALTERNATE_BG_COLOR'] = '#ffffff'; /* Color del fondo*/
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#BE81F7'; /* Color de los cuadraditos*/
skin['CONTENT_TEXT_COLOR'] = '#848484';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#F5A9F2';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#848484';
skin['CONTENT_HEADLINE_COLOR'] = '#E2A9F3';
skin['NUMBER_ROWS'] = '6';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-3082905992843096175',
site: 'NÚMERO DE TU SITE' },
skin);
Ahora atención:

Lo que está en rojo (NÚMERO DE TU SITE) al final del código, es el ID de tu blog. Para obtenerlo, abre tu blog y haz click derecho en cualquier lado. Te saldrá ''ver código fuente de la página'' pinchas ahí. Ahora pulsa Ctrl+F para buscar la palabra ''site''. Te saldrán varias, vete bajando hasta encontrar el número.
Imagen de ayuda:

Haz click para verla en grande

 Ahora personaliza:

(Volvemos al código)

Lo que está en rosa:
width es la anchura del gadget, si pones menos será más estrecho si pones más, pues más ancho.

donde pone ''border:7px'' es la anchura del borde. Si pones más, el borde serás más ancho, y si pones menos, pues más finito.

y por último donde pone dashed es el tipo de borde, dashed es como lo tengo yo ahora mismo. Puedes poner solid, etc~ Y el código es el color del borde.

Y bueno, eso es todo, no es muy difícil. Ahora les dejaré la imagen que yo tengo de ''sigueme'' por si la quieren usar, no me importa :3

 Muchas gracias a mis ya 171 seguidores, wow, de verdad, para mi es bastante ya que en pocos días unas cuantas bloggeras me han seguido, y pues, tenía que dar las gracias Ya somos más de 170 (un intruso(?) xD)
image

La imagen de ''sigueme'':
http://i1171.photobucket.com/albums/r553/yani-msn/hhhggg_zpscb53653a.png

Muchos besos y espero les haya sido útil

Notita: ya me acabé Kokoro Connect, en la próxima entrada les hago la reseña.

Créditos:   

6 comentarios:

  1. Me salen 2 site, pero ninguno es el número de mi blog u.u
    Si me pudieras ayudar....
    Byekawaii!!

    ResponderEliminar
    Respuestas
    1. Hola Amanda :3
      Busqué la palabra ''site'' en tu blog (con tu permiso uwu) y encontré fácilmente tu número. No creo que sea adecuado escribirlo aquí, te lo comentaré por tu blog. Espero que cuando te lo diga ya te salga, besos♥

      Eliminar
  2. Wow, acabo de ver tu blog y es muy bueno ;D Gracias por seguirme! Por cierto, la canción de fondo es psfalñancpk *------* saludos!

    ResponderEliminar
    Respuestas
    1. Hello Luis, tu blog es muy mono y original, por fin me alegra ver un blogger chico xD Bienvenido a mi blog, gracias por pasarte♥

      Eliminar
  3. Hola :3, lo puse ya en mi blog y todo genial ,resulta que lo puse para una sidebar deslizante "medio que me invente usando los codigos del fanbox para face " y probando pues me salió ..........

    Volviendo al tema ...... necesito que el fondo del gadget se seguidores sea transparente en vez de blanco ¿Se puede? Gracias <3

    -Techy

    ResponderEliminar
  4. Hola, eh buscado site y no me aparece :c podrías ayudarme?

    ResponderEliminar

Gracias por dejar tu saludito ·ω· Si tienes algún error o necesitas ayuda con un tutorial, dale a ''haz click aquí'' en la cabecera y mándame un e-mail diciéndome lo que necesitas y si sólo tienes dudas de algo te contestaré en tu blog para que puedas verlo♥♥
––––•(-•RECUERDA: Si quieres afiliar y/o que visite tu blog, pídemelo en ''Afiliados'' en el menú de la cabecera, o en la C-Box (sólo en esos dos sitios, o sino no aceptaré)`•.¸¸.•´´¯`••._.•