Principală » Social Bookmarks » Floating Google +1, Facebook, Twitter Buttons

Floating Google +1, Facebook, Twitter Buttons

Demo:





In Cp » Customize design » Editing templates » Common templates » Style sheet (CSS)
adauga in orice loc :

Code
  
  #floatdiv {        
           position:absolute;        
           width:94px;        
           height:229px;        
           top:0;        
           left:0;        
               z-index:100        
  }  

  #ucausesidebar {        
               border:1px solid #ddd;        
               padding-left:5px;        
           position:relative;        
           height:220px;        
           width:55px;        
           margin:0 0 0 5px;        
  }  
  


Main » Customize design » Editing templates » Forum » General appearance of forum pages cauta :
Code
</body>


Adauga urmatorul cod dupa :

Code
  
  <div id="floatdiv">        
  <div id="ucausesidebar">        
           <table cellpadding="1px" cellspacing="0">  
           <tr>        
           <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">        
  <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>        
           </td>        
           </tr>  
           <tr>        
           <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">        
  <g:plusone size="Tall" expr:href="data:post.url"/>        
           </g:plusone></td>        
           </tr>  
           <tr>        
           <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">  
  <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="masoodalam51">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>        
           </td>        
           </tr>  
           <tr>        
           <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">   
           </td>        
           </tr>  
           </table>        
  </div>        
  </div>        
  <script type="text/javascript">        
  // JavaScript Document  

          <!--        
  var floatingMenuId = 'floatdiv';        
  var floatingMenu =        
  {        
           targetX: 0,        
           targetY: 300,  
           hasInner: typeof(window.innerWidth) == 'number',        
           hasElement: typeof(document.documentElement) == 'object'        
               && typeof(document.documentElement.clientWidth) == 'number',  
           menu:        
               document.getElementById        
               ? document.getElementById(floatingMenuId)        
               : document.all        
                 ? document.all[floatingMenuId]        
                 : document.layers[floatingMenuId]        
  };  
  floatingMenu.move = function ()        
  {        
           floatingMenu.menu.style.left = floatingMenu.nextX + 'px';        
           floatingMenu.menu.style.top = floatingMenu.nextY + 'px';        
  }  
  floatingMenu.computeShifts = function ()        
  {        
           var de = document.documentElement;  
           floatingMenu.shiftX =         
               floatingMenu.hasInner         
               ? pageXOffset         
               : floatingMenu.hasElement         
                 ? de.scrollLeft         
                 : document.body.scrollLeft;         
           if (floatingMenu.targetX < 0)        
           {        
               floatingMenu.shiftX +=        
                   floatingMenu.hasElement        
                   ? de.clientWidth        
                   : document.body.clientWidth;        
           }  
           floatingMenu.shiftY =        
               floatingMenu.hasInner        
               ? pageYOffset        
               : floatingMenu.hasElement        
                 ? de.scrollTop        
                 : document.body.scrollTop;        
           if (floatingMenu.targetY < 0)        
           {        
               if (floatingMenu.hasElement && floatingMenu.hasInner)        
               {        
                   // Handle Opera 8 problems        
                   floatingMenu.shiftY +=        
                       de.clientHeight > window.innerHeight        
                       ? window.innerHeight        
                       : de.clientHeight        
               }        
               else        
               {        
                   floatingMenu.shiftY +=        
                       floatingMenu.hasElement        
                       ? de.clientHeight        
                       : document.body.clientHeight;        
               }        
           }        
  }  
  floatingMenu.calculateCornerX = function()        
  {        
           if (floatingMenu.targetX != 'center')        
               return floatingMenu.shiftX + floatingMenu.targetX;  
           var width = parseInt(floatingMenu.menu.offsetWidth);  
           var cornerX =        
               floatingMenu.hasElement        
               ? (floatingMenu.hasInner        
                  ? pageXOffset        
                  : document.documentElement.scrollLeft) +        
                 (document.documentElement.clientWidth - width)/2        
               : document.body.scrollLeft +        
                 (document.body.clientWidth - width)/2;        
           return cornerX;        
  };  
  floatingMenu.calculateCornerY = function()        
  {        
           if (floatingMenu.targetY != 'center')        
               return floatingMenu.shiftY + floatingMenu.targetY;  
           var height = parseInt(floatingMenu.menu.offsetHeight);  
           // Handle Opera 8 problems        
           var clientHeight =        
               floatingMenu.hasElement && floatingMenu.hasInner        
               && document.documentElement.clientHeight        
                   > window.innerHeight        
               ? window.innerHeight        
               : document.documentElement.clientHeight  
           var cornerY =        
               floatingMenu.hasElement        
               ? (floatingMenu.hasInner         
                  ? pageYOffset        
                  : document.documentElement.scrollTop) +        
                 (clientHeight - height)/2        
               : document.body.scrollTop +        
                 (document.body.clientHeight - height)/2;        
           return cornerY;        
  };  
  floatingMenu.doFloat = function()        
  {        
           // Check if reference to menu was lost due        
           // to ajax manipuations        
           if (!floatingMenu.menu)        
           {        
               menu = document.getElementById        
                   ? document.getElementById(floatingMenuId)        
                   : document.all        
                     ? document.all[floatingMenuId]        
                     : document.layers[floatingMenuId];  
               initSecondary();        
           }  
           var stepX, stepY;  
           floatingMenu.computeShifts();  
           var cornerX = floatingMenu.calculateCornerX();  
           var stepX = (cornerX - floatingMenu.nextX) * .07;        
           if (Math.abs(stepX) < .5)        
           {        
               stepX = cornerX - floatingMenu.nextX;        
           }  
           var cornerY = floatingMenu.calculateCornerY();  
           var stepY = (cornerY - floatingMenu.nextY) * .07;        
           if (Math.abs(stepY) < .5)        
           {        
               stepY = cornerY - floatingMenu.nextY;        
           }  
           if (Math.abs(stepX) > 0 ||        
               Math.abs(stepY) > 0)        
           {        
               floatingMenu.nextX += stepX;        
               floatingMenu.nextY += stepY;        
               floatingMenu.move();        
           }  
           setTimeout('floatingMenu.doFloat()', 20);        
  };  
  // addEvent designed by Aaron Moore        
  floatingMenu.addEvent = function(element, listener, handler)        
  {        
           if(typeof element[listener] != 'function' ||        
              typeof element[listener + '_num'] == 'undefined')        
           {        
               element[listener + '_num'] = 0;        
               if (typeof element[listener] == 'function')        
               {        
                   element[listener + 0] = element[listener];        
                   element[listener + '_num']++;        
               }        
               element[listener] = function(e)        
               {        
                   var r = true;        
                   e = (e) ? e : window.event;        
                   for(var i = element[listener + '_num'] -1; i >= 0; i--)        
                   {        
                       if(element[listener + i](e) == false)        
                           r = false;        
                   }        
                   return r;        
               }        
           }  
           //if handler is not already stored, assign it        
           for(var i = 0; i < element[listener + '_num']; i++)        
               if(element[listener + i] == handler)        
                   return;        
           element[listener + element[listener + '_num']] = handler;        
           element[listener + '_num']++;        
  };  
  floatingMenu.init = function()        
  {        
           floatingMenu.initSecondary();        
           floatingMenu.doFloat();        
  };  
  // Some browsers init scrollbars only after        
  // full document load.        
  floatingMenu.initSecondary = function()        
  {        
           floatingMenu.computeShifts();        
           floatingMenu.nextX = floatingMenu.calculateCornerX();        
           floatingMenu.nextY = floatingMenu.calculateCornerY();        
           floatingMenu.move();        
  }  
  if (document.layers)        
           floatingMenu.addEvent(window, 'onload', floatingMenu.init);        
  else        
  {        
           floatingMenu.init();        
           floatingMenu.addEvent(window, 'onload',        
               floatingMenu.initSecondary);        
  }  
  //-->  
  </script>  
  





Voturi : 5 | Rating : 5.0


Total comentarii : 0
Doar utilizatorii înregistraţi pot adăuga comentarii
[ Înregistrare | Logare ]

Abonare

Aboneaza-te gratuit si vei primi noi template-uri prin email !

Introduceti mai jos adresa de email :



Google Plus

Mini-Chat

ОК

Statistica


Total online: 1
Vizitatori: 1
Utilizatori: 0