ගින්දර වගේ Social Sharing Widget එකක් ඔබේ Blog එකට දාගමු

අද TricksLanka.com වෙත ආව ඔබ දකින්න ඇති අමුතුම විදියක pop out widget එකක් එකතු කරලා තියෙනවා. මිට කලින් ඔයාල දැකල ඇති Facebook සදහා මෙවැනි Widget එකක් එකතු කරලා තිබ්බා. නමුත් මේ widget එකේ Facebook වලට අමතරව Twitter, Google වගේම Email Subscription popup form එකත් එකතු කරලා තියෙනවා. කෙටියෙන්ම කියනවනම් ඔක්කොම එකට. xD ඉතින් අද මම ඔයාලට කියන්න යන්නේ කොහොමද මේ widget එක ඔයාලගේ blog එකට එකතු කරගන්නේ කියලා.​

• මුලින්ම Blogger -->Design -->HTML වෙත පිවිසෙන්න.
• Expand Widget Template යන්න ඉදිරියේ ඇති box එකට tick mark එකක් දාන්න.
• ඔබේ යතුරුපුවරුවේ Ctrl + F ඔබා </head> කියන tag එක හොයාගන්න.
• පසුව පහත දී ඇති codes ටික copy කරගෙන </head> tag එකට ඉහළින past කරන්න.

<link rel="stylesheet" href="https://tricks-lanka.googlecode.com/svn/trunk/[www.trickslanka.com]multipopoutwidget.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });
</script>

Click to expand...

• මීලගට ඔබ Blogger-->Design -->Add a Gadget වෙත ගොස් HTML/Javascript යන්න තෝරා පහත දී ඇති Codes ටික copy/paste කරගන්න.

<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
<img src="http://3.bp.blogspot.com/-CLSU2WBqy4M/TwxeZ_f08wI/AAAAAAAAALc/XwcYUTYOQuc/s1600/%255Bwww.trickslanka.com%255Dfacebook_right.png" alt="" />

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftrickslanka&locale=en_GB&width=200&connections=9&stream=&header=false&show_faces=0&height=356" scrolling="no"></iframe>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 35%;">
<div id="twitter_div">
<img id="twitter_right_img" src="http://4.bp.blogspot.com/-_AZ-eTvdD6g/Twxe6F7oOCI/AAAAAAAAALk/6GDbFYAPcn0/s1600/%255Bwww.trickslanka.com%255Dtwitter_right.png">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 1000,
width: 246,
height: 265,
theme: {
shell: {
background: '#63BEFD',
color: '#FFFFFF'
},
tweets: {
background: '#FFFFFF',
color: '#000000',
links: '#47a61e'}
},
features: {
loop: false,live: true,
scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }
}).render().setUser('tr1ckslanka').start();
</script>
</div>
</div>
</div>
<div id="on">
<div id="google_plus_right" style="top: 52%;">
<div id="google_plus_div">
<img id="google_plus_right_img" src="http://4.bp.blogspot.com/-yR-zIZzceM4/TwxffpUzreI/AAAAAAAAALs/-IrbjJVbEU8/s1600/%255Bwww.trickslanka.com%255Dgoogle_plus_right.png">
<div style="float:left;margin:10px 10px 10px 0;"><glusone size="tall" expr:href="dataost.url"></glusone></div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 69%;">
<div id="knfeedburner_div">
<center>
<h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TricksLanka', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="TricksLanka" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center>

<img id="feedburner_right_img" src="http://4.bp.blogspot.com/-fwBd-IZifgU/TwxfxdO74oI/AAAAAAAAAL0/WDgwPx7Y4ww/s1600/%255Bwww.trickslanka.com%255Dfeedburner_right.png">
</div>
</div>
</div>

Click to expand...

1. trickslanka වෙනුවට ඔබේ Facebook fan page එකේ username එක ලබාදෙන්න.
2. tr1ckslanka වෙනුවට ඔබේ Twitter username එක ලබාදෙන්න.
3. TricksLanka වෙනුවට ඔබේ Blog එකේ feed title එක ලබාදෙන්න.

ඉතින් ඔබ සාර්ථකව මෙම widget එක ඔබේ බ්ලොග් එකට එකතු කරගෙන හමාරයි. මේ පිලිබදව අදහස් , ගැටළු ඕනෙම දෙයක් කමෙන්ට් කරලා අහන්න පුළුවන්. ඒ කොහොම නමුත් ඔබ මේ widget එක පිලිබදව සැහීමට පත වෙනවනම් කමෙන්ට් එකක් දාල මාවත් සනසලා යන්න. xD මොකද මේ වෙනුවෙන් මම අද ගොඩක් කාලය වැය කළා.

Source:

www.trickslanka.com

Click to expand...