7/6/12

Tutorial Gadget Seguidores Bajo el Navbar

Hi!! este es el primer tutorial que compartire con ustedes,espero les agrade y lo entiendan XD

empezemos:


Este tutorial solo sirve para los navegadores Chrome y especialmente Firefox
 Diseño -> Elementos de página -> Añadir un gadget -> HTML / JavaScript
Pegan esto:
 
<style type='text/css'>


a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;F
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:20px; left:20px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="70" height="30"src="FOLLOW BUTTON URL" alt="PUSH" title="Follow"/></a>
</div>
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #FFCCCC;
background:url(Background URL#FFFFFF repeat-x bottom center scroll ;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
FOLLOWER GADGET CODE HERE
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><a href="http://xiuwen53.blogspot.com/"><div style="color: #FFFFFF;">
<span ></span></div></a></a></div>
</div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>


*en el color violeta deben colocar lo que es el la url de la imagen del botón
Verde podrán modificar los colores que ustedes quieran
Rojo podrán colocar un background (url de la imagen de fondo) si quieren
Cian pegaran código del gadget de seguidores

para crear el código de las nuevas  insignias de google(cajita de seguidores) deberán ir aquí:
para que puedan pegarlo en el color cian

y si quieren usar el que ya tienen tendrán que buscar en edición HTML-> Expandir plantillas de artilugios->Ctrl –F ->y buscar allí Followers o como le tengan el titulo a ese gadget y copiar el link algo parecido a este (ejemplo):

debera quedarles asi

1 comentario:

  1. Gracias por el tutorial,ya lo he hecho y me a quedado muy bien ^^

    ResponderEliminar