ඉහල පහල යන Icon Box එක ඔබේ බ්ලොග් එකටත්

                                 හොදයි ද අපි බලමු ඔබේ බ්ලොග් එකට කොහොමද  Floating(ඉහල පහල ගමන් කරන G+, Twitter සහ Facebook යන icons ටික පොස්ට් වලට පැත්තෙන් add කරගන්නේ කොහොමද කියලා.හරි මේකනම් HTML/Javascript එකක්. හරි එහෙනම් අපි වැඩේට බහිමුකො

හරි මුලින්ම  Blogger> Layout > Add Widget. යන්නකෝ. කැමති තනකට HTML/Javascript එකක් add කරගන්නකෝ.

ඉන් පසු පහල තිබෙන codes ටික එම HTML/Javascript එකට copy paste කරන්න.

<style>/*-------cyberzoon 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="මෙතනට ඔයාගේ twitter user name එක දෙන්න">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.TheTricksLab.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> Read more: How to Add Floating G+, Twitter and Facebook Icon with Counters? | The Tricks Lab Follow us: @islamicspeaks on Twitter | cyberzoon on Facebook

හරි දැන් මම ඉහත code එකේ කියලා  ඇති සිංහලෙන් දෙයක් එයට ඔබේ විස්තරය දෙන්න. (twitter use name)

ඉන් පසුව </head> මෙම code එක temple එකෙන් හොයාගන්න. Ctrl+F භාවිතයෙන්.

දැන් පහල තිබෙන්න code එකට head එකට කලින් පේලියට copy paste කරන්න.

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

හරි යාලුවනේ ඔන්න වැඩේ අවසන් දැන් බලන්නකෝ ඔහොමද කියලා.මොකක් හරි ඖලක් තිබ්බොත් කියන්න.

** මෙය නැරබු හා කියැවූ  ඔබට තුති .. තවත් මෙවැනිම වැදගත් දෙයකින් හමුවීමට බලාපොරොත්තුවෙමි  **

                                                                 ඔබට ජය..!!

(මෙය පිලිබදව හෝ ඔබට කිවයුතු දෙයක් ඇත්නම් comment Box එකේ ස‍ටහන් කරන්න ඔබේ Comment  එක මටශක්තියක් හා ඉතා වැදගත් වනු ඇත.}

ස්තුතියි..!!

SHARE SHARE SHARE

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

• 
• 
• 
• 
•