ব্লগার ব্লগে যুক্ত করুন Email Subscription Form উইজেট
অনেক দিন পর ব্লগে লিখতে বসলাম। পরীক্ষার কারনে লিখতে বসেও কেন জানি মনোযোগ আসছিল না। ব্লগে না লিখার জন্য বারবার চেষ্টা করেও পরলাম না। শেষ পর্যন্ত লিখতে বাধ্য হলাম। আজ আপনাদের সাথে আরেকটি Email Subscription Form উইজেট শেয়ার করবো। এ রকম উইজেট ইতিপূর্বে আপনাদের সাথে দু’বার শেয়ার করেছি। তারপরও আজ ভিন্ন ডিজাইনের আরেকটি Email Subscription Form উইজেট শেয়ার করছি।
আপনি এত কষ্টকরে স্বাদের একটি ব্লগ তৈরী করলেন, তারপর যদি আপনার ব্লগের কোন পাঠক (Reader) না থাকে তাহলে এর কোন মানেই হয় না। আপনার ব্লগের সার্থকতা তখনই পূর্ণ হবে যখন আপনার ব্লগে প্রচুর পরিমানে পাঠক (Reader) এবং Subscribers পাবেন।
তবে Subscriber পাওয়ার জন্য আপনি পাঠকদের Subscribe অপশন দিতে হবে। তা না হলে আপনার পাঠকরা ব্লগ পড়ে চলে যাবে কিন্তু Subscribe করতে পারবে না। আর এই Email Subscription হচ্ছে সাবস্ক্রাইবার বাড়ীয়ে নেওয়ার সবচেয়ে সহজ উপায়। ডেমো দেখুন - Live Demo
সকল পোষ্ট দেখুন
কিভাবে ব্লগে যুক্ত করবেন?
- প্রথমে আপনার ব্লগে লগইন করুন।
- ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
- এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন। নিচের চিত্রে দেখুন -
- তারপর HTML/JavaScript এ ক্লিক করুন।
- এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।
<style type="text/css">
.pro-subs {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRBFsGRcLRMamF6_bJMtg-WDh_yhQ1iWbnf2k_J6lWl-UhV-KgqsReWulNJ8F4i85zTS3g4vKyWqKBKNmYFm92D2ahrKfD5PVdVIRVpebNJPv6Mu1nWdYlGQkcWRan-rMwNkCzdTMnfzN/s1600/bg.png); position:relative; left:0px; top:0px; text-align:center; z-index:1}
.pro-subs h4 {text-align:center; font-family:'Verdana', sans-serif; font-size:30px; font-weight:bold; color: #fff; margin:0 auto; padding:20px 0 0 0; line-height:1}
.pro-subs p {text-align:center; font-family:'Verdana', sans-serif; font-size:12px; font-weight:normal; color:rgba(255, 255, 255, 0.502); margin:0 auto; padding:5px 5px 0px 5px; line-height:2; word-spacing:0px}
.email-input {background:rgba(255, 255, 255); opacity:0.2; position:relative; margin:35px 0 15px 0; width:150px; height:30px; padding:0 10px; color:rgba(255, 255, 255); border:none; border-radius:15px; z-index:3}
.email-input:focus {background:#fff; outline:none; border:1px solid #ee6e45; opacity:0.3; -webkit-box-shadow:0px 20px 50px 0px rgba(0, 0, 0, 0.078); -moz-box-shadow:0px 20px 50px 0px rgba(0, 0, 0, 0.078); box-shadow:0px 20px 50px 0px rgba(0, 0, 0, 0.078)}
.button {background:rgb(255, 255, 255, 0.015); color:rgb(236, 94, 48); margin-bottom:20px; cursor:pointer; font-family:'Verdana', sans-serif; position:relative; border:none; width:170px; height:30px; z-index:2; border-radius:15px; -webkit-box-shadow:0px 20px 50px 0px rgba(0, 0, 0, 0.078); -moz-box-shadow:0px 20px 50px 0px rgba(0, 0, 0, 0.078); box-shadow:0px 20px 50px 0px rgba(0, 0, 0, 0.078)}
.button:hover {background:#000}
</style>
<div class="pro-subs">
<h4>SUBSCRIBE</h4>
<p class="pro-subs">Get the top news stories delivered to your Inbox</p>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=prozokti', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email-input" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text"/>
<input value="prozokti" name="uri" type="hidden" />
<input name='loc' type='hidden' value='en_US'/>
<input class='button' title='Submit' type='submit' value='Submit'/>
</form>
</div>
- সবশেষে Gadget টি Save করুন।
পরিবর্তনঃ
- লাল কালারের prozokti এর স্থলে আপনার Feedburner একাউন্ট এর নাম দেন।
- আপনার যদি Feedburner একাউন্ট না থাকে তাহলে এখান থেকে তৈরী করে নিতে পারেন।
Comments
Post a Comment