Announcement:

This is a Testing Annocement. I don't have Much to Say. This is a Place for a Short Product Annocement

பிளாக்கரில் புதிய Popup Email Subscribe Widget இணைக்க

சில தளங்களில் நாம் பார்த்து இருப்போம் இந்த விட்ஜெட்டை நாம் அந்த தளத்திற்கு சென்றால் அந்த தளம் ஓபன் ஆகியவுடன் நமக்கு ஒரு இன்னொரு popup விண்டோ ஓபன் ஆகும் அதில் Email subscription விட்ஜெட் இணைக்கப் பட்டிருக்கும் அதில் சென்று அவர்கள் உறுப்பினர் ஆகி கொள்ளலாம். இதனால் உங்களுடைய ஈமெயில் வாசகர்களை கணிசமான முறையில் அதிகரித்து பிளாக்கின் வாசகர்களை அதிகரிக்கலாம். இது போன்று பிளாக்கர் வலைபூக்களில் எப்படி அந்த விட்ஜெட்டை வைப்பது என பார்ப்போம்.இந்த விட்ஜெட்டின் சிறப்பம்சமே புதிதாக உங்கள் பதிவுகளுக்கு வருபவர்களுக்கு தான் தெரியும். தொடர்ந்து படிப்பவர்களுக்கு வந்து தொந்தரவு செய்யாது.
விஜெட்டின் Live Demo பார்க்க கீழே உள்ள பட்டனை அழுத்துங்கள். 



இது கொஞ்சம் பெரிய கோடிங்காக இருக்கும் கவனமாக பின்தொடரவும்.

Step-1
  • முதலில் உங்கள் பிளாக்கர் அக்கௌண்டில் நுழைந்து கொண்டு Design ==> Edit Html ==> கிளிக் செய்து இந்த கோடிங்கை ]]></b:skin> கண்டுபிடிக்கவும். 
  • கீழே உள்ள கோடிங்கை காப்பி செய்து கண்டுபிடித்த இந்த வரிக்கு முன்/மேலே ]]></b:skin> பேஸ்ட் செய்யவும். 
/*Subscription Pop Up Css*/
#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
/*End Subscription Pop Up Css*/
Step-2
  • அடுத்து இந்த வரியை </head> கண்டுபிடிக்கவும்.  கீழே உள்ள கோடிங்கை காப்பி செய்து இந்த வரிக்கு முன்னே/மேலே </head>  பேஸ்ட் செய்யவும். 
    <!--Pop Up Subscription-->
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
    <script src='http://dinhquanghuy.110mb.com/jquery.cookie.js' type='text/javascript'/>
    <script type='text/javascript'>
    var popupStatus = 0;

    //loading popup with jQuery magic!
    function loadPopup(){
    centerPopup();
    //loads popup only if it is disabled
    if(popupStatus==0){
    $(&quot;#backgroundPopup&quot;).css({
    &quot;opacity&quot;: &quot;0.7&quot;
    });
    $(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);
    $(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);
    popupStatus = 1;
    }
    }
    //disabling popup with jQuery magic!
    function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
    $(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);
    $(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);
    popupStatus = 0;
    }
    }
    //centering popup
    function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var windowscrolltop = document.documentElement.scrollTop;
    var windowscrollleft = document.documentElement.scrollLeft;
    var popupHeight = $(&quot;#popupContact&quot;).height();
    var popupWidth = $(&quot;#popupContact&quot;).width();
    var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
    var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
    //centering
    $(&quot;#popupContact&quot;).css({
    &quot;position&quot;: &quot;absolute&quot;,
    &quot;top&quot;: toppos,
    &quot;left&quot;: leftpos
    });
    //only need force for IE6

    $(&quot;#backgroundPopup&quot;).css({
    &quot;height&quot;: windowHeight
    });

    }
    //CONTROLLING EVENTS IN jQuery
    $(document).ready(function(){
    if ($.cookie(&quot;anewsletter&quot;) != 1) {

    //load popup
    setTimeout(&quot;loadPopup()&quot;,5000);
    }
    //CLOSING POPUP
    //Click the x event!
    $(&quot;#popupContactClose&quot;).click(function(){
    disablePopup();
    $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
    });
    //Click out event!
    $(&quot;#backgroundPopup&quot;).click(function(){
    disablePopup();
    $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
    });
    //Press Escape event!
    $(document).keypress(function(e){
    if(e.keyCode==27 &amp;&amp; popupStatus==1){
    disablePopup();
    $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
    }
    });

    });
    </script>
    <!--End Pop Up Subscription -->
    Step-3
    • இறுதியாக இந்த கோடிங்கை </body> கண்டுபிடிக்கவும். கீழே உள்ள கோடிங்கை காப்பி செய்து இந்த வரிக்கு மேலே/முன்னே </body> பேஸ்ட் செய்யவும். 
    <div id='popupContact'>
    <a id='popupContactClose'>x</a>
    <h1>புதிய பதிவுகளை இலவசமாக ஈமெயில் பெற </h1>
    <p id='contactArea'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=vandhemadharam&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='vandhemadharam'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form></p>
    </div>
    <div id='backgroundPopup'/>
    கோடிங்கை சேர்த்தவுடன் மேலே சிவப்பு நிறத்தில் கொடுத்துள்ள இடத்தில் உங்களுடைய Feedbuner ஐடியை கொடுக்கவும். மற்றும் தலைப்பு உங்களுக்கு தேவையான படி மாற்றி கொள்ளுங்கள்.

    அவ்வளவு தான் கீழே உள்ள Save Template கொடுத்து உங்கள் பிளாக்கிற்கு சென்று  பாருங்கள் தானாக அந்த Email Subscription விட்ஜெட் ஓபன் ஆகும்.

    பதிவு பயனுள்ளதாக இருந்தால் கீழே உள்ள ஓட்டு பட்டையில் ஓட்டு போட்டு செல்லவும். 

    சசிகுமார்

    இணையத்தில் கொட்டி கிடக்கும் தொழில்நுட்ப தகவல்களை நம் அழகு தமிழில் மொழிபெயர்த்து தரும் உங்களில் ஒருவன்.

    16 comments :

    1. இந்த வசதி வச்சா ப்ளாக் ஒபெனிங் ஸ்லோ ஆக வாய்ப்பு உள்ளதா?

      ReplyDelete
    2. @தமிழ்வாசி - Prakash

      இந்த விட்ஜெட்டின் சிறப்பம்சமே புதிதாக உங்கள் பதிவுகளுக்கு வருபவர்களுக்கு தான் தெரியும். தொடர்ந்து படிப்பவர்களுக்கு வந்து தொந்தரவு செய்யாது.

      ReplyDelete
    3. நன்றி...


      புதிய புதிய தகவலுடன் தினம் தினம்...
      வாழ்த்துக்கள்...

      ReplyDelete
    4. டேய் பிரகாஷ், சசி அவன் என்ன கேள்வி கேட்டான். ஸ்லோ ஆகுமான்னு கேட்டு இருக்கான். அதுக்கு நீ //இந்த விட்ஜெட்டின் சிறப்பம்சமே புதிதாக உங்கள் பதிவுகளுக்கு வருபவர்களுக்கு தான் தெரியும். தொடர்ந்து படிப்பவர்களுக்கு வந்து தொந்தரவு செய்யாது//
      ன்னு பதில் சொல்லி இருக்கே.. சம்பந்தமே இல்லையே. இதுக்கு அவரு விளக்கத்திற்கு நன்றி வேற சொல்லி இருக்காரு.. என்னாடா நடக்குதிங்க? ஹோ.ஹோ..ஹோ..

      ReplyDelete
    5. @!* வேடந்தாங்கல் - கருன் *!

      கண்ட கண்ட ட்ராபிக் விட்ஜெட் வச்சு ஒவ்வொரு தடவையும் ஓபன் ஆகும் போது எடுக்குற நேரத்தை விட எப்பவோ ஒருமுறை புதியவர்களுக்கு லோட் ஆகும் பொழுது கொஞ்சம் நேரம் ஆனா தப்பே இல்லன்னு அர்த்தம் அது அவருக்கு புரிஞ்சிடுசி அதனால நன்றின்னு சொன்னாரு உனக்கு பிரியல மக்கு மக்கு

      ReplyDelete
    6. நன்றி தலைவா ...

      ReplyDelete
    7. நன்றி நண்பா.

      DEMO தான் பார்க்க முடியல

      ReplyDelete
    8. பகிர்வுக்கு நன்றி சசி!!

      ReplyDelete
    9. பயனுள்ள பதிவு. நிறைய அப்ளிகேஷன்ஸ் பற்றி உங்கள பதிவின்மூலம் தெரிந்துகொள்ள முடிகிறது. நன்றி

      ReplyDelete
    10. இனிய இரவு வணக்கம் பாஸ்,
      பதிவர்கள் அனைவருக்கும் வேண்டிய பயனுள்ள பதிவு பாஸ்..
      விளக்கப் பகிர்விற்கு நன்றி.

      ReplyDelete
    11. வாத்தியாருக்கே புரியலையா?
      ஹோ.ஹோ..ஹோ..

      ReplyDelete
    12. பயனுள்ள பதிவு நண்பா

      ReplyDelete
    13. வந்தே மாதரம் எனும் இடத்தில் ஃபீட் பர்னர் முகவர் கொடுங்கள் என்ற இடம் குழப்பமாக உள்ளது..என் இணைப்பு சொதப்பி விட்டது

      ReplyDelete

    Copyright @ 2013 வந்தேமாதரம் . Designed by Templateism | Love for The Globe Press