PlayOn
| Subject: Share (JAVA SCRIPT) Fri May 06, 2011 12:07 pm |
| Share (JAVA SCRIPT)
PREVIZUALIZARE: [You must be registered and logged in to see this link.]I. Codul necesar: - Code:
-
(function( $ ) { $(document).ready(function() { var url = window.location.href; var host = window.location.hostname; var title = $('title').text(); title = escape(title); //clean up unusual characters var twit = 'http://twitter.com/home?status='+title+'%20'+url; var facebook = 'http://www.facebook.com/sharer.php?u='+url var digg = 'http://digg.com/submit?phase=2&url='+url+'&title='+title; var stumbleupon = 'http://stumbleupon.com/submit?url='+url+'&title='+title; var buzz = 'http://www.google.com/reader/link?url='+url+'&title='+title+'&srcURL='+host; var delicious = 'http://del.icio.us/post?url='+url+'&title='+title; var tbar = '<div id="socializethis"><span>Share <a href="#min" id="minimize" title="Minimize"> <img src="http://img132.imageshack.us/img132/9380/minimize.png" border="0"/> </a></span><div id="sicons">'; tbar += '<a href="'+twit+'" id="twit" title="Share on twitter"><img src="http://img826.imageshack.us/img826/2263/twitterpr.png" alt="Share on Twitter" width="32" height="32" border="0" /></a>'; tbar += '<a href="'+facebook+'" id="facebook" title="Share on Facebook"><img src="http://img812.imageshack.us/img812/7940/facebookxo.png" alt="Share on facebook" width="32" height="32" border="0" /></a>'; tbar += '<a href="'+digg+'" id="digg" title="Share on Digg"><img src="http://img812.imageshack.us/img812/8735/diggn.png" alt="Share on Digg" width="32" height="32" border="0" /></a>'; tbar += '<a href="'+stumbleupon+'" id="stumbleupon" title="Share on Stumbleupon"><img src="http://img710.imageshack.us/img710/8025/stumbleuponb.png" alt="Share on Stumbleupon" width="32" height="32" border="0" /></a>'; tbar += '<a href="'+delicious+'" id="delicious" title="Share on Del.icio.us"><img src="http://img27.imageshack.us/img27/1776/deliciouslb.png" alt="Share on Delicious" width="32" height="32" border="0" /></a>'; tbar += '<a href="'+buzz+'" id="buzz" title="Share on Buzz"><img src="http://img847.imageshack.us/img847/9738/googlebuzz.png" alt="Share on Buzz" width="32" height="32" border="0" /></a>'; tbar += '</div></div>'; // Add the share tool bar. $('body').append(tbar); $('#socializethis').css({opacity: .7}); // hover. $('#socializethis').bind('mouseenter',function(){ $(this).animate({height:'35px', width:'260px', opacity: 1}, 300); $('#socializethis img').css('display', 'inline'); }); //leave $('#socializethis').bind('mouseleave',function(){ $(this).animate({ opacity: .7}, 300); }); // Click minimize $('#socializethis #minimize').click( function() { minshare(); $.cookie('minshare', '1'); }); if($.cookie('minshare') == 1){ minshare(); } function minshare(){ $('#socializethis').animate({height:'15px', width: '40px', opacity: .7}, 300); $('#socializethis img').css('display', 'none'); return false; } }); })(jQuery); II. Pentru inceput, dati click dreapta pe Desktop III. Alegeti New >T ext document IV. Copiati codul de mai sus in el folosind Copy si Paste V. Va rugam sa uploadati imaginile intr-un cont propriu: [You must be registered and logged in to see this image.]VI. Aceasta este imaginea de MINIMIZE(ascunde casuta de share-ing): [You must be registered and logged in to see this image.]VII. Dupa ce ati copiat codul si ati inlocuit link-urile mergeti la File > Save As si salvati cu numele: Share.jsVIII. Acum trebuie sa-l uploadati pe un host, de exemplu acesta: [You must be registered and logged in to see this link.] (Apasati pe choose file, selectati fisierul din pc si dati ok, apoi apasati pe heberger) sau [url=6. Acum trebuie sa-l uploadati pe un host, de exemplu acesta: [You must be registered and logged in to see this link.](Apasati pe choose file, selectati fisierul din pc si dati ok, apoi apasati pe heberger) [You must be registered and logged in to see this link.] sau [You must be registered and logged in to see this link.]IX.Site-ul va va oferi un link pe care il inlocuiti in codul de mai jos - Code:
-
<script type="text/javascript" src="Link document.js"></script> X. Acum intrati in CSS si adaugati codul urmator pentru a putea aplica in totalitate casuta de share-ing Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS - Code:
-
#socializethis{ background:#CCC; border:solid 1px #666; border-width: 1px 0 0 1px; height:15px; width:260px; position:fixed; bottom:0; right:0; padding:2px 5px; overflow:hidden;
/* CSS3 */ -webkit-border-top-left-radius: 12px; -moz-border-radius-topleft: 12px; border-top-left-radius: 12px; -moz-box-shadow: -3px -3px 3px rgba(0,0,0,0.5); -webkit-box-shadow: -3px -3px 3px rgba(0,0,0,0.5); box-shadow: -3px -3px 3px rgba(0,0,0,0.5); }
#socializethis a{ float:left; width:32px; margin:3px 2px 2px 2px; padding:0; }
#socializethis span{ float:left; margin:2px 3px; text-shadow: 1px 1px 1px #FFF; color:#444; font-size:12px; }
|
|