Cara Membuat Widget Social Bookmark Melayang

 

Cara memasang widget social bookmark di blog. sobat apa sih social bookmark? ya, social bookmark adalah button/tombol share, sekali mereka nge-klik tombol/button tersebut salah satu artikel di blog kita akan ke bookmark di browsernya atau juga bisa langsung share ke akun social media mereka masing-masing sobat farhan. bagaimana sobat tertarik untuk mencobanya, yap langsung aja ya sobat ini dia langkah-langkah nya.

1. Login Ke Blogger.

2. Masuk Dashboard

3. Pilih Edit Tata Letak

4. Pilih "Add gadget"

5. Setelah itu Pilih "HTML/JavaScript".

6. Lalu copy paste-kan kode di bawah ini ke dalam box "konten"

<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="BLog Bagus">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://ageboy.blogspot.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>

Catatan : Sobat ganti kode yang berwarna biru "Blog Bagus" dengan username twitter sobat.

6. Selanjutnya sobat klik "Save" dan selesai.

Selamat mencoba, bila ada pertanyaan comment di bawah.