Prohibida la copia de esta web o de sus subpaginas en otro sitio.Licencia Creative Commons y Copyright. Disponemos de herramientas antiplagio

Agradecer no cuesta nada,es un estimulo para continuar

mas codigos jquery

Aumentar imágenes al pasar el cursor con efecto deslizante

en head

 

 

 

<script type='text/javascript'>
//<![CDATA[

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

<style>
img.expando{
margin:10px;
vertical-align: top;
}
</style>

en html

 

 

 

<img border="0" src="URL de la imagen" class="expando" width="100" />

boton ir arriba con j query

en head

 

 

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'>
</script>
<script type='text/javascript'>//<![CDATA[//]]>
</script>
<script src='http://espacioforos.miarroba.st/1904764/jquery.js' type='text/javascript'>
</script>

<script
type="text/javascript"> //<![CDATA[ jQuery.noConflict();(function($){ $(document).ready(function(){ $("#jQuery").html( "LOAD jQuery!" ); });})(jQuery); Event.observe(window, 'load', function() { $("Prototype").innerHTML = "LOAD Prototype!";}); //]]>
</script>

en Sidebar

 

 

 

<a href='#' onclick='MGJS.subir();return false;' title='Volver arriba'><img src='http://u.jimdo.com/www37/o/sfe0cd23b2d0f3539/img/i0431d23420e5fdf2/130694

4403/std/image.png' style='position: fixed; bottom: 10px; right: 10px;' alt="" /></a>

tablon para redes sociales

en head

 

 

 

<style type="text/css">
<!-- disfruta-ayuda-comparte.jimdo.com -->
/*<![CDATA[*/
.menusocialvertical { width: 40%; margin: -10px;border:5px solid #000000; }
.menusocialvertical ul { margin: 0; padding: 0; }
.menusocialvertical ul li { list-style:none; padding: 0; text-transform: none;-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8) inset;-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8) inset;box-shadow: 0px 0px 10px rgba(0,0,0,.8); inset}
.menusocialvertical ul li a { color: #fff !important; display:block;font-family:verdana;font-weight:bold;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; }
.menusocialvertical ul li a:hover { color: #ffffff !important;opacity:0.5; background-color: #cdcdcd; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }

.menusocialvertical ul li .twitterboton { background: no-repeat scroll 10px center #9900CC; background-size: 20px; padding: 17.5px 45px;}
.menusocialvertical li .facebookboton { background: no-repeat scroll 10px center #FFFF00; background-size: 20px; padding: 17.5px 45px; }
.menusocialvertical ul li .googleboton { background: no-repeat scroll 10px center #CC0000; background-size: 20px; padding: 17.5px 45px; }
.menusocialvertical ul li .youtubeboton { background: no-repeat scroll 10px center #00CCFF; background-size: 20px; padding: 17.5px 45px; }
/*]]>*/
</style>

en html

 

 

 

<div class="menusocialvertical">
<!-- disfruta-ayuda-comparte.jimdo.com -->

<ul>
<li>
<a href="https://URL%20DE%20TU%20TWITTER" class="twitterboton" target="_blank">sigueme en Twitter</a>
</li>

<li>
<a href="https://URL%20DE%20TU%20GOOGLE%20PLUS" class="googleboton" target="_blank">añademe a Google+</a>
</li>

<li>
<a href="http://URL%20DE%20TU%20FACEBOOK" class="facebookboton" target="_blank">siguememe en Facebook</a>
</li>

<li>
<a href="http://URL%20DE%20TU%20YOUTUBE" class="youtubeboton" target="_blank">sigueme en YouTube</a>
</li>
</ul>
</div>

CSS Sticky Notas para texto o códigos

aqui el titulo de tu nota.
tu texto.
aqui texto
texto.
texto
— atte: disfruta-ayuda-comparte

en head

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com -->
<style type="text/css">
/*<![CDATA[*/
.sticky {
position: relative;
background-color: #F4F39E;
border-color: #DEE184;
text-align: center;
margin: 2.5em 0px;
padding: 1.5em 1em;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
font-family: Chalkboard, 'Comic Sans';
}
.sticky.taped:after {
display: block;
content: ' ';
position: absolute;
width: 110px;
height: 30px;
top: -21px;
left: 30%;
border: 1px solid #fff;
background: rgba(254, 254, 254, .6);
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
box-shadow: 0px 0 3px rgba(0,0,0,0.1);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
/*]]>*/
</style>

en htm

 

 

 

<p class="sticky taped" style="width: 250px; color:#F00;">
<strong>aqui el titulo de tu nota</strong>.<br />
tu texto.<br />
aqui texto<br />
texto.<br />
texto<br />
— atte: lo que quieras poner ejemplo: tu web o tu nombre
</p>

botones redes sociales efecto acordeon"Sharing is Sexy"

en head

 

 

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'>
</script>
<link href='http://widgets.way2blogging.org/blogger-widgets/w2b-autohide-social-bookmarking.css' rel='stylesheet' type='text/css' />

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function() {
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
var sexyBaseHeight = jQuery('.sexy-bookmarks').height();
var sexyFullHeight = jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight > sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(

function() {
jQuery(this).animate({
height: sexyFullHeight + 15 + 'px'
}, {
duration: 800,
queue: false
});
}, function() {
jQuery(this).animate({
height: sexyBaseHeight + 'px'
}, {
duration: 800,
queue: false
});
});
}
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth = jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth = jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount = jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow = Math.floor(sexyFullWidth / sexyBookmarkWidth);
var sexyRowWidth = Math.min(numPerRow, sexyBookmarkCount) * sexyBookmarkWidth;
var sexyLeftMargin = (sexyFullWidth - sexyRowWidth) / 2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin + 'px');
}
});
//]]>
</script>

en htm

 

 

 

<div id='post-width-w2b' style='width:600px;'>
<div class='sexy-bookmarks-bg-caring sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center'>
<ul class='socials'>
<li class='sexy-yahoomail'>
<a class='external' rel='nofollow' title='Email this via Yahoo! Mail'></a>
</li>

<li class='sexy-gmail'>
<a class='external' rel='nofollow' title='Email this via Gmail'></a>
</li>

<li class='sexy-twitter'>
<a class='external' rel='nofollow' title='Tweet This!'></a>
</li>

<li class='sexy-facebook'>
<a class='external' onclick='window.open(this.href,&#39;sharer&#39;,&#39;toolbar=0,status=0,width=626,height=436&#39;); return false;' rel='nofollow' title=
'Share this on Facebook'></a>
</li>

<li class='sexy-linkedin'>
<a class='external' rel='nofollow' title='Share this on LinkedIn'></a>
</li>

<li class='sexy-googlebuzz'>
<a class='external' rel='nofollow' title='Post on Google Buzz'></a>
</li>

<li class='sexy-yahoobuzz'>
<a class='external' rel='nofollow' title='Buzz up!'></a>
</li>

<li class='sexy-blogger'>
<a class='external' rel='nofollow' title='Blog this on Blogger'></a>
</li>

<li class='sexy-googlebookmarks'>
<a class='external' rel='nofollow' title='Add this to Google Bookmarks'></a>
</li>

<li class='sexy-googlereader'>
<a class='external' rel='nofollow' title='Add this to Google Reader'></a>
</li>

<li class='sexy-stumbleupon'>
<a class='external' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'></a>
</li>

<li class='sexy-delicious'>
<a class='external' rel='nofollow' title='Share this on del.icio.us'></a>
</li>

<li class='sexy-digg'>
<a class='external' rel='nofollow' title='Digg this!'></a>
</li>

<li class='sexy-comfeed'>
<a class='external' rel='nofollow' title='Subscribe to the comments for this post?'></a>
</li>

<li class='sexy-orkut'>
<a class='external' rel='nofollow' title='Promote this on Orkut'></a>
</li>

<li class='sexy-designbump'>
<a class='external' rel='nofollow' title='Bump this on DesignBump'></a>
</li>

<li class='sexy-reddit'>
<a class='external' rel='nofollow' title='Share this on Reddit'></a>
</li>

<li class='sexy-designfloat'>
<a class='external' rel='nofollow' title='Submit this to DesignFloat'></a>
</li>

<li class='sexy-friendfeed'>
<a class='external' rel='nofollow' title='Share this on FriendFeed'></a>
</li>

<li class='sexy-zabox'>
<a class='external' rel='nofollow' title='Box this on Zabox'></a>
</li>

<li class='sexy-dzone'>
<a class='external' rel='nofollow' title='Add this to DZone'></a>
</li>

<li class='sexy-webblend'>
<a class='external' rel='nofollow' title='Blend this!'></a>
</li>

<li class='sexy-propeller'>
<a class='external' rel='nofollow' title='Submit this story to Propeller'></a>
</li>

<li class='sexy-tumblr'>
<a class='external' rel='nofollow' title='Share this on Tumblr'></a>
</li>

<li class='sexy-squidoo'>
<a class='external' rel='nofollow' title='Add to a lense on Squidoo'></a>
</li>

<li class='sexy-posterous'>
<a class='external' rel='nofollow' title='Post this to Posterous'></a>
</li>

<li class='sexy-technorati'>
<a class='external' rel='nofollow' title='Share this on Technorati'></a>
</li>

<li class='sexy-hotmail'>
<a class='external' rel='nofollow' title='Email this via Hotmail'></a>
</li>

<li class='sexy-bebo'>
<a class='external' rel='nofollow' title='Share this on Bebo'></a>
</li>

<li class='sexy-bitacoras'>
<a class='external' rel='nofollow' title='Submit this to Bitacoras'></a>
</li>

<li class='sexy-blinklist'>
<a class='external' rel='nofollow' title='Share this on Blinklist'></a>
</li>

<li class='sexy-100zakladok'>
<a class='external' rel='nofollow' title='Add this to 100 bookmarks'></a>
</li>

<li class='sexy-blogengage'>
<a class='external' rel='nofollow' title='Engage with this article!'></a>
</li>

<li class='sexy-blogmarks'>
<a class='external' rel='nofollow' title='Mark this on BlogMarks'></a>
</li>

<li class='sexy-bobrdobr'>
<a class='external' rel='nofollow' title='Share this on BobrDobr'></a>
</li>

<li class='sexy-bonzobox'>
<a class='external' rel='nofollow' title='Add this to BonzoBox'></a>
</li>

<li class='sexy-boxnet'>
<a class='external' rel='nofollow' title='Add this link to Box.net'></a>
</li>

<li class='sexy-current'>
<a class='external' rel='nofollow' title='Post this to Current'></a>
</li>

<li class='sexy-diigo'>
<a class='external' rel='nofollow' title='Post this on Diigo'></a>
</li>

<li class='sexy-ekudos'>
<a class='external' rel='nofollow' title='Submit this to eKudos'></a>
</li>

<li class='sexy-evernote'>
<a class='external' rel='nofollow' title='Clip this to Evernote'></a>
</li>

<li class='sexy-faqpal'>
<a class='external' rel='nofollow' title='Submit this to FAQpal'></a>
</li>

<li class='sexy-fwisp'>
<a class='external' rel='nofollow' title='Share this on Fwisp'></a>
</li>

<li class='sexy-globalgrind'>
<a class='external' rel='nofollow' title='Grind this! on Global Grind'></a>
</li>

<li class='sexy-hackernews'>
<a class='external' rel='nofollow' title='Submit this to Hacker News'></a>
</li>

<li class='sexy-hatena'>
<a class='external' rel='nofollow' title='Bookmarks this on Hatena Bookmarks'></a>
</li>

<li class='sexy-hyves'>
<a class='external' rel='nofollow' title='Share this on Hyves'></a>
</li>

<li class='sexy-identica'>
<a class='external' rel='nofollow' title='Post this to Identica'></a>
</li>

<li class='sexy-izeby'>
<a class='external' rel='nofollow' title='Add this to Izeby'></a>
</li>

<li class='sexy-jumptags'>
<a class='external' rel='nofollow' title='Submit this link to JumpTags'></a>
</li>

<li class='sexy-kaevur'>
<a class='external' rel='nofollow' title='Share this on Kaevur'></a>
</li>

<li class='sexy-mail'>
<a class='external' rel='nofollow' title='Email this to a friend?'></a>
</li>

<li class='sexy-memoryru'>
<a class='external' rel='nofollow' title='Add this to Memory.ru'></a>
</li>

<li class='sexy-meneame'>
<a class='external' rel='nofollow' title='Submit this to Meneame'></a>
</li>

<li class='sexy-misterwong'>
<a class='external' rel='nofollow' title='Add this to Mister Wong'></a>
</li>

<li class='sexy-moemesto'>
<a class='external' rel='nofollow' title='Add this to MyPlace'></a>
</li>

<li class='sexy-mylinkvault'>
<a class='external' rel='nofollow' title='Store this link on MyLinkVault'></a>
</li>

<li class='sexy-myspace'>
<a class='external' rel='nofollow' title='Post this to MySpace'></a>
</li>

<li class='sexy-n4g'>
<a class='external' rel='nofollow' title='Submit tip to N4G'></a>
</li>

<li class='sexy-netvibes'>
<a class='external' rel='nofollow' title='Submit this to Netvibes'></a>
</li>

<li class='sexy-netvouz'>
<a class='external' rel='nofollow' title='Submit this to Netvouz'></a>
</li>

<li class='sexy-newsvine'>
<a class='external' rel='nofollow' title='Seed this on Newsvine'></a>
</li>

<li class='sexy-ning'>
<a class='external' rel='nofollow' title='Add this to Ning'></a>
</li>

<li class='sexy-nujij'>
<a class='external' rel='nofollow' title='Submit this to NUjij'></a>
</li>

<li class='sexy-oknotizie'>
<a class='external' rel='nofollow' title='Share this on OkNotizie'></a>
</li>

<li class='sexy-pfbuzz'>
<a class='external' rel='nofollow' title='Share this on PFBuzz'></a>
</li>

<li class='sexy-pingfm'>
<a class='external' rel='nofollow' title='Ping this on Ping.fm'></a>
</li>

<li class='sexy-plaxo'>
<a class='external' rel='nofollow' title='Share this on Plaxo'></a>
</li>

<li class='sexy-plurk'>
<a class='external' rel='nofollow' title='Share this on Plurk'></a>
</li>

<li class='sexy-printfriendly'>
<a class='external' rel='nofollow' title='Send this page to Print Friendly'></a>
</li>

<li class='sexy-pusha'>
<a class='external' rel='nofollow' title='Push this on Pusha'></a>
</li>

<li class='sexy-scriptstyle'>
<a class='external' rel='nofollow' title='Submit this to Script &amp; Style'></a>
</li>

<li class='sexy-slashdot'>
<a class='external' rel='nofollow' title='Submit this to SlashDot'></a>
</li>

<li class='sexy-sphinn'>
<a class='external' rel='nofollow' title='Sphinn this on Sphinn'></a>
</li>

<li class='sexy-springpad'>
<a class='external' rel='nofollow' title='Spring this on SpringPad'></a>
</li>

<li class='sexy-strands'>
<a class='external' rel='nofollow' title='Submit this to Strands'></a>
</li>

<li class='sexy-stumpedia'>
<a class='external' rel='nofollow' title='Add this to Stumpedia'></a>
</li>

<li class='sexy-techmeme'>
<a class='external' rel='nofollow' title='Tip this to TechMeme'></a>
</li>

<li class='sexy-tipd'>
<a class='external' rel='nofollow' title='Share this on Tipd'></a>
</li>

<li class='sexy-tomuse'>
<a class='external' rel='nofollow' title='Suggest this article to ToMuse'></a>
</li>

<li class='sexy-twittley'>
<a class='external' rel='nofollow' title='Submit this to Twittley'></a>
</li>

<li class='sexy-viadeo'>
<a class='external' rel='nofollow' title='Share this on Viadeo'></a>
</li>

<li class='sexy-virb'>
<a class='external' rel='nofollow' title='Share this on Virb'></a>
</li>

<li class='sexy-wikio'>
<a class='external' rel='nofollow' title='Share this on Wikio'></a>
</li>

<li class='sexy-wykop'>
<a class='external' rel='nofollow' title='Add this to Wykop!'></a>
</li>

<li class='sexy-xerpi'>
<a class='external' rel='nofollow' title='Save this to Xerpi'></a>
</li>

<li class='sexy-yandex'>
<a class='external' rel='nofollow' title='Add this to Yandex.Bookmarks'></a>
</li>

<li class='sexy-way2blogging'>
<a class='external' href='http://way2blogging.blogspot.com' rel='follow' title='Grab this Widget'></a>
</li>
</ul>

<div class='sexy-link'>
<a href='http://way2blogging.blogspot.com/2010/12/add-sexy-auto-hide-social-bookmarking.html' rel='follow' title='Grab this Widget'></a>
</div>
</div>
</div>

boton animado para descargas

en head

 

 

 

<style type="text/css">
/*<![CDATA[*/
.bdescargar {
-moz-transition: all 0.5s ease-in-out 0s;
background-color: #000000;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4) inset, 0 0 0 4px rgba(255, 255, 255, 0.1);
display: block;
margin: 10px;
overflow: hidden;
padding: 10px 15px;
position: relative;
text-decoration: none;
width: 160px;
}
.bdescargar .icon {
-moz-transition: all 0.5s ease-in-out 0s;
background: url("http://uploads.boxify.me/60797/download.png") no-repeat scroll left top transparent;
float: left;
height: 32px;
width: 45px;
}
.bdescargar .title {
color: #ffffff;
display: block;
float: left;
font-size: 18px;
font-weight: bold;
line-height: 32px;
}
.bdescargar .icon2 {
background: url("http://uploads.boxify.me/60798/download2.png") no-repeat scroll left top transparent;
height: 32px;
left: 20px;
opacity: 0;
position: absolute;
top: -15px;
width: 32px;
}
.bdescargar:hover {
-moz-transition-delay: 0.5s;
background-color: #000000;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset, 0 0 0 4px rgba(51, 51, 204, 0.5);
}
.bdescargar:hover .icon {
-moz-transform: rotate(-90deg) scale(0.8);
}
.bdescargar:active .icon {
opacity: 0;
}
.bdescargar:active .icon2 {
-moz-animation: 1s linear 0s normal none infinite slideDown1;
opacity: 1;
}
.bdescargar:active {
background-color: #C1C1FF;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 0 0 4px rgba(51, 51, 204, 0.8);
}
@keyframes slideDown1{
0% {
top: -30px;
}
100% {
top: 55px;
}
}
@-webkit-keyframes slideDown1{
0% {
top: -30px;
}
100% {
top: 55px;
}
}
@-moz-keyframes slideDown1{
0% {
top: -30px;
}
100% {
top: 55px;
}
}
/*]]>*/
</style>

en htm

 

 

 

<a class="bdescargar" href="URL de donde se hara la descarga"><span class="icon"></span><span class="title">Descargar</span><span class="icon2"></span></a>

elegantes cajas de busqueda

esta caja de busqueda es la roja de la imagen

 

en head 

 

 

 

<style type="text/css">
/*<![CDATA[*/
#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_searchbox3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
/*]]>*/
</style>

en htm

 

 

 

<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get" name="w2b-searchform">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /> <input type=
"image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

chat deslizante con jquery.Esquina superior derecha

en head

 

 

 

<style type="text/css">

/*<![CDATA[*/

<!--

#louver {

z-index:10005;

width:430px;

height:310px;

position:fixed;

right: 10px;

top: -310px;

overflow: visible;

background-repeat: no-repeat;

background-image: url(http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i3cd47a4ebdccfd4e/1348442120/std/bg-chat-1.png);

visibility: visible;

}

#louver #c_d {

right: 5px;

position: absolute;

top: -36px;

z-index: 10003;

}

#louver #c_i {

position: absolute;

left: 5px;

top: -36px;

z-index: 10003;

}

#louver #disfruta-ayuda-comparte{

width:408px;

height:286px;

overflow:hidden;

margin-top: 10px;

margin-right: auto;

margin-left: auto;

border: 1px solid #000000;

}

#image_chat{

position:absolute;

bottom: -33px;

height: 40px;

width: 200px;

right: 110px;

background-repeat: no-repeat;

background-image: url(http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/ifecb381956d8495e/1348442039/std/bg-image-chat.png);

visibility: visible;

}



/*ert.*/

-->

/*]]>*/

</style>

en htm

 

no te olvides de cambiar la id del chat por la id del tuyo 

 

 

 

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

//<![CDATA[

var e = jQuery.noConflict();

e(document).ready(function(){

e("#louver").hover(function(){

e(this).stop(true,false).animate({top: 33}, 700); },function(){

e("#louver").stop(true,false).animate({top: -310}, 1700); }); });

//]]>

</script>
<div id="louver">
<img id="c_i" src="http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/id81f223d07ed3030/1348441924/std/cadena-1.png" alt="" name="c_i" /> <img id="c_d" src=
"http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/id81f223d07ed3030/1348441924/std/cadena-1.png" alt="" name="c_d" />
<div id="notoy">
<div id="image_chat">
</div>
<embed wmode="transparent" src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="400" height="286" name="chat" flashvars="id=186741282&amp;rl=Spanish" align="middle"
allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" />
</div>
</div>

rotador de banners publicitarios,imagenes,etc

En head

 

 

 

<style type="text/css">
/*<![CDATA[*/
#rotadordebanners img{width: 300px;height: 120px;border:1px solid #000000;background:#000000;}

#rotadordebanners {
margin: 0px auto;
position: relative;
width: 300px; height: 120px;
padding: 15px 10px 10px 10px;border:2px solid #797A79;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
background: #7d7e7d;
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );

}
#rotadordebanners > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}

/*]]>*/
</style>


<script src="//code.jquery.com/jquery-latest.js" type="text/javascript">
</script>

<script type="text/javascript">
//<![CDATA[
(function() {

$("#rotadordebanners > div:gt(0)").hide();

setInterval(function() {
$('#rotadordebanners > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#rotadordebanners');
}, 4000);

})();
//]]>
</script>

en htm

 

 

 

<div id="rotadordebanners">

<div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div>

<div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div>

<div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div>

<div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div>

<div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div>

</div>

menu con rotacion

En head

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com -->
<style type="text/css">
/*<![CDATA[*/
ul{margin:0;padding:0;}
li{display:inline;list-type:none;}
a.glidebutton{display: inline-block;position: relative;color: #FFFFFF;background: #33CC00;
text-decoration: none;font: bold 14px Arial;
letter-spacing: 2px;overflow: hidden;height: 30px; text-align: center;
border-radius: 5px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
a.glidebutton > span:first-child{
position: relative;display: block;height: 100%;padding: 6px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
a.glidebutton > span:first-child:after{
content: attr(data-text);display: block;width: 100%;height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;position: absolute;top:100%;left:0;}
a.glidebutton:hover{color: black;background: #33CC00;box-shadow: 0 0 4px green inset;}
a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);}
/*]]>*/
</style>

en htm

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com -->
<ul>
<li><a class="glidebutton" href="URL"><span data-text="Nombre link's 1">Nombre link's 1</span></a></li>
<li><a class="glidebutton" href="URL"><span data-text="Nombre link's 2">Nombre link's 2</span></a></li>
<li><a class="glidebutton" href="URL"><span data-text="Nombre link's 3">Nombre link's 3</span></a></li>
<li><a class="glidebutton" href="URL"><span data-text="Nombre link's 4">Nombre link's 4</span></a></li>
<li><a class="glidebutton" href="URL"><span data-text="Nombre link's 5">Nombre link's 5</span></a></li>
</ul>

videos de youtube en forma de iphone

en htm

poner numero del video donde pone xxxxxxx

 

 

 

<div style="background: url(https://lh6.googleusercontent.com/-FqGudtSI8uc/T_ReH4BqzvI/AAAAAAAAEko/iNhn6ZJHVV8/s491/fondoipod%2520-%2520aac.png) no-repeat top left; height: 273px; margin: 0 auto; padding: 36px 0 0 93px; text-align: left; width: 398px;"><iframe class="youtube-player" frameborder="0" height="200" src="http://www.youtube.com/embed/XXXXXXXXXXX?&amp;autohide=0&amp;&amp;controls=0&amp;hd=0&amp;rel=0&amp;showinfo=0" type="text/html" width="350"></iframe></div>

Efecto desvanecer, en todas las imagenes al pasar el cursor

en head

 

 

 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 1.0);
$('img').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Efecto aparecer en todas las imagenes al pasar el cursor

"Atencion"

 

En la pagina fondos jquery,hay mas efectos como estos para imagenes

 

En head

 

 

 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Protected by Copyscape Web Plagiarism Check