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

நாம் இன்று பார்க்கப்போவது 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDABJpV68MdvnvaxmejPV_otavAAXvUk3BA15JXZED6t9ZSnhFQ8IFw9RJ7kKofxx7EmLPihl-UOEF3rdDL4hMJWvz2OjzpCpt124EhBKlRTYDrov4jo46d6J2Q_4b9lq9AiEW0nPiA5Iz/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWR6KWASnOGJcLy-JTj1pQ2grVAQGC5tbwq38jtyvmUA3xynuxg0fhBrQCa7LPknTpSP4O81UJUkzHpqySbZECYcTh83aGQoBPYhzWInF5BSzEhyAHoe70X_KYMtdl59AnJbXHog0Rbanu/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/AVvXsEiypZKfOBHzG87I5FUR6ebQqoT2l0EUn7Cph6DVVZU267SkvyJkHk-ahK1VhdEaLqsmlV1ZeNvhv-4BZUkn6PaSKuJTXYmNeQReuul2Q2l6vKlDPpNNHLjfTo2BtscJPHBKdrRkanJ9dQzj/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/106320712473840669629" rel="publisher" width="250" height="69" theme="light"></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk14Li-So_UHwHRpGsY221x1NYxsXd9zy5orrKULZSBHZBYPtAkwnn9r-2TkFxG30BMNIOCnUDS9e7B6zrg4_cvYdUiAjICh-F_SaWnuVXERU1m-IrPFAXZYvxgNHdTOn5wrUiSZISZlWS/s1600/%255Bwww.gj37765.blogspot.com%255Dfeedburner_right.png" /></div></div></div></div>

மாற்ற வேண்டியவை

• சிவப்பு நிறத்தில் உள்ளது FaceBook Page URL

• நீல நிறத்தில் உள்ளது Twitter UserName

• இளஞ்சிவப்பு நிறத்தில் உள்ளது Google Plus Page URl

Google Plus Page Badge உருவாக்க இங்கே செல்லவும்

• ஆரஞ்சு நிறத்தில் உள்ளது FeedBurner URL

மாற்றங்களை செய்து விட்டு Save கொடுக்கவும்

நன்றி:MakingDifferent