Social Icons

  • Tuesday, April 3, 2012

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

    நாம் இன்று பார்க்கப்போவது 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/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="http://2.bp.blogspot.com/-00WPNGJANes/Twqcc-h41wI/AAAAAAAACSc/BLBwbXHIP3o/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

    30 comments:

    1. பயனுள்ள தகவல் ... நன்றி ...

      ReplyDelete
      Replies
      1. நன்றி நண்பா உங்கள் வருகைக்கும் கருத்துக்கும்

        Delete
    2. நல்ல தகவல் அன்பரே

      ReplyDelete
      Replies
      1. நன்றி நண்பா உங்கள் வருகைக்கும் கருத்துக்கும்

        Delete
    3. பயனுள்ள தகவல் பகிர்வுக்கு நன்றி நண்பரே.

      ReplyDelete
      Replies
      1. நன்றி நண்பா உங்கள் வருகைக்கும் கருத்துக்கும்

        Delete
    4. மிகவும் பயனுள்ள தகவல் நண்பா....பகிர்வுக்கு நன்றி

      ReplyDelete
      Replies
      1. நன்றி நண்பா உங்கள் வருகைக்கும் கருத்துக்கும்

        Delete
    5. தகவலுக்கு நன்றி சதீஸ்

      ReplyDelete
      Replies
      1. நன்றி நண்பா உங்கள் வருகைக்கும் கருத்துக்கும்

        Delete
    6. பயனுள்ள தகவல் பகிர்வுக்கு நன்றி

      ReplyDelete
      Replies
      1. நன்றி நண்பா உங்கள் வருகைக்கும் கருத்துக்கும்

        Delete
    7. தகவல் பகிர்வுக்கு நன்றி சதீஷ்

      ReplyDelete
      Replies
      1. நன்றி நண்பா உங்கள் வருகைக்கும் கருத்துக்கும்

        Delete
    8. வணக்கம் நண்பா,
      நல்லா இருக்கீங்களா?
      பள்ளிப் படிப்பு எல்லாம் எப்படி?
      ஹை ஸ்கூல் முடிச்சு காலேஜ் போயாச்சா?

      பதிவர்கள் அனைவருக்கும் மிகவும் பயனுள்ள பதிவினைக் கொடுத்திருக்கிறீங்க. உளமார்ந்த நன்றிகள் உரித்தாகட்டும்!

      ReplyDelete
      Replies
      1. நல்லா இருக்கேன்.நீங்க எப்படி

        பள்ளிப் படிப்பு எல்லாம் ஓகே

        ஹை ஸ்கூல் முடிச்சு காலேஜ் போயாச்சா?///

        இப்ப ட்தானே தேர்வே முடிஞ்சிருக்கு.

        ஹை ஸ்கூல் முடிச்சு காலேஜ் போயாச்சா?

        Delete
    9. Replies
      1. நன்றி நண்பா உங்கள் வருகைக்கும் கருத்துக்கும்

        Delete
    10. பயனுள்ள தகவல் நன்பா...உடனே பயன்படுத்தி விடுகிறேன்...

      ReplyDelete
      Replies
      1. நன்றி நண்பா உங்கள் வருகைக்கும் கருத்துக்கும்

        Delete
    11. மிகவும் பயனுள்ள பகிர்வு

      ReplyDelete
    12. நண்பா சதிஸ் அருமையான தகவல் சொன்னதற்கு நன்றி...

      ReplyDelete
    13. பயனுள்ள பதிவு நண்பா இப்போது தான் பார்க்க முடிந்தது மன்னிக்கவும்.

      ReplyDelete
    14. Face book மட்டும் Could not retrieve ID for the specified page. Please verify correct href was passed in.
      என்று வருகிறது
      https://www.facebook.com/ganeshvideos

      ReplyDelete
      Replies
      1. நண்பா நீங்கள் அதில் Facebook Page Url கொடுக்கவேண்டும்

        கீழே உள்ள Link-ல் செல்லுங்கள் நண்பா

        http://sathishdemo.blogspot.in/2012/04/how-to-find-facebook-page-url.html

        Delete
    15. நல்ல தகவல் முயற்சிக்கிறேன்

      ReplyDelete
    16. Thank u sir today add the widget to our union blogger
      Thank u again
      R.Varatharajan
      Kanchipuram

      ReplyDelete

     

    Google+ Followers

    FaceBook Followers

    Followers