যোগ করে নিন আপনার ব্লগারের ব্লগে Popup Email Subscription Widget

Written By পলাশ সাহা on শুক্রবার, ৩১ আগস্ট, ২০১২ | ৬:২১ PM


ডেমো দেখতে এখানে ক্লিক করুন।

চলুন জেনে নেই কিভাবে করবেন এটি।
১.প্রথমে আপনার আপনার ব্লগারের থিমের </head> কোডের আগে নিচের কোড টুকু বসি দিন।
1
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
2.তার পর একটি HTML/JAVASCRIPT উথগেট যোগ করেন নিতের নিয়মে। Layout >> Add A Gadget, then choose HTML/JavaScript ৩. তারপর নিচের কোড টুকু পেষ্ট করে দিন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
</pre>
<div id="backgroundPopup">
 
<div id="popupContact"><a id="popupContactClose">x</a>
 
<div id="btntfollowForm"><img src="http://1.bp.blogspot.com/-WcR7_thytsA/T3xAvSp4RBI/AAAAAAAAArc/zIO8zUiOOT0/s1600/subscribeviaemail.PNG" alt="Subscribe" border="0" />
 
<div id="description"><img src="http://4.bp.blogspot.com/-RKkfCfOLNx8/T3wPtkmqYuI/AAAAAAAAArU/gGpb8_Hep70/s1600/email-icon.PNG" alt="email" border="0" />Subscribe to our mailing list to get the updates to your email inbox...</div>
 
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=your feedburner username', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input type="text" name="email" /><input type="hidden" name="uri" value="your feedburner username" /><input type="hidden" name="loc" value="en_US" />
 
<div class="button"><input type="submit" value="Subscribe" /></div>
</form></div>
 
<div class="btntFollowFooter">Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.blogtipsntricks.com/" rel="dofollow" target="_blank">blogtipsntricks</a></div>
</div>
</div>
<pre>
<script type="text/javascript" src="http://yourjavascript.com/24315621361/jquery.cookie.js">// <![CDATA[
 
// ]]></script>
<script type="text/javascript">// <![CDATA[
     var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}
 
//This code will disable popup when click on x!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}
 
//this code will center popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    //centering
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6
    $("#backgroundPopup").css({
        "height": windowHeight
    });
 
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
    if ($.cookie("anewsletter") != 1) {
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    }
    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
            $.cookie("anewsletter", "1", { expires: 7 });
        }
    });
});
// ]]></script>
নোট:যেখানে your feedburner username লেখ‍া আছে সেখানে আপনার feedburner username দিন ব্যস কাজ শেষ।
ভাল লাগলে কমেন্ট করতে ভুলবেন না
Labels:

AD