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 එකක් දාන්නත් අමතක කරන්න එපා ඕං. ඔබට ජය!
Related Posts with Thumbnails