আপনাদের সাথে আরেকটি Email Subscription Form উইজেট শেয়ার করব। আসলে প্রত্যেক ব্লগেই Email Subscription Form থাকা একান্ত প্রয়োজন। কারণ এটি আপনার ব্লগের Subscriber বাড়িয়ে নিতে সাহায্য করবে। যে কোন ব্লগের Subscriber যখন বাড়তে থাকবে তখন ভিজিটরও বাড়তে থাকবে।
উপরের চিত্রে Email Subscription Form উইজেট এর ডেমো দেখতে পাচ্ছেন। এটি সম্পূর্ণ Css3 এর সমন্বয়ে তৈরি করা হয়েছে। আপনি ইচ্ছে করলে এটাকে আপনার মনেরমত করে কাষ্টমাইজ করতে পারবেন। তাছাড়া বাটনগুলি কিছু অতিরিক্ত 3D Css3 ইফেক্ট দেয়া হয়েছে। আশাকরি আপনার কাছে উইজেটটি ভাল লাগবে।
কিভাবে যুক্ত করবেনঃ
প্রথমে আপনার ব্লগে লগইন করুন।
ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
এখন ডান পাশের Layout হতে Add Gadget এ ক্লিক করুন। নিচের চিত্রে দেখুন -
তারপর HTML/JavaScript এ ক্লিক করুন।
এবার এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।
<style type="text/css">
#pro-subscribe {background:#1B5E20; width:100%; padding:0 0 1px; font-family:inherit; display:block; margin:0; border:0; border-radius:5px}
.pro-subscribe-social-title {color:#FFF; font-weight:500; text-align:center; padding-top:15px; font-size:15px}
#pro-subscribe .social-profile {line-height:1.2em; display:table; float:none; margin:0px auto; text-align:center; min-width:157px; padding:5px 0px; border:0}
#pro-subscribe .social-profile a {background:#FFF; color:#000; margin:0 5px; text-align:center; float:left; display:table; padding:4px 5px; border-radius:50px; border:2px solid #FFF; width:15px; height:15px; line-height:0; font-size: 16px; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out}
#pro-subscribe .social-profile a:hover {color:#FFF; background-color:#FF5959; border-color:#FFF}
#pro-subscribe p {font-size:15px; color:#F9F9F9; text-shadow:0px -1px 0px #000; line-height:25px; padding:5px 10px 5px; text-align:center; width:80%; margin:5px auto; border:1px solid #292929; border-radius:0 50px}
#pro-subscribe .mail-field {padding:0; margin:0 auto; display:block}
#pro-subscribe .mail-field input {margin:15px auto; font-size:13px; color:#000; text-align:center; display:block; font-family:inherit; font-weight:normal; width:90%; height:38px; text-transform: uppercase; outline:none; border:1px solid #FFF; border-radius:2px; background:#FCFCFC; box-sizing:border-box}
#pro-subscribe .mail-field .button {background-color:#08a276; color:#FFF; font-family:Arial; font-size:18px; font-weight:normal; padding:6px 15px; text-decoration:none; -moz-box-shadow:inset 0px 39px 0px -21px #01AD7B; -webkit-box-shadow:inset 0px 39px 0px -21px #01AD7B; box-shadow:inset 0px 39px 0px -21px #01AD7B; border-radius:4px; text-shadow:0px 1px 0px #067050; border:1px solid #08a276; margin-top:15px; transition:all .3s ease-in-out; float:none; text-transform:uppercase; cursor:pointer}
#pro-subscribe .mail-field .button:hover {background-color:#03B47C; border:1px solid #03B47C}
#pro-subscribe .mail-field .button:active {position:relative; top:1px}
</style>
<div id="pro-subscribe">
<div class="pro-subscribe-social-title">ট্রিক২৪ প্রো এর সোসিয়াল মিডিয়া সমূহ</div>
<div class="social-profile">
<a href="#" target="_blank" title="Write Title"><i class="fa fa-facebook"></i></a>
<a href="#" target="_blank" title="Write Title"><i class="fa fa-twitter"></i></a>
<a href="#" target="_blank" title="Write Title"><i class="fa fa-google-plus"></i></a>
<a href="#" target="_blank" title="Write Title"><i class="fa fa-youtube-play"></i></a>
<a href="#" target="_blank" title="Write Title"><i class="fa fa-pinterest"></i></a>
<a href="#" target="_blank" title="Write Title"><i class="fa fa-rss"></i></a>
</div>
<p>সরাসরি ই-মেইলে আপডেট পোষ্ট পেতে চাইলে!</p>
<div class="mail-field">
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=trick24pro', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" placeholder="আপনার ই-মেইল এড্রেস" />
<input type="hidden" value="trick24pro" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="সাবমিট করুন" class="button" type="submit"/>
</form>
</div>
</div>
সবশেষে Gadget টি Save করুন।
পরিবর্তনঃ
উপরের লাল কালারের # এর জায়গার সোসিয়াল মিডিয়াগুলির এড্রেস দেন।
নীল কালারের Write Title এর জায়গায় সোসিয়াল মিডিয়ার টাইটেল লিখুন।
পিংক কালারের trick24pro এর স্থলে আপনার Feedburner একাউন্ট এর নাম দেন।
আপনার যদি Feedburner একাউন্ট না থাকে তাহলে এখান থেকে তৈরী করে নিতে পারেন।