Tạo các nút Google +1, Facebook, Twitter nổi cho blog

Đăng bởi Admin | 29/10/13 | 0 nhận xét

Đến nay, Thu thuat vi tinh đã học và tạo ra nhiều nút chia sẻ xã hội nổi nhưng những vật dụng nút trong thực tế không trượt khi người dùng cuộn trang lên hoặc xuống. Điều duy nhất tôi cần là một mã JavaScript cũng được xây dựng có thể làm cho các phụ tùng để nổi lên và xuống đồng bộ với phong trào trang web. 

Thêm nút nổi liên kết đến các mạng xã hội cho Blog

1. Về Blogger> Thiết kế
2. Chọn một HTML / JavaScript phụ tùng
3. Dán đoạn mã sau bên trong nó:
   
   
   
   
   

   <style>
   /*-------MBT Floating Counters------------*/
   #floatdiv {
       position:absolute;
       width:94px;
       height:229px;
       top:0;
       left:0;
           z-index:100
   }
   
   #mbtsidebar {
           border:1px solid #ddd;
           padding-left:5px;
       position:relative;
       height:220px;
       width:55px;
       margin:0 0 0 5px;
   }
   </style>
   
   
   <div id="floatdiv">
   <div id="mbtsidebar">
       <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="mybloggertricks">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;">
   <p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.MyBloggerTricks.com" target="_blank">Widgets</a></p>
       </td>
       </tr>
       </table>
   </div>
   </div>
   <script type="text/javascript">
   // JavaScript Document
   
      <!--
   /* Script by: www.jtricks.com
   * Version: 20071017
   * Latest version:
   * www.jtricks.com/javascript/navigation/floating.html
   */
   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>

   
   

   Làm cho những thay đổi này:

   • Thay thế mybloggertricks với Tên truy nhập Twitter của bạn

        4. Tiết kiệm widget của bạn và bạn gần như đã hoàn tất!

   PS: Nếu bạn đã thêm vào nút Google +1 ở đâu đó trong blog của bạn thì bạn có thể bỏ qua bước 5 bên dưới.

       5. Bây giờ Về Blogger> Thiết kế> Chỉnh sửa HTML    và tìm kiếm đoạn code này:

   
   

   </ head>

   
   

   Ngay phía trên nó dán đoạn mã sau:

   
   

   <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </ script>

        

   6. Lưu mẫu của bạn.

   Thăm blog của bạn để tìm thấy nó treo bên trái. Tôi hy vọng bạn thích nó.

   
   

   Bạn có thể tham khảo thêm các mẫu khác:

   
   Thêm nút chia sẻ Facebook, Tweet và G+ nổi trên blog (Style 2)

   Tạo nổi Bar Facebook & nhiều nút chia sẻ khác (Style 3)

                                                                     Nguồn: mybloggertricks.com