பதிவிட்டவர் http://vairaisathish.blogspot.com/2012/04/blog-post.html
அனிமேட்டட் Facebook Like Box விட்ஜெட் போன்று செயல்படும்.வித்தியாசம் என்னவென்றால் அந்த விட்ஜெட்டில் FaceBook மட்டும் தோன்றும்.இந்த விட்ஜெட்டில் FaceBook-ம் சேர்த்து Google +,Twitter,Email Subscription Box அகியவைகளும் தோன்றும்.
Demo பார்க்க எனது வலையில் வலது பக்கம் உள்ளது.
செய்முறை:
- முதலில் Blogger-->Template-->Edit HTML பகுதிக்கு செல்லவும்
- Expand widget template என்பதில் டிக் செய்யவும்
- </head> என்ற Code-ஐ தேடவும்
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVsJVvwS0eWYsYjmQSbPRjNQxW82VycFxOI7uxFIDBXo0uaoGuDuxC5QCOgyrzML2yvdc_q2-NPK_rFzu_exHaFaFpIXbLoAHOkQpusulgpCWVDNwE9UNr5yxff4KFMsCuwky8AUIzFi7z/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=htttp://facebook.com/vairaisathish&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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFEbQYPLu2HoKlamSqCAtS5mnFYis6EeKj14UL0CJRUKgsfqJbs7Z8Zu0y7-6uMFJ2JKRh5H0vVQmwcMOn47zQJ5Pie95kLl4RMiQ-MKYntg4bBFwQfytmLlHkBq3jt3fDAVzXBOfdL9ET/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSm_9XSS7HV6Uf9ogTK1S0QssoeDxiVhao_QAxuwJbsENLhRlxZX-7YFZGzju7MhlrZZxEqfEmtqzz2qbUsWzcN5a8m5OYvGv7vVSbImneKeDStZL3rLb52dLxiUMR-fnqBskOCWpdgkpq/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 == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="vairaisathish" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI6WFebv1K71NciVUbz7VD1bgCZ0G_ie2W69c52_0QBzbgkWyGD1zkL8ao6-cBnP6de9dwm3-SQqCiuX0ik4XBEC_o_ggGmrM2GjiIoM7UPchshPpDeocjEX0DehpmcgoX5s1EejSvJ60m/s1600/%255Bwww.gj37765.blogspot.com%255Dfeedburner_right.png" /></div></div></div></div>
மாற்ற வேண்டியவை
