அப்பாக்குட்டிஏனைய இணைப்புகள்: நான்கு சமூக வலைத்தளங்கள் ஒரே விட்ஜெட்டில்

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

நாம் இன்று பார்க்கப்போவது 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/AVvXsEhCAHgsVVXScxU1bF3afrDRuM-zXgYcdxSqY-kFBzI8IN7kegwrbZLXXcpZ2ApFGZyaBG5mdmqeOgZ95fY0CmrL_1kDEIghMjd5YelwlZMDkjP-B3HgwlP_IazoGuOHFTH8toL5tk977AL2/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/AVvXsEiEDp-wEGODW7Ey5B01AqqhZlaQLFj7NSgypktk9A2F9K3DXmgT8TcxtLyyE8qbM1yNrcyeRvivQMMsVlOeprnQdEOxCTk9CWvMM_fDhIGdklzbz49vnbzTJO9b-qE9Y9w5Xf-YxTQq3IlT/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/AVvXsEiOeJ0549Pz3AM3Uloj1mzxQRZAHQN0Lx4AYU5p_TsUhG9vVOiGO1NzX5JI7aqqpNjdMpWJ_9ukHLeLszT3v87flOoj-A00Lg-Gl0lneIahKWvmf-3UPCG1ID3j24jbQ5es83pynW_nJZeb/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsucOMoGAu-nP7CNiZo3ejCd51UBxxfaWEU41tG1Mg-O-DCNy6Xe-72DpiSuS5_KaJvZyAeOSnvj_29XGIbVf2L0bG3cVpdkIa4MZhnArSbulAOn9xJ8hHQzb5UKiie6DQyLgrcukI1Xa-/s1600/%255Bwww.gj37765.blogspot.com%255Dfeedburner_right.png" /></div></div></div></div>

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