உங்கள் விட்டு பிறந்த நாள் வைபவம், திருமண வைபவம், பூப்புநித நீராட்டு விளா என மங்கள நிகழ்வுகள் அனைத்தையும் சிறப்பாகப் படம் பிடித்துத் தருகின்றோம்.
இங்கு பதியப் பதிவுகளில்ல்...... நான் ரசித்தவை, படித்தவை, மற்றவர்க்கு பயனளிப்பவை,செய்திகள் என்பன அடங்கும். மற்றும்; கான், வந்தேமாதரம், பிளக்கர் நண்பன். பலே பிரபு,போன்றவரின் பதிவுகளும்.... மற்றவர்க்கு பயனளிக்கும் நோக்கில் இங்கு பதியப்படும்..

Saturday, April 21, 2012

நான்கு சமூக வலைத்தளங்கள் ஒரே விட்ஜெட்டில்

பதிவிட்டவர் http://vairaisathish.blogspot.com/2012/04/blog-post.html

நாம் இன்று பார்க்கப்போவது FaceBook,Google +,Twitter,Email Subscription Box அகியவைகள் அடங்கிய ஒரு Animated விட்ஜெட்.இது வந்தேமாதரம் சசியின்
அனிமேட்டட் Facebook Like Box விட்ஜெட் போன்று செயல்படும்.வித்தியாசம் என்னவென்றால் அந்த விட்ஜெட்டில் FaceBook மட்டும் தோன்றும்.இந்த விட்ஜெட்டில் FaceBook-ம் சேர்த்து  Google +,Twitter,Email Subscription Box  அகியவைகளும் தோன்றும்.

Demo பார்க்க எனது வலையில் வலது பக்கம் உள்ளது.

செய்முறை:

  •  முதலில் Blogger-->Template-->Edit HTML பகுதிக்கு செல்லவும்
  • Expand widget template  என்பதில் டிக் செய்யவும்
  • </head> என்ற Code-ஐ தேடவும்
  • </head> என்ற Code-க்கு முன்னால் பின்வரும் Code-ஐ Paste செய்யவும்
<link href='https://gj37765.googlecode.com/svn/trunk/html/mddemo/4in1widgetv2.css' rel='stylesheet'/>
<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' type='text/javascript"></script>
<script type="text/javascript" src="http://makingdifferent.googlecode.com/files/fanbox_init.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>
  • Save Template கொடுங்கள்
பின்னர் 
  • Blogger-->Layout பகுதிக்கு செல்லவும்
  • Add a gadget என்பதை க்ளிக் செய்தால் ஒரு Window வரும். அதில் HTML/JavaScript என்பதை தேர்வு செய்யவும்.
  • பின் அங்குள்ள Content பகுதியில் பின்வரும் Code-ஐ Paste செய்யவும்

<div id="on"><div id="facebook_right" style="top: 20%;"><div id="facebook_div"><img src="http://1.bp.blogspot.com/-XyYjgghpO7A/TwqccHW47QI/AAAAAAAACSU/OvETkV56ui8/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=htttp://facebook.com/vairaisathish&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;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://2.bp.blogspot.com/-7IkUBD3wuB0/Twqcbg9ZbZI/AAAAAAAACSQ/NFTv36TcJho/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter_right.png" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("vairaisathish");</script></div></div></div>

<div id="on"><div id="google_plus_right" style="top: 50%;"><div id="google_plus_div"><img id="google_plus_right_img" src="http://2.bp.blogspot.com/-JLpoSgJD_BE/Twqcdf5jwYI/AAAAAAAACSg/MPBORcd7Sbs/s1600/%255Bwww.gj37765.blogspot.com%255Dgoogle_plus_right.png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plus href="https://plus.google.com/112561926887686688300" size="badge"></g:plus></div></div></div><div id="on"><div id="feedburner_right" style=" top: 65%;"><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=vairaisathish', '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 == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="vairaisathish" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="http://2.bp.blogspot.com/-00WPNGJANes/Twqcc-h41wI/AAAAAAAACSc/BLBwbXHIP3o/s1600/%255Bwww.gj37765.blogspot.com%255Dfeedburner_right.png" /></div></div></div></div>
மாற்ற வேண்டியவை
Related Posts Plugin for WordPress, Blogger...