নিয়েনিন অসাধারন Floating Email Subscribe Box.

আসসালামু আলাইকুম। কেমন আছেন সবাই? আশা করি সকলেই ভালো আছেন!
আলহামদুলিল্লাহ্‌ আমিও ভালো আছি। আজ আমি আপনাদের জন্য নিয়ে আসলাম অসাধারন Floating Email Subscribe Box.

আশা করি সকলেরই পছন্দ হবে। সেই আশাই শেয়ার করা আর কি?

Email Subscribe Box কেন এড করবেনঃ

আপনার ব্লগে যখন কোনো ভিজিটর আসবে আর তার যদি আপনার লিখাগুলি ভালো বা কাজে লাগে তাহলে সে নিয়মিত আপনার সাইটে ভিজিট করার চেষ্টা করে। আর যদি আপনার সাইটে Email Subscribe Box এড করা থাকে তাহলে সে অবশ্যই আপনার ব্লগে Email Subscribe করে রাখবে, যাতে করে সে সকল পোষ্টগুলো পড়তে পারে।

তাই বলতে পারেন ব্লগে ভিজিটর দরে রাখার অন্যতম মাধ্যম হচ্ছে Email Subscribe Box.

নিয়েনিন অসাধারন Floating Email Subscribe Box.

কিভাবে এড করবেনঃ

প্রথমে ব্লগারে লগিং করেন।
লেআউট থেকে থিমে যান।
এবার ইডিট এইস টি এম এল এ ক্লিক করুন।
তারপর নিচের কোডগুলি /head ট্যাগের উপরে পেস্ট করুন।

<style type='text/css'>
/* IT Sayeem Floating Subscribe Box Gradient */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background: #FF5722;
background-image: linear-gradient(50deg,#ff0036,#6800ff);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .itsayeem-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type="email"]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type="email"]:hover{background:rgba(255,255,255,.3);color:#fff}
.subscribebar input[type="submit"]{cursor:pointer;background-color:#f9a93c;border:1px solid #f9a93c;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type="submit"]:hover,.subscribebar input[type="submit"]:active{background-color: #009688;
border: 1px solid #009688;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.subscribebar input[type="email"]::placeholder{color:#fff;opacity:1}
.subscribebar input[type="email"]:-ms-input-placeholder{color:#fff}
.subscribebar input[type="email"]::-ms-input-placeholder{color:#fff}
.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.25);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:rgba(255,255,255,.4)}
@media (max-width:767px){
.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
.subscribebar .closeme:hover{background:#e74c3c;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>

এখন আবার নিচের কোডগুলো /body ট্যাগের উপরে পেস্ট করুন।

<div class='subscribebar'>
<div class='container text-center'>
Get the latest article updates from this site via email for free!
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=itsayeem/RGCt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<div class='itsayeem-form-fields'>
<p>
<input name='email' onblur='if (this.value == "") {this.value = "Email address...";}' onfocus='if (this.value == "Email address...") {this.value = "";}' placeholder='Email address...' required='' type='email'/>
</p>
<p><input type='submit' value='Submit'/></p>
<input name='uri' type='hidden' value='itsayeem/RGCt'/>
<input name='loc' type='hidden' value='en_US'/>
</div>
</form>
</div>
<button class='closeme' title='Close this message'>✕</button>
</div>
<script type='text/javascript'>
//<![CDATA[
// Floating Subscribe Box
$(document).scroll(function(){$(this).scrollTop()>380?$(".subscribebar").slideDown('fast'):$(".subscribebar").slideUp('fast')});$(document).ready(function(c){$(".closeme").on("click",function(c){$(".subscribebar").fadeOut("slow",function(c){$(".subscribebar").remove()})})});
//]]>
</script>

আর যদি চান যে শুধু মাত্র পিছি ভার্সনে শো করাবেন তাহলে ২য় নাম্বার কোডের পরিবর্তে এই কোড </body >ট্যাগের উপরে পেস্ট করুন।

<div class='subscribebar'>
<div class='container text-center'>
Get the latest article updates from this site via email for free!
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=itsayeem/RGCt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<div class='itsayeem-form-fields'>
<p>
<input name='email' onblur='if (this.value == "") {this.value = "Email address...";}' onfocus='if (this.value == "Email address...") {this.value = "";}' placeholder='Email address...' required='' type='email'/>
</p>
<p><input type='submit' value='Submit'/></p>
<input name='uri' type='hidden' value='itsayeem/RGCt'/> <input name='loc' type='hidden' value='en_US'/>
</div>
</form>
</div>
<button class='closeme' title='Close this message'>✕</button>
</div>
<b:if cond='data:blog.isMobileRequest == "false"'>
<script type='text/javascript'>
//<![CDATA[
// Floating Subscribe Box
$(document).scroll(function(){$(this).scrollTop()>380?$(".subscribebar").slideDown('fast'):$(".subscribebar").slideUp('fast')});$(document).ready(function(c){$(".closeme").on("click",function(c){$(".subscribebar").fadeOut("slow",function(c){$(".subscribebar").remove()})})});
//]]>
</script>
</b:if>

পরিবর্তনঃ উপরের এই <input name='uri' type='hidden' value='itsayeem/RGCt'/> টিতে itsayeem এর পরিবর্তে আপনার Feedburner address দেন।
অবশেষে থিম সেইভ করুন।
আসসালামু আলাইকুম সবাই থাকুন এই কামনাই আজকের মতো এখাই বিদায় নিচ্ছি ।
খোদা হাফেজ!