membuat Widget Social Boomark melayang di blog

Berbeda dengan yang sebelumnya saya bagikan yaitu Cara membuat wigdet share button social bookmarking diatas artikel , pada kali ini yaitu dengan metode melayang di dalam blog.
Namun fungsi dan kegunaan masih sama yaitu sama sama untuk bertujuan untuk mempermudahkan bagi pengunjung blon untuk membagikan artikel blog kita ke sosial media, contoh saja yang paling Top adalah facebook dan twitter.
untuk hasilnya silahkan dicoba terlebih dahulu ya kawan.

untuk langkah pemasangannya sebagai berikut:

Cara untuk membuat Widget Social Boomark melayang di blog

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"

Kode Script Social Boomark melayang

<style><br /> /*-------ELMAZZ Social Share------------*/<br /> #floatdiv {<br />     position:absolute;<br />     width:94px;<br />     height:229px;<br />     top:0;<br />     left:0;<br />         z-index:100<br /> }<br /> <br /> <br /> #mbtsidebar {<br />         border:1px solid #ddd;<br />         padding-left:5px;<br />     position:relative;<br />     height:220px;<br />     width:55px;<br />     margin:0 0 0 5px;<br /> }<br /> </style><br /> <br /> <br /> <br /> <br /> <div id="floatdiv"> <br /> <div id="mbtsidebar"> <br />     <table cellpadding="1px" cellspacing="0"><br /> <tr><br />     <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;"><br /> <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><br />     </td><br />     </tr> <br /> <tr><br />     <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;"><br /> <g:plusone size="Tall" expr:href="data:post.url"><br />     </g:plusone></td><br />     </tr> <br /> <tr><br />     <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;"><br /> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="<b style="color: #6aa84f;">GetzHitzh</b>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br />     </td><br />     </tr> <br /> <tr><br />     <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;"><br /> <p style=" font-size:10px; text-align:center; color:#ddd;"> <a style="color:#ddd;" href="http://ageboy.blogspot.com/" target="_blank">Widgets</a></p> <br />     </td><br />     </tr> <br />     </table> <br /> </div> <br /> </div> <br /> <script type="text/javascript"><br /> // JavaScript Document<br /> <br /> <br />    <!--<br /> /* Script by: www.jtricks.com<br /> * Version: 20071017<br /> * Latest version:<br /> * www.jtricks.com/javascript/navigation/floating.html<br /> */<br /> var floatingMenuId = 'floatdiv';<br /> var floatingMenu =<br /> {<br />     targetX: 0,<br />     targetY: 300,<br />     hasInner: typeof(window.innerWidth) == 'number',<br />     hasElement: typeof(document.documentElement) == 'object'<br />         && typeof(document.documentElement.clientWidth) == 'number',<br />     menu:<br />         document.getElementById<br />         ? document.getElementById(floatingMenuId)<br />         : document.all<br />           ? document.all[floatingMenuId]<br />           : document.layers[floatingMenuId]<br /> };<br /> floatingMenu.move = function ()<br /> {<br />     floatingMenu.menu.style.left = floatingMenu.nextX + 'px';<br />     floatingMenu.menu.style.top = floatingMenu.nextY + 'px';<br /> }<br /> floatingMenu.computeShifts = function ()<br /> {<br />     var de = document.documentElement;<br />     floatingMenu.shiftX =<br />         floatingMenu.hasInner<br />         ? pageXOffset<br />         : floatingMenu.hasElement<br />           ? de.scrollLeft<br />           : document.body.scrollLeft;<br />     if (floatingMenu.targetX < 0)<br />     {<br />         floatingMenu.shiftX +=<br />             floatingMenu.hasElement<br />             ? de.clientWidth<br />             : document.body.clientWidth;<br />     }<br />     floatingMenu.shiftY =<br />         floatingMenu.hasInner<br />         ? pageYOffset<br />         : floatingMenu.hasElement<br />           ? de.scrollTop<br />           : document.body.scrollTop;<br />     if (floatingMenu.targetY < 0)<br />     {<br />         if (floatingMenu.hasElement && floatingMenu.hasInner)<br />         {<br />             // Handle Opera 8 problems<br />             floatingMenu.shiftY +=<br />                 de.clientHeight > window.innerHeight<br />                 ? window.innerHeight<br />                 : de.clientHeight<br />         }<br />         else<br />         {<br />             floatingMenu.shiftY +=<br />                 floatingMenu.hasElement<br />                 ? de.clientHeight<br />                 : document.body.clientHeight;<br />         }<br />     }<br /> }<br /> floatingMenu.calculateCornerX = function()<br /> {<br />     if (floatingMenu.targetX != 'center')<br />         return floatingMenu.shiftX + floatingMenu.targetX;<br />     var width = parseInt(floatingMenu.menu.offsetWidth);<br />     var cornerX =<br />         floatingMenu.hasElement<br />         ? (floatingMenu.hasInner<br />            ? pageXOffset<br />            : document.documentElement.scrollLeft) +<br />           (document.documentElement.clientWidth - width)/2<br />         : document.body.scrollLeft +<br />           (document.body.clientWidth - width)/2;<br />     return cornerX;<br /> };<br /> floatingMenu.calculateCornerY = function()<br /> {<br />     if (floatingMenu.targetY != 'center')<br />         return floatingMenu.shiftY + floatingMenu.targetY;<br />     var height = parseInt(floatingMenu.menu.offsetHeight);<br />     // Handle Opera 8 problems<br />     var clientHeight =<br />         floatingMenu.hasElement && floatingMenu.hasInner<br />         && document.documentElement.clientHeight<br />             > window.innerHeight<br />         ? window.innerHeight<br />         : document.documentElement.clientHeight<br />     var cornerY =<br />         floatingMenu.hasElement<br />         ? (floatingMenu.hasInner<br />            ? pageYOffset<br />            : document.documentElement.scrollTop) +<br />           (clientHeight - height)/2<br />         : document.body.scrollTop +<br />           (document.body.clientHeight - height)/2;<br />     return cornerY;<br /> };<br /> floatingMenu.doFloat = function()<br /> {<br />     // Check if reference to menu was lost due<br />     // to ajax manipuations<br />     if (!floatingMenu.menu)<br />     {<br />         menu = document.getElementById<br />             ? document.getElementById(floatingMenuId)<br />             : document.all<br />               ? document.all[floatingMenuId]<br />               : document.layers[floatingMenuId];<br />         initSecondary();<br />     }<br />     var stepX, stepY;<br />     floatingMenu.computeShifts();<br />     var cornerX = floatingMenu.calculateCornerX();<br />     var stepX = (cornerX - floatingMenu.nextX) * .07;<br />     if (Math.abs(stepX) < .5)<br />     {<br />         stepX = cornerX - floatingMenu.nextX;<br />     }<br />     var cornerY = floatingMenu.calculateCornerY();<br />     var stepY = (cornerY - floatingMenu.nextY) * .07;<br />     if (Math.abs(stepY) < .5)<br />     {<br />         stepY = cornerY - floatingMenu.nextY;<br />     }<br />     if (Math.abs(stepX) > 0 ||<br />         Math.abs(stepY) > 0)<br />     {<br />         floatingMenu.nextX += stepX;<br />         floatingMenu.nextY += stepY;<br />         floatingMenu.move();<br />     }<br />     setTimeout('floatingMenu.doFloat()', 20);<br /> };<br /> // addEvent designed by Aaron Moore<br /> floatingMenu.addEvent = function(element, listener, handler)<br /> {<br />     if(typeof element[listener] != 'function' ||<br />        typeof element[listener + '_num'] == 'undefined')<br />     {<br />         element[listener + '_num'] = 0;<br />         if (typeof element[listener] == 'function')<br />         {<br />             element[listener + 0] = element[listener];<br />             element[listener + '_num']++;<br />         }<br />         element[listener] = function(e)<br />         {<br />             var r = true;<br />             e = (e) ? e : window.event;<br />             for(var i = element[listener + '_num'] -1; i >= 0; i--)<br />             {<br />                 if(element[listener + i](e) == false)<br />                     r = false;<br />             }<br />             return r;<br />         }<br />     }<br />     //if handler is not already stored, assign it<br />     for(var i = 0; i < element[listener + '_num']; i++)<br />         if(element[listener + i] == handler)<br />             return;<br />     element[listener + element[listener + '_num']] = handler;<br />     element[listener + '_num']++;<br /> };<br /> floatingMenu.init = function()<br /> {<br />     floatingMenu.initSecondary();<br />     floatingMenu.doFloat();<br /> };<br /> // Some browsers init scrollbars only after<br /> // full document load.<br /> floatingMenu.initSecondary = function()<br /> {<br />     floatingMenu.computeShifts();<br />     floatingMenu.nextX = floatingMenu.calculateCornerX();<br />     floatingMenu.nextY = floatingMenu.calculateCornerY();<br />     floatingMenu.move();<br /> }<br /> if (document.layers)<br />     floatingMenu.addEvent(window, 'onload', floatingMenu.init);<br /> else<br /> {<br />     floatingMenu.init();<br />     floatingMenu.addEvent(window, 'onload',<br />         floatingMenu.initSecondary);<br /> }<br /> //--><br /> </script>

Keterangan lebih lanjut

untuk kode yang berwarna Hijaun GeztHitzh diatas silahkan diganti dengan username twitter kalian kalau punya. kalau belum silahkan lewati saja.
Terimakasih.