Thursday, March 3, 2011

ලියන සටහන් කියවන අය අතරෙ ලේසියෙන් බෙදාගන්න පට්ට ගැජට් එකක්

කට්ටියට මතක ඇතිනෙ මම මීටකලින් ලියන සටහන් කියවන අයට පේන්න තියන්න කියල ලියපු සටහන. ඒකෙදි මම කිව්වෙ අපේ blog එකට ආපු කෙනෙක්ට අපි ලියපු අනිත් සටහන් පෙන්නන්න දාන්න පුළුවන් ගැජට් එකක් ගැනනෙ.

අද කියන්න යන්නෙ අපි ලියන සටහන් බලන්න එන අයගෙ යාළුවන් අතරත් ලේසියෙන්ම බෙදා හදාගන්න උදවු වෙන ගැජට් එකක් ගැන. මේ සටහන Scroll කරද්දි වම් පැත්තෙන් උඩ පහල යන ගැජට් එක ඔයාගෙ blog එකට එකතු කරගන්න හැටි තමයි මම කියන්න යන්නෙ.

මේකෙට කියන්නෙ Sharebar කියල, Wordpress වලට හදල තියන plugin එකක්. මම කියන්න යන්නෙ මේක අපි Blogger Blog එකකට එකතු කරගන්න විදිහ ගැන. මම ඕන කරන පියවරවල් ටික Screen-Shot එක්කම දාල තියනව. තේරෙන්නෙ නැති තැනක් තියනවනම් comment එකක් දාන්න අමතක කරන්න එපා හොඳද.

1. මේක තමයි වැදගත්ම පියවර. අපි මුලින්ම කරන්න ඕනෙ අපේ දැනට තියන Template එකේ backup එකක් ගන්න එක. ඒකට කරන්න තියෙන්නෙ Design --> Edit HTML ගිහිල්ල Download Full Template click කරන එක.



2. ඊටපස්සෙ කියන Expand Widget Templates එක උඩ කොටන්න.


3. දැන් කරන්න තියෙන්නෙ </head> කියන Tag එක හොයාගන්න එක. Ctrl + F ඔබල පොඩි search පාරක් දැම්මනම් ලේසියෙන්ම හොයාගන්න පුළුවන්. දැන් මම පහලින් දාල තියන code එක ඒ Tag එකට උඩින් paste කරන්න.
<style type='text/css'>
#sharebox {
 float: left;
 margin-left: -95px;
 background: #f0f0f0;
 position: absolute;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
#sharebox .wdt {
 float: left;
 clear: left;
 padding: 5px;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

     var offset = $("#sharebox").offset();
     var topPadding = 15;
     $(window).scroll(function() {
         if ($(window).scrollTop() > offset.top) {
             $("#sharebox").stop().animate({
                 marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#sharebox").stop().animate({
                 marginTop: 0
             });
         };
     });

});
</script>

<script type="text/javascript">
(function() {
 var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
 s.type = 'text/javascript';
 s.async = true;
 s.src = 'http://widgets.digg.com/buttons.js';
 s1.parentNode.insertBefore(s, s1);
})();
</script> 
මේකෙ (4)හතර වෙනි සහ (5) පස් වෙනි lines බොහෝ දුරට ඔයාගෙ blog එකට ගැළපෙන විදිහට වෙනස් කරගන්න වෙයි. හතර වෙනි line එකෙන් තමයි කියන්නෙ ලිපියට වඩා කොච්චර වම් පැත්තෙන්ද ගැජට් එක එහා මෙහා යන්න ඕන කියල. මෙතන මම කියල තියෙන්නෙ pixel 95ක් වම් පැත්තෙන් හිටපන් කියල. පස් වෙනි line එකේ තියන colour code එකන් කියන්නෙ background colour එක, ඒකත් ඔයාට ඕන විදිහට වෙනස් කරගන්න පුළුවන්.

4. ඊට පස්සෙ කරන්න තියෙන්නෙ <data:post.body/> හොයාගන්න එක. ඒකත් කලින් කලා වගේම search පාරක් දාල හොයාගන්න. පහල තියන code කෑල්ල ඒකට උඩින් paste කරන්න.
<b:if cond='data:blog.pageType == "item"'>
<div id='sharebox'>
 <div class='wdt'><a class='DiggThisButton DiggMedium'/></div>
 <div class='wdt'><div style='padding-left:3px'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:53px; height:65px;'/></div></div>
 <div class='wdt'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
</div>
</b:if>
5. වැඩේ ඉවරයි, දැන් තියෙන්නෙ Template එක Save කරල ගැජට් එක වැඩද කියල බලන එක තමයි.

මම දැනට පෙන්නල දීල තියෙන්නෙ Digg, Twitter සහ Facebook කියන site වල badge එකතු කරගන්න හැටි. ඒකෙදි මම දාල තියන පලවෙනි code එකේ 38 වෙනි පේළියෙ ඉඳන් 46 වෙනි පේළිය වෙනකන් තියන code එක ඕන වෙන්නෙ ඔයා Digg එකතු කරනවනම් විතරයි. ඔයා Digg අයින් කරනවනම් ඒ code කෑල්ලයි, දෙවෙනියට දාල තියන code එකේ තුන් වෙනි පේළියයි (<div class='wdt'><a class='DiggThisButton DiggMedium'/></div>) අයින් කරන්න ඕන.

අපි බලමු කොහොමද අපිට ඕන කරන social networking site එකක් මේ ගැජට් එකට එකතු කර ගන්නෙ කොහොමද කියල. ඒකෙදි අපි මුලින්ම කරන්න ඕන අපි එකතු කරන්න හදන social network site එකේ badge එකක් තියනවනම් ඒකට අදාල code එක හොයාගන්න එක. උදාහරණයක් විදිහට ඔයාට මෙතනට ගිහින් StumbleUpon වලට අදාල badge එක එකතු කරගන්න ඕන code එක ගන්න පුළුවන්. පහළින් තියෙන්නෙ ඒක එකතු කර ගත්තට පස්සෙ එන සම්පූර්ණ code එක.
<b:if cond='data:blog.pageType == "item"'>
<div id='sharebox'>
 <div class='wdt'><a class='DiggThisButton DiggMedium'/></div>
 <div class='wdt'><div style='padding-left:3px'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:53px; height:65px;'/></div></div>
 <div class='wdt'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
 <div class='wdt'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'></script></div>
</div>
</b:if>

කරලම බලන්නකො එහෙනම්, අවුලක් තියනවනම් comment එකක් දාල අහන්න. Like එකක් දාන්නත් අමතක කරන්න එපා ඕං. ඔබට ජය!

24 comments:

  1. ඔන්න ඔයාගෙ comment එකක් පස්සෙන් ඇවිත් මං දෙයක් අරගෙනත් ගියේ. ගැජට් එක නම් කිරිටොයියා වගේ වැඩ.

    දැන් කට්ටියට පුලුවන්නෙ උඩ යට කැරකි කැරකි ඉන්නෙ නැතුව like කරන්න...

    පොඩි අවුලක් තියෙනවා ....මගෙ බ්ලොග් එකට ගිහින් බැලුවම පෙනෙයි...ඒකට මොකද කරන්නෙ...


    මේකට තව social networking site වල එවා දාන්න බැරිද?

    ReplyDelete
  2. ඔව්, මම ඒ අවුල හදාගන්න හැටි දාල සටහන අලුත් කළා, සමාවෙන්න ඕන ඒක මුලින් කියන්න බැරි වෙච්ච එකට.
    ඒ ප්‍රශ්නෙ අහපු එකත් හොඳයි, ඒ වැඩේ කරන්න පුළුවන්. ඒකට කරන්න තියෙන්නෙ පොඩි වැඩයි. මම දෙවෙනියට දාල තියන code කෑල්ලෙන් තමයි අපිට ඕන කරන site එකතුකර ගන්න හෝ අයින් කරන්නෙ. පස්වෙනි පේළියට පස්සෙ;
    <div class='wdt'>අදාල social networking site එකේ share badge script එක </div>
    කියල අදාල code එක හොයාගන දාන්න තියෙන්නෙ. උදාහරණයක් විදිහට;
    <div class='wdt'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'></script></div>
    කියල දැම්මොත් ඔයාට StumbleUpon එකතු කරගන්න පුළුවන්.
    මම මේ ගැනත් කියල සටහන අළුත් කරන්නම්.

    ReplyDelete
  3. pattai eth mata melo deyak therun naha.

    ReplyDelete
  4. @ nishan,
    අවුලක් නෑ , ඊළඟ පාර තවත් සරළව ලියන්නම්කො...

    ReplyDelete
  5. වැඩේ නම් මැක්සා..මගෙ බ්ලොග් එකටත් මං කෝඩ් එක දැම්ම එත් වැඩ නෑ.මගෙ වැරැද්දක්ද දන්නෑ..අදහසක් නැද්ද,
    http://sanhithawa.blogspot.com/

    ReplyDelete
  6. අනේ පිංසිද්ද වෙච්චාවේ මයෙ කොල්ලට.... :-D

    ReplyDelete
  7. මේකට Google Buzz Badge එක දාගන්නේ කොහොමද?

    ReplyDelete
  8. ඒක කරන්නෙ මෙහෙමයි,
    මුලින් දාල තියන code එකේ 36 වෙනි පේළියට යටින් මේක දාන්න.
    <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

    ඊට පස්සෙ කියල තියන පොඩි * කෑල්ලෙ 5 වෙනි පේළියට පස්සෙ මේක එකතු කරන්න.
    <div class='wdt'><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a></div>
    දැන් වැඩේ ගොඩ.

    ReplyDelete
  9. ස්තූතියි යාළු. මං කරල බලන්නම්. කරලම ආයේ කමෙන්ට් එකක් දාන්නම්කො.

    ReplyDelete
  10. meka adda karama patha size box ekak enawa ne. hada ganna full try kara. be. mokada karanne?

    ReplyDelete
  11. @ සිව්පෙතියා,
    මේකයි වෙලා තියෙන්නෙ, ඔයා 6 වෙනි පේළිය ඉවර වෙන්න කලින්(&t;/div>) තමයි buzz එකට අදාල code කෑල්ල දාල තියෙන්නෙ.

    <div class="wdt"><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script><iframe frameborder="0" scrolling="no" allowtransparency="true" style="border:none; overflow:hidden; width:50px; height: 60px;" src="http://www.stumbleupon.com/badge/embed/5/?url=http%3A%2F%2Fsiupethiyablog.blogspot.com%2F2011%2F04%2Ftinker-bell-and-great-fairy-rescue-with.html"></iframe>
    <div class="wdt"><a title="Buzz" href="http://www.google.com/buzz/post" data-button-style="normal-count" class="google-buzz-button" style="text-decoration: none;"><span class="buzz-counter" dir="ltr" id="buzz-593292163"></span></a></div>
    </div>

    කියන code කෑල්ල පහළ විදිහට වෙනස් කරගත්තහම ගොඩ.

    <div class="wdt"><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script><iframe frameborder="0" scrolling="no" allowtransparency="true" style="border:none; overflow:hidden; width:50px; height: 60px;" src="http://www.stumbleupon.com/badge/embed/5/?url=http%3A%2F%2Fsiupethiyablog.blogspot.com%2F2011%2F04%2Ftinker-bell-and-great-fairy-rescue-with.html"></iframe></div>
    <div class="wdt"><a title="Buzz" href="http://www.google.com/buzz/post" data-button-style="normal-count" class="google-buzz-button" style="text-decoration: none;"><span class="buzz-counter" dir="ltr" id="buzz-593292163"></span></a></div>

    ReplyDelete
  12. @ සවීර,
    මම ඔයාගෙ comment එක දැක්කෙ දැන්, සමාවෙන්න ඕන reply කරන්න බැරි වෙච්ච එකට.

    ReplyDelete
  13. ස්තූතියි යාළු. කරල බලලා කමෙන්ට් එකක් දාන්නම්. සිරාවටම පට්ට තෑන්ක්ස් කොල්ලා reply එකට.

    ReplyDelete
  14. යාළු වැඩේ කරගත්තෝ.... තෑන්ක්ස් හොදේ?

    ReplyDelete
  15. @සිව්පෙතියා,
    එළ එළ...

    ReplyDelete
  16. මමත් දාල බැලුවා .
    නමුත් වැඩ කරන්නෙ නෑනේ..
    මගේ 3 COLUMN එකක් නිසා POSITION එක වෙනස් කරන්න ඕනද?.POSITION එක ඔය කියල තිබ්බ විදියටම දාපු නිසාමද දන්නෙ නෑ.
    පොඩ්ඩක් සලකල බලනවද මගේ දුක්ගැනවිල්ලත් :D
    http://vedikawa.blogspot.com

    ReplyDelete
  17. 3 Coulmn තමයි සීන් එක වගේ පේන්නේ.මම මගේ 2 Coulmn එකට දැම්මම එල කිරි වගේ වැඩ.
    http://ratawata.blogspot.com/2011/08/5.html
    බැරිද 3 Coulmn එකේ ඒක Bottom එකට දාන්න

    ReplyDelete
  18. මේක ඉහල පහල නොයා තියන්න හදන්නේ කොහොමද?

    http://www.amazingeworld.com/2011/06/how-to-add-floating-social-media.හ්ට්ම්ල්

    ඔය වගේ..

    ReplyDelete
    Replies
    1. වැඩේ කරගත්ත නේද ?

      Delete
    2. ඔව් ඔව් ගොඩ ගොඩ...අලුතෙන් පෝස්ට් එකක් ලියන්නේ නැතෙයි..

      Delete
  19. අය්යා පට්ටම පට්ටයි බ්ලොග් එක නියමයි

    ReplyDelete
  20. ස්තූතියි ඔබට මමත් බ්ලොගයක් පටං ගත්තා හැබැයි අලුත්

    ReplyDelete

කොහොමද සටහන? පට්ටද, නෝමල්ද නැත්නම් චාටර්ද?
සිංහලෙන් ටයිප් කරන්න අමාරු නම් යුනිකෝඩ් එසැණින් පරිවර්තකය පාවිචිචි කරන්න.

Related Posts with Thumbnails