ব্লগে একটি সুন্দর POPUP ইমেইল Subscription গ্যাজেট যুক্ত করুন

ভিজিটরদের আকৃষ্ট করতে কত কিছুই না করতে হয়। তা কেবল ব্লগের মালিকগনই জানে। বিভিন্ন নতুন নতুন ডিজাইন যোগ করতে হয়। বিভিন্ন ধরনের Mail Subiscription গ্যাজেট ব্যবহার করে, Popup Email subscription গ্যাজেট তার মধ্যে অন্যতম। এর মাধ্যমে ব্লগে অনেক ভিজিটর বৃদ্ধি বাড়ানো যায়। আজ চলুন আমরা শিখি কিভাবে ব্লগে এই গ্যাজেট যোগ করা যায়। প্রথমে ব্লগের HTML Edit করে </head> টাগের আগে নিচের জাভা স্ক্রিপ্টটা বসান এবং সেইব করুন।

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

এবার Layout ট্যাবে গিয়ে HTML/JavaScript গ্যাজেট যুক্ত করুন এবং নিচের কোডটা কপি করে পেষ্ট করে সেইভ করুন।

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

After saving this script in blog template and add HTML/JavaScript gadget anywhere of your blog. If you already done this then copy the bellow code and paste into the recently added gadget and hit save button to save it.

<style>
#backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background-color: transparent;       background:rgba(0, 0, 0, 0.5);z-index:999; }
#popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:350px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-size:13px; }
#popupContactClose{    background:url(http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png) no-repeat;    width:25px;    height:29px;    display:inline;    z-index:3200;    position:absolute;    top:-15px;    right:-16px;    cursor:pointer;    text-indent: -99999px;}
#description {    color: #AAAAAA;    font-family: times New Roman;    font-size: 25px;    font-style: italic;    line-height:30px; }
#description img {    float: left;    height: 80px;    padding: 0 25px 0 10px;    width: 80px; }
#btntfollowForm {  padding: 15px; }
#btntfollowForm img {  border:none; }
#btntfollowForm p {  margin: 0 0 10px;}
#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 10px;        margin-bottom: 20px; padding: 10px 5px 10px 25px;  border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box;   -moz-box-sizing : content-box;       box-sizing : content-box; -webkit-border-radius: 3px;    -moz-border-radius: 3px;         border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;         box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear;    -moz-transition: all 0.2s linear;      -o-transition: all 0.2s linear;   transition: all 0.2s linear; }
#btntfollowForm input:not([type="checkbox"]):active,
#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;         box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;}
#btntfollowForm .button input{    background: none repeat scroll 0 0 #3D9DB3;    border: 1px solid #1C6C7A;    border-radius: 3px 3px 3px 3px;    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;    color: #FFFFFF;    cursor: pointer;    font-family: 'Arial Narrow',Arial,sans-serif;    font-size: 24px;    margin-bottom: 10px;    padding: 8px 5px;    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);    width: 30%;    float: right; }
#btntfollowForm .button input:hover{    background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87);   -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;         box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter {  color:#222;  text-align: center;    font: 10px Tahoma, Helvetica, Arial, Sans-Serif;    padding: 7px 0;    margin-top: 80px;    text-shadow: 0px 2px 3px #555;    position: absolute;    width: 500px; }
.btntFollowFooter a {    color: #222;    text-decoration: none; }
.btntFollowFooter a:hover {    color: #fff; }
<!--[if lt IE 7]>
#btnt-container a.btntCloseImg {    background:none;    right:-14px;    width:22px;    height:26px;     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png',sizingMethod='scale'); }
#btntfollowForm  input{ padding: 10px 5px 10px 32px;    width: 93%; }
#btntfollowForm  input[type=checkbox]{ width: 10px; padding: 0;}
<![endif]-->
</style>
<div id="backgroundPopup">
<div id="popupContact">
<a href="" id="popupContactClose">x</a>
<div id="btntfollowForm">
<img alt="Subscribe" border="0" float="center" src="http://1.bp.blogspot.com/-WcR7_thytsA/T3xAvSp4RBI/AAAAAAAAArc/zIO8zUiOOT0/s1600/subscribeviaemail.PNG" />
<div id="description">
<img alt="email" border="0" src="http://4.bp.blogspot.com/-RKkfCfOLNx8/T3wPtkmqYuI/AAAAAAAAArU/gGpb8_Hep70/s1600/email-icon.PNG" />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=tipsworldbd', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="tipsworldbd" /><input name="loc" type="hidden" value="en_US" />
<div>
<input type="submit" value="Subscribe" /></div>
</form>
</div>
<div>
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://tipsworldbd.blogspot.com/" rel="dofollow" target="_blank">computer tips world bd</a></div>
</div>
</div>

<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">
</script>
<script type="text/javascript">
 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>

সেইভ করার পূর্বে অবশ্যই আপনার ব্লগের Feedburner এর username এর সাথে tipsworldbd পরিবর্তন করে নিবেন।

সাম্প্রতিক ছবিসহ কমেন্টসগুলো দেখার জন্য একটি সুন্দর গ্যাজেট

ব্লগে যুক্ত করুন একটি সুন্দর ছবিসহ একটি রিলেটেড পোষ্ট গ্যাজেট

Level 0

আমি অসীম কষ্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 39 টি টিউন ও 35 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি একজন ছাত্র পড়াশুনার ফাঁকে ফাঁকে কম্পিউটার নিয়ে ঘাটাঘাটি করি। এতে আমি যা জানতে পারি বা বুঝতে পারি তা বন্ধুদের সাথে শেয়ার করি। ঘুরে বেড়াতে ভাল লাগে একা একা থাকতে আর সারাদিন নাওয়া খাওয়া ছেড়ে কম্পিউটারের সাথে লেগে থাকতে ভাল লাগে। খুব বেশি বন্ধু তবে আমরা যখন একত্র হই তখন...


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস