কীভাবে ব্লগারে পপ-আপ সাবস্ক্রীপশন বক্স তৈরী করতে হয়?


আপনার ব্লগের জন্য একটি রেস্পন্সিভ Floating সাবস্ক্রিপশন উইজেট

আসসালামু আলাইকুমকেমন আছেন আপনারা? আজ আমি আপনাদের দেখাবো কিভাবে আপনারা কোনো খরচ ছাড়াই নিজের ব্লগার ব্লগের জন্য একটি সুন্দর পপআপ ইমেল সাবস্ক্রিপশন উইজেট তৈরি করবেনএটি আপনার ব্লগে ভিজিটরদের অ্যাক্টিভিটি বাড়ানোর জন্য একটি প্রফেশনাল ইমেল সাবস্ক্রিপশন উইজেট। 

এর আগে আপনি হয়ত অনেকগুলি পপআপ উইজেট দেখেছেন তবে আজকে আমি যে উইজেট টি আপনাদের সাথে শেয়ার করছি সেটা আগেরগুলোর চেয়ে আরো ভালো হবে ,কারণ,এই উইজেটটি ফ্লেক্সিবল, ইউজার ফ্রেন্ডলি এবং রেস্পন্সিভ

পপ আপ কী?

আপনি হয়তো দেখে থাকবেন মাঝে মাঝে কোনো ওয়েব সাইটে ঢুকার সাথে সাথে অটোমেটিক একটি পেইজ আপনার সামনে চলে আসে। এটিই হলো পপ-আপ পেইজ

কেন ব্লগারের জন্য PopUp ইমেইল সাবস্ক্রিপশন উইজেট ব্যবহার করবেন?
  • এটি ব্লগে ভিজিটর বাড়ানোর চূড়ান্ত সমাধান হতে পারে
  • এটি একটি নতুন পোস্ট প্রকাশের পরে প্রতিটি গ্রাহককে অটোমেটিকভাবে ইমেইল এর মাধ্যমে অবহিত করবে
  • এটি আপনার ব্লগে ভিজিটরদেরকে ফিরিয়ে নিয়ে আসবে এবং সাইটের বাউন্স রেট কমে যাবে
  • এটি একটি ব্লগের ৭০০% বা আরও বেশি ইমেইল গ্রাহক বাড়িয়ে তুলতে পারে

 তাহলে চলুন দেখে নিই কীভাবে আপনার ব্লগে পপ আপ সাবস্ক্রিপশন উইজেট অ্যাড করবেন...

আপনার ব্লগার অ্যাকাউন্টে লগইন করুন > "Layout" অপশনে যান > "Add a Gadget" এ ক্লিক করুন এবং " HTML/Javascript " অপশনে ক্লিক করুন

এরপর নিচের কোডটি কপি করে সেখানে পেস্ট করে দিন।

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /><style> .ABT_float_ads_main_Wrap { width: 100%; max-width: 550px; max-height: 400px; position: fixed; z-index: 98765; background: rgb(59, 89, 152); left: 50%; top: 50%; transform: translate(-50%, -100%); box-sizing: border-box; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); border-radius: 10px; text-align: center; box-shadow: 0px 0px 3px 1px black; display: none; } .ABT_float_ads_close { margin: 0 auto; text-align: center; padding: 30px 20px 30px; position: absolute; top: -45px; right: -30px; z-index: 9999999; } .ABT_float_ads_close #ABT_close_button { font-size: 25px; color: #fff; display: inline-block; background: rgb(250, 155, 57); padding: 5px; } #ABT_close_button { cursor: pointer; } #ABT_credits { font-size: 25px; color: #fff; position: absolute; bottom: 2px; right: 5px; display: inline-block; text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); text-decoration: none!important; } .ABT_formWrap { background: rgb(250, 155, 57); padding: 10px; margin: 0px; width: 100%; min-width: 350px; overflow: hidden; box-sizing: border-box; border-radius: 10px; } .ABT_Heading, .ABT_Heading2 { color: #fff; font-size: 28px; font-weight: bold; text-shadow: 0px 0px 3px black; font-family: 'oswald', sans-serif; text-align: center; display: block; padding: 5px 0px; margin: 10px 0px 0px 0px; } .ABT_Heading2 { color: #fff; font-size: 18px; margin-bottom: 20px; font-style: italic; font-weight: 400; margin-top: 5px; } .ABT_Heading2 .fa-rss { color: rgb(250, 155, 57); } .ABT_Heading .fa-heart { color: rgb(227, 27, 35); } .ABT_float_ads_main_Wrap .fa-long-arrow-down { font-size: 40px; z-index: 98567; position: absolute; display: inline-block; padding: 10px; top: 80px; left: 45%; color: white; text-shadow: 0px 0px 5px black; } .ABT_formWrap .ABT_input_group { width: 100%; box-sizing: border-box; position: relative; margin: 0 auto; margin-top: 20px; border: 1px solid rgb(59, 89, 152); border-radius: 4px; } .ABT_input_group:before { color: #fff; content: "\f003"; font-family: FontAwesome; position: absolute; text-align: center; padding: 10px 12px; width: 50px; height: 100%; box-sizing: border-box; background: rgb(59, 89, 152); border: 1px solid rgb(59, 89, 152); text-shadow: 0px 0px 3px black; } .ABT_formWrap .ABT_Email { box-sizing: border-box; width: 100%; padding: 10px 0px 10px 60px; height: 100%; margin: 0px; border: none; border-radius: 4px; border: 1px solid rgb(59, 89, 152); } .ABT_formWrap .button { width: 100%; display: block; padding: 10px; box-sizing: border-box; position: relative; margin: 10px auto; margin-bottom: 20px; border-radius: 4px; background: rgb(59, 89, 152); font-size: 18px; border: none!important; cursor: pointer; text-shadow: 0px 0px 3px black; color: #fff; } .ABT_Widget_Container:before { content: ""; position: absolute; border-right: 15px solid transparent; border-left: 15px solid transparent; border-top: 15px solid rgb(59, 89, 152); border-bottom: 15px solid transparent; left: 50%; transform: translate(-50%); top: -1px; z-index: 55; } .ABT_Widget_Container{ position: relative } .ABT_formWrap, .ABT_innerForm, .ABT_Widget_Container { width: 100%; } .pulse { -webkit-animation: pulse .8s linear infinite; -moz-animation: pulse .8s linear infinite; -ms-animation: pulse .8s linear infinite; animation: pulse .8s linear infinite } .ABT_float_ads_close:before { content: ""; position: absolute; border-right: 9px solid #955f28; border-left: 5px solid transparent; border-top: 9px solid transparent; border-bottom: 5px solid #955f28; left: 6px; } @keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); transform: scale(1) } 50% { -moz-transform: scale(0.8); transform: scale(0.8) } 100% { -moz-transform: scale(1); transform: scale(1) } } @-webkit-keyframes &quot; pulse&quot; { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @-ms-keyframes &quot; pulse&quot; { 0% { -ms-transform: scale(1); transform: scale(1) } 50% { -ms-transform: scale(0.8); transform: scale(0.8) } 100% { -ms-transform: scale(1); transform: scale(1) } } @media (max-width: 650px){ #ABT_float_ads_main_Wrap{ display: none!important; } }</style>
    <div class='ABT_float_ads_main_Wrap' id='ABT_float_ads_main_Wrap'>        <span class="ABT_Heading"><i class="pulse fa fa-heart fa-lg" aria-hidden="true"></i> Loved Our Blog Posts? </span>        <span class="ABT_Heading2"><i class="fa fa-rss" aria-hidden="true"></i> Subscribe To Get Updates Directly To Your Inbox</span>        <div class='ABT_float_ads_close'>            <span id='ABT_close_button' style='float: right'>           <i id='ABT_Close_Button' class="fa fa-times" aria-hidden="true" title='close the Advertisment'></i>       </span>        </div>        <div class='ABT_Widget_Container'>            <div class="ABT_formWrap">               <form class="ABT_innerForm" action='http://feedburner.google.com/fb/a/mailverify?uri=RIJONISTIC' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=RIJONISTIC&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>                    <div class='ABT_input_group'>                        <input class='ABT_Email' alt="Enter your email address:" placeholder="Enter your email address:" type="email" name="email" />                    </div>                    <input type="hidden" value="AllBloggerTricks" name="uri" />                    <input type="hidden" name="loc" value="en_US" />                    <input class="button" type="submit" value="Subscribe" />                </form>            </div>        </div>        <span id='ABT_credits' style='float: right; font-size: 12px;  text-shadow: 0px 0px 3px black;'><a style='text-decoration: none!important; color: #fff;' href="http://www.allbloggertricks.com/2017/09/how-to-add-popup-email-subscription-form.html">Get This Widget</a></span>        <div style='clear:right'></div>    </div><script type="text/javascript"> window.onload = function() { if(sessionStorage.getItem('closed')){ document.getElementById("ABT_float_ads_main_Wrap").style.display = 'none'; }else{ var ABT_closeButton = document.getElementById('ABT_close_button'); var ABT_float_ads_main_Wrap = document.getElementById("ABT_float_ads_main_Wrap"); myVar = setTimeout(function() { ABT_float_ads_main_Wrap.style.display = 'block' }, 3000); ABT_closeButton.onclick = function() { if(!sessionStorage.getItem('closed')){ sessionStorage.setItem('closed', 'true'); } document.getElementById("ABT_float_ads_main_Wrap").style.display = 'none'; } } }</script>

খুবই সহজ ছিলো, তাই না?? এখন "Save theme" এ ক্লিক করুন এবং আপনার ব্লগে ঢুকে রিফ্রেশ করুনপেজ সম্পূর্ণ লোড হওয়ার পরে আপনার পপ আপ টি দেখতে পাবেন

কনফিগারেশন:
·  লাল রঙের টেক্সটের জায়গায় আপনার ব্লগের ফিডবার্নার আইডিটি দিন। তা না হলে ভিজিটর রা আপনার ব্লগ সাবস্ক্রাইব করতে পারবেনা।

আশা করি আপনি সফলভাবে আপনার ব্লগে উইজেটটি যুক্ত করতে সক্ষম হয়েছেনযদি কোনো সমস্যা হয় তাহলে অবশ্যই কমেন্ট বক্সে জানাবেনআমি চেষ্টা করবো আপনার সমস্যার সমাধান করারআজ তাহলে এই পর্যন্তই। নিয়মিত টেক আপডেট পেতে আমার ব্লগটির সাথেই থাকুন।


Post a Comment

Write your opinion

Previous Post Next Post