south-pag

codigos

Bueno aqui les dejamos algunos codigos para sus web.

FACEBOOK SALE DE AL LADO: Este codigo se usa para que quede un cuadrito al lado derecho de la web que dira FACEBOOK y al pasar el mouse saldra un cuadro donde estara tu web , asi como en el mio. Ok solo copia el codigo y edita donde dice "URL DE TU WEB" y pegalo por ENCIMA DE LA PAGINA

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=URL DE TU PAGINA DE FACEBOOK&width=238&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>



<style type="text/css">
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
</style>




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
 

                                    

                                                 

TWITTER SALE DE AL LADO:
Este es un codigo que hace que el aya un logo de TWITTER al lado derecho de tu web y que al pasarle el cursor sale un cuadro con tu twitter. Ok solo tienes que modificar donde dice SOUT-PAG y cambiarlo por tu nombre de usuario, pero sin agregarle el "@" y pegarlos por ENCIMA DE LA PAGINA.

         

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript">

jQuery.noConflict();

jQuery(function (){
jQuery(".slide_likebox2").hover(function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>



<style type="text/css">
.slide_likebox2 {
float:reight;
width:288px;
height:400px;
background: url(http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/s1600/tw_ag.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 10px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
</style>


<div class="slide_likebox2">
<div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span>
<div class="likeboxwrap"><script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script>
<div id="twitterfanbox"><script type="text/javascript">fanbox_init("SouthPag");</script></div>
</div>

<style>
.FB_SERVER_IFRAME {
width: 238px !important; /* Ancho del gadget */
height: 320px !important; /* Alto del gadget */
}
</style>
</span></div>
</div>


                                                

POCICION DE LOS AVATARES DE LOS COMENTARIOS:
Bueno este es un codigo que tiene 2 formas para personalizar los avatares de los comentarios uno que es GIRADO y otro que es como si saliera la imagen del avatar digamos algo "3D", bueno si te gusta puedes agregarlo al texto por ENCIMA DE LA PAGINA.


 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script><script>$(function(e){
var imgPer=$('img[src^="http://profile.webme.com/profile/"]');imgPer.addClass("imagenComent");
var enlace=imgPer.parent().next().next();enlace.addClass("comentarioEnlace");
var comentario= imgPer.parent().parent().parent().next();comentario.addClass('comentarioTexto');
var linea=imgPer.parent().parent().parent().parent().parent().parent().next();linea.addClass("comentarioLinea");//HR
});</script>
<style type="text/css">
.imagenComent{margin-bottom:8px;
-webkit-transform:scale(1);
-webkit-transform:rotate(45deg);
-moz-transform:scale(1);
-moz-transform:rotate(45deg);
-o-transform:scale(1);
-o-transform:rotate(45deg);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
/* By-ro0driig0o.comeze.com */
}
.imagenComent:hover{
opacity:1;
z-index:1;/*http://By-ro0driig0o.es.tl*/
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
box-shadow:3px 0px 9px black;
-webkit-box-shadow:3px 0px 9px black;
-moz-box-shadow:3px 0px 9px black;
}
.comentarioTexto{
/*Clase para los comentarios, puedes editar el color o tama?o*/
}
.comentarioLinea{
/*Linea que aparece abajo de los comentarios*/
}
.comentarioEnlace{
/*Color de el nombre de usuario */
}
</style>
 

                                                        


Publicidades: Bueno este codigo es muy util con el tema de afiliamiento en tu web, ya que es son unos cuadros de publicidad... bueno te dejo el ejemplo para que los veas y bueno si te gustan sigues las instrucciones.


                  

Bueno te gustaron? ahora pegalo siguiente por ENCIMA DE LA PAGINA.

 <style type="text/css">
#banners {
margin-bottom:20px;
padding-left:10px;
}

.banner1 {-webkit-transition: -webkit-transform .15s linear;
margin-left:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner1:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner2 {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.banner2:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner3 {-webkit-transition: -webkit-transform .15s linear;
margin-left:20px;
margin-bottom:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(+12deg);
-moz-transform: rotate(+12deg);
}
.banner3:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

.banner4 {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner4:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
</style>
 

Ahora lo siguiente en cualquier pagina de CONTROLAR PAGINAS en fuente HTML y recueda CAMBIAR LOS URL DE LAS IMAGENES...

 <div id='banners'>
<a href="URL1" target="_blank">
<img class="banner1" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="105" border="0" height="105"></img></a>

<a href="URL2" target="_blank">
<img class="banner2" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="125" border="0" height="125"></img></a>

<a href="URL3" target="_blank">
<img class="banner3" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="70" border="0" height="70"></img></a>

<a href="URL4" target="_blank">
<img class="banner4" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="110" border="0" height="110"></img></a>
</div>


QUE LOS USUARIOS SE ENTEREN DE TU TWITTER DE ULTIMA HORA:
Bueno este codigo es un cuadro de tu Twitter donde aparece lo ultimo que escribiste en tu Twitter es muy util si quieres que los usuarios lo lean, solo pega este codigo en HTML y cambia en donde dice SOUTH-PAG y pone tu nombre de usuario sin el "@" y lo pegas.

twitstamp.com
     
 <center>
<img src="http://twitstamp.com/ro0driig0/standard.png" border="0" alt="twitstamp.com" />
</center>


IMAGEN QUE AUMENTA EL TAMAÑO AL PASAR EL CURSOR:
Bueno este codigo hace que al pasar el cursor sobre la imagen se agrande o aumente el tamaño en otras palabras, (Quisas en mi pag no funciona ya que no puse el 1º codigo.)

                                               

Ok si te gusto solo copia el siguiente codigo en TEXTO POR ENCIMA DE LA PAGINA.

  <style type="text/css">
.aumentar {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;

}
.aumentar:hover {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
text-decoration: none;
z-index:2;
}
</style>
 

Y ahora pega este codigo en donde quieras.. en FUENTE HTML y coloca el URL de la magen que deseas que aumente el tamaño.

<img class="aumentar" src="URL DE LA IMAGEN" /> 
 



TECLAS ARRIVA Y ABAJO: Bueno esto es muy util.. ¿Por que? ya que digamos que aun usuarios se le echo a perder su girador del mouse, con tan solo poner el mouse en la tecla puede ir hacia ARRIVA o ABAJO.
Ok no tengo ejemplo por unos errores que estamos arreglando, pero en una de esas las an visto, Ok si quieres ver si es bueno solo pega el siguiente codigo en TEXTO POR ENCIMA DE LA PAGINA.

<script language="JavaScript">

function abajo() {

window.scrollBy(0,100); // velocidad abajo

scrolldelay = setTimeout('abajo()',150); // tiempo

}
function subir() {

window.scrollBy(0,-100); // velocidad subir

scrolldelay = setTimeout('subir()',150); // tiempo

}
function stopScroll() {

clearTimeout(scrolldelay);

}
</script>
<center>
<a style="display:scroll;position:fixed;bottom:10px;right:10px;" onmouseover="abajo()" onmouseout="stopScroll()" href="" title="Ir Abajo"><img src="http://4.bp.blogspot.com/_qgZA1ny_dAs/S0QKJ3oGf7I/AAAAAAAADis/m4YOx1C9N2g/s320/arrow8b.png"/></a>

<a style="display:scroll;position:fixed;

bottom:60px;right:10px;" onmouseover="subir()" onmouseout="stopScroll()" href="" title="Ir Arriba"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S0QFsV1WD7I/AAAAAAAADhs/ZBKrnpzqBrk/s200/arrow8a.png"/></a>
</center>  
 





BOTONES DEL FACEBOOK, TWITTER Y YOUTUBE, FOTANDO ARRIVA DE TU WEB: Bueno esto es para que si no te gustan los botones al lado, los puedas poner arriva de tu web.


                                             


 <a href="URL DE TU PAGINA DE FACEBOOK" target="_blank"><img border="0" alt="" onmouseout="this.src='http://dl.dropbox.com/u/47340707/facebook-Boton1.png';" onmouseover="this.src='http://dl.dropbox.com/u/47340707/facebook-Boton2.png';" src="http://dl.dropbox.com/u/47340707/facebook-Boton1.png" style="display:scroll;position:fixed; top:0;bottom:1px;left:40px;" /></a>



<a href="URL DE TU CANAL DE YOUTUBE" target="_blank"><img border="0" alt="" onmouseout="this.src='http://dl.dropbox.com/u/47340707/Youtube-Boton1.png';" onmouseover="this.src='http://dl.dropbox.com/u/47340707/Youtube-Boton2.png';" src="http://dl.dropbox.com/u/47340707/Youtube-Boton1.png" style="display:scroll;position:fixed; top:0;bottom:1px;left:150px;" /></a>


<a href="URL DE TU TWITTER" target="_blank"><img border="0" alt="" onmouseout="this.src='http://dl.dropbox.com/u/47340707/Twitter-Boton1.png';" onmouseover="this.src='http://dl.dropbox.com/u/47340707/Twitter-Boton2.png';" src="http://dl.dropbox.com/u/47340707/Twitter-Boton1.png" style="display:scroll;position:fixed; top:0;bottom:1px;left:260px;" /></a>
 



BOTON DE TWITTER Y FACEBOOK: Este codigo es para tener logos de facebook y twitter al lado de tu web, para que al hacerle click los usuarios puedan ir a tu redes sociales.

                                            



Te gusto bueno entonces copia este codigo en TEXTO POR ENCIMA DE LA PAGINA
 
 <a href='URL DE LA PAGINA DE FACEBOOK' target='_blank' title='Sígueme en Facebook'><img src='http://2.bp.blogspot.com/_dsEG33PDaHw/TJvjtOw87LI/AAAAAAAAAXg/lBmeNWBHuCc/s1600/boton-fb.png' style='display:scroll;position:fixed;bottom:400px;right:0px'/></a>
<a href='URL DE TU TWITTER' title='Sígueme en Twitter'><img border='0' src='http://3.bp.blogspot.com/_qgZA1ny_dAs/Sv9ShGIZOoI/AAAAAAAADBU/zvfuqM5TP58/s320/twitter-badge-classic.PNG' style='display:scroll;position:fixed;bottom:225px;right:0px;'/></a>

 






TEXTO MOVIL Y FIJO: Este codigo se usa como titulares donde un titulo se queda fijo y otro se mueve.

Ejemplo South pag este se mueve

Ejemplo no se mueve...
Te gusto ok solo copia y edita donde dice aqui tu texto movible y donde dice aqui tu texto inmovil y copia el codigo editado y pegalo donde quieras en FUENTE HTML.


<center>
<br />
<br />
<span style="z-index: 1; font-family:Verdana font-weight: bold; font-size: 20pt; color: #9900FF"><marquee>AQUI TU TEXTO QUE SE MUEVE</marquee></span><br />
<span style="position: relative; top: -32px; left: 0px; z-index: 2; font-family: Verdana, Arial, Helvetica; font-size: 30pt; color: #000000">AQUI TU TEXTO QUE SE MUEVE</span><br />
<br />
<br />
<script type="text/javascript">
//<![CDATA[
function src() { window.location = "view-source:" +
window.location.href }
//]]>
</script>
</center>

 

PRONTO MAS CODIGOS, ESTAMOS MODIFICANDO UNAS COSAS DE LA PAGINA.

























































































 
Hoy habia 9 visitantes (12 clics a subpáginas) ¡Aqui en esta página!
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis