BcY
| Konu: Sosyal İmleme Kodları -Java Script C.tesi Mart 19 2011, 20:42 | |
| Sosyal İmleme 1 - Kod:
-
<style> .bookmark{width:540px;float:left;margin:10px 0px;display:block;} .bookmark a{float:left;display:block;width:70px;height:29px;overflow:hidden;background:url(http://img.webme.com/pic/c/catlak-site55/bookmark.png);}
</style>
<div class=bookmark>
<a onmouseover="this.style.backgroundPosition='0px 0px';" onmouseout="this.style.backgroundPosition='0px -41px';" href="http://www.facebook.com/share.php?u=http://www.dersmatik.yetkinforum.com" target=_blank style="background-position:0px -41px;"></a> <a onmouseover="this.style.backgroundPosition='-70px 0px';" onmouseout="this.style.backgroundPosition='-70px -41px';" href="http://twitter.com/home?status=http://www.dersmatik.yetkinforum.com" target=_blank style="background-position:-70px -41px;"></a> <a onmouseover="this.style.backgroundPosition='-140px 0px';" onmouseout="this.style.backgroundPosition='-140px -41px';" href="http://www.google.com/bookmarks/mark?op=add&bkmk=http://www.dersmatik.yetkinforum.com&title=catlak-site55" target=_blank style="background-position:-140px -41px;"></a> <a onmouseover="this.style.backgroundPosition='-210px 0px';" onmouseout="this.style.backgroundPosition='-210px -41px';" href="http://del.icio.us/post?url=http://www.dersmatik.yetkinforum.com&title=Dersmatik" target=_blank style="background-position:-210px -41px;"></a> <a onmouseover="this.style.backgroundPosition='-280px 0px';" onmouseout="this.style.backgroundPosition='-280px -41px';" href="http://www.friendfeed.com/share?title=Catlak-site55&link=http://www.dersmatik.yetkinforum.com" target=_blank style="background-position:-280px -41px;"></a> <a onmouseover="this.style.backgroundPosition='-350px 0px';" onmouseout="this.style.backgroundPosition='-350px -41px';" href="http://www.myspace.com/Modules/PostTo/Pages/?u=http://www.dersmatik.yetkinforum.com&t=Dersmatik" target=_blank style="background-position:-350px -41px;"></a>
</div> Sosyal İmleme 2 - Kod:
-
<style type="text/css"> .stack { position: fixed; bottom: 28px; right: 40px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; } .stack * { margin: 0; padding: 0; } .stack > img { position: relative; cursor: pointer; padding-top: 20px; z-index: 2; } .stack ul { list-style: none; position: absolute; top: 5px; margin:0; cursor: pointer; z-index: 1; } .stack ul li { position: absolute; } .stack ul li img { border: 0; } .stack ul li span { display: none; } .stack .openStack li span { display: block; position: absolute; top: 17px; right: 60px; height: 14px; line-height: 14px; background-color:#000; border: 0; padding: 3px 10px; text-align: center; text-shadow: #000 1px 1px 1px; font-family: "Lucida Grande", Lucida, Verdana, sans-serif; font-size: 12px; color: #fcfcfc; border-radius: 10px; opacity: .85; filter: alpha(opacity = 85); -webkit-border-radius: 10px; -moz-border-radius: 10px; }
/* IE Fixes */ .stack { _position: absolute; } .stack ul { _z-index:-1; _top:-15px; } .stack ul li { *right:5px; } </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <script type="text/javascript"> $(function () { // Stack initialize var openspeed = 300; var closespeed = 300; $('.stack>img').toggle(function(){ var vertical = 0; var horizontal = 0; var $el=$(this); $el.next().children().each(function(){ $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed); vertical = vertical + 55; horizontal = (horizontal+.75)*2; }); $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack') .find('li a>img').animate({width: '45px', marginLeft: '9px'}, openspeed); $el.animate({paddingTop: '0'}); }, function(){ //reverse above var $el=$(this); $el.next().removeClass('openStack').children('li').animate({top: '70px', left: '-10px'}, closespeed); $el.next().find('li a>img').animate({width: '40px', marginLeft: '0'}, closespeed); $el.animate({paddingTop: '35px'}); }); // Stacks additional animation $('.stack li a').hover(function(){ $("img",this).animate({width: '56px'}, 100); $("span",this).animate({marginRight: '30px'}); },function(){ $("img",this).animate({width: '50px'}, 100); $("span",this).animate({marginRight: '0'}); }); }); </script> <div class="stack addthis_toolbox"> <img src="http://img.webme.com/pic/c/catlak-site55/stack.png"width=40 alt="stack"/>
<ul id="stack" class="custom_images"> <li><a class="addthis_button_facebook"><span>Facebook</span><img src="http://img.webme.com/pic/c/catlak-site55/facebook.png"width=40 alt="Share to Facebook" /></a></li> <li><a class="addthis_button_stumbleupon"><span>StumbleUpon</span><img src="http://img.webme.com/pic/c/catlak-site55/stumbleupon.png"width=40 alt="Stumble It" /></a></li> <li><a class="addthis_button_reddit"><span>Reddit</span><img src="http://img.webme.com/pic/c/catlak-site55/reddit.png"width=40 alt="Share to Reddit" /></a></li> <li><a class="addthis_button_digg"><span>Delicious</span><img src="http://img.webme.com/pic/c/catlak-site55/digg.png"width=40 alt="Share to Digg" /></a></li> <li><a class="addthis_button_more"><span>Paylaş...</span><img src="http://img.webme.com/pic/c/catlak-site55/addthis.png"width=40 alt="More..." /></a></li>
</ul> </div> Sosyal İmleme 3 - Kod:
-
<script language="javascript" src="http://kod.anime.web.tr/bookmark.js"></script><noscript><a href="htpp://www.dersmatik.yetkinforum.com">Sitene Ekle</a></noscript> | |
|