Feb 7, 2013

පාවෙන Google +1, Facebook, Twitter Share Widget එකක් ඔයාටත්..!

      කොහොමද අපේ සාමාජිකයින්ට... ගොඩක් දවසකින් ඔයාලට බ්ලොග් ගැජට් එකක් දෙන්න බැරි වුනානේ... ඔන්න එකටත් එක්ක ලස්සන පාවෙන Google +1, Facebook, Twitter බොත්තම් තියෙන Share Widget එකක් තමයි මම අරගෙන අවේ... ඔයාලත් ආසනම් මේ ගැජට් එක බ්ලොග් එකට දා ගන්න.. දී ඇති උපදෙස් වලට අනුව වැඩ ටික කරගෙන බ්ලොග් එකට මේ ගැජට් ලබාගන්න පුලුවන් වෙනවා... හොදයි වැඩි කතාවක් නැතිව අපි මේක හදාගන්නේ කොහොමද බලමු.

  • මුලින්ම ඔයාලා Dashboard => Design => Edit Html =>> යන්න.. මතක ඇතුව Expand Widget Templates ටික් කරගන්න.. දැන් ඔයලා යතුරු පුවරුවේ Ctrl + F යතුරු එක වර ඔබන්න.. දැන් ඔයාලට ලැබෙන සර්ච් බාර් එකේ ]]></b:skin> කියලා ටයිප් කරන්න... දැන් ඔයලාගේ HTML box එකේ මේ කොඩ් එක Highlight වෙලා තියෙනවා පෙනේවි.. දැන් ]]></b:skin> කොඩ් එකට පහළින් පහත තියෙන කොඩ් එක Copy, Past කරන්න...


<style type='text/css'>
#floatdiv { 
    position:absolute; 
    width:94px; 
    height:229px; 
    top:0; 
    left:0; 
        z-index:100 
}

#sandriesoft { 
border:1px solid #ddd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px; 
left: -12px;
padding: 8px; 
position:relative; 
height:220px; 
width:55px; 
margin:0 0 0 69px; 
}
</style>


  • දැන් Template එක Save කරන්න...          Save Template 
  • දැන් ඔයලා Design => Page Element => Add a gadget => "Html/Java script" එකක් ගන්න. දැන් පහල දිලා තියෙන කොඩ් එක copy කරගෙන "html/java script" එකට past කරන්න.

<div id="floatdiv"> 
<div id="Sandriesoft.info"> 
    <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="Your Facebook Page URL" 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="Your Twitter ID">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;"></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>

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


වැදගත්: ඉහත කොඩ් එකේ Your Twitter ID තැනට ඔයාලගේ twitter id එකත් Your Facebook Page URL එකට අදාළ ලිනක් එකත් යොදන්න...

  • දැන් HTML/JavaScript එක Save කරගන්න..

      දැන් සියල්ල සිදුකර අවසන්.. ඔයාගේ බ්ලොග් එකටත් දැන් ලස්සන පාවෙන Google +1, Facebook, Twitter බොත්තම් Share Widget එකක් තියෙනවා. එහෙනම් අදට බ්ලොගර් ටිප්ස් ඉවරයි. තවත් දවසක මෙවැනිම වූ පාඩමකින් නැවත හමුවෙමු.! 
      එහෙනම් මම හිතනවා මේ පෝස්ට් එක ඔයාලට ගොඩක් වැදගත් වෙයි කියලා... මේක ඔයාලට ප්‍රයෝජනයක් වුණා නම් කමෙන්ට් එකක් එහෙම දාලා අපගේ මෙම්බර් කෙනෙක් වෙන්න. ඔයාලගෙ ප්‍රතිචාර මත තමයි තව එක එක දේවල් ඔයාලට දෙන්න හිතෙන්නෙ. එහෙනම් ආයෙත් වැදගත් දෙයක් එක්ක හමුවෙමු...

 



4 comments:

  1. කෝ ඉතින් ඔයාගෙ එකේ නැහැනේ ??

    එල එල... මරු එකක් මමත් කාලයක් දාල තිබ්බා

    ReplyDelete
    Replies
    1. මමත් ඒක ඉවත් කළා ටෙම්ප්ලේට් එක මාරු කරද්දීම... (:

      Delete

ලිපිය සම්බන්ධයෙන් ඇති ඔබේ අදහස්, ගැටලු ආදිය විමසීමට මෙය භාවිතා කරන්න. අනවශ්‍ය ලෙස Backlinks යෙදූ ප්‍රතිචාර ඉවත් කෙරෙනු ලැබේ..