Akhirny Counters Sliding! Sampai sekarang kami pelajari dan menciptakan banyak tombol mengambang saham sosial tetapi widget tombol yang sebenarnya tidak geser ketika pengguna gulungan halaman atas atau bawah. Satu-satunya yang dibutuhkan adalah kode JavaScript dibangun dengan baik yang bisa membuat widget melayang naik turun serentak dengan gerakan halaman web. Berkat kode Buka Menu Mengambang Jtricks, kami akhirnya berhasil bloggerize efek mengambang dan widget ini adalah semua siap ditambahkan ke blog Anda yang indah blogger. Mohon melihat demo yang pertama,
Live Demo
Sumber : mybloggertricks.com
Adding Floating Social share Counters to Blogger
- Buka Blogger> Rancangan / Tata Letak
- Tambah Gadget
- Pilih HTML / JavaScript widget
- Paste kode berikut.
<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>- Ganti mybloggertricks dengan nama pengguna Twitter Anda
- Simpan widgetmu.
Note : Jika kamu belum punya script Google +1 silahkan tambahkan scriptnya di template kamu.♦ Masuk ke Blogger > Rancangan / Template♦ Klik Edit HTML♦ Cari
</head>♦ Paste kode di bawah ini di atas </head>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>6. Simpan Templatemu.
Sumber : mybloggertricks.com
