ব্লগারের জন্য আরেকটি Email Subscription Form উইজেট

আমরা ইতিপূর্বে একটি আকর্ষণীয় Email Subscription Form উইজেট আপনাদের সাথে শেয়ার করেছি। এখান থেকে ইচ্ছে করলে পোষ্টটি দেখে আসতে পারেন। আমি গত পোষ্টেও এ কথাগুলি বলেছিলাম যে, আপনি এত কষ্টকরে স্বাদের একটি ব্লগ তৈরী করলেন, তারপর যদি ব্লগে কোন পাঠক (Reader) না থাকে তাহলে এর কোন মানেই হয় না।

আপনার ব্লগের সার্থকতা তখনই পূর্ণ হবে, যখন ব্লগে প্রচুর পরিমানে পাঠক (Reader) এবং Subscribers পাবেন। তবে Subscriber পাওয়ার জন্য পাঠকদের Subscribe অপশন দিতে হবে। তা না হলে পাঠকরা ব্লগ পড়ে চলে যাবে কিন্তু Subscribe করতে পারবে না। আর এই Email Subscription হচ্ছে সাবস্ক্রাইবার বাড়ীয়ে নেওয়ার সহজ উপায়।

আমরা আজ যে, Email Subscription Form শেয়ার করবো সেটি অত্যান্ত আকর্ষণীয় একটি Form. এটিতে Email Subscription অপশন এর পাশাপাশি সোসিয়াল মিডিয়া বাটন সংযুক্ত করে দেয়া আছে, যা আপনার সোসিয়াল মিডিয়া গুলির সাব্সক্রাইবারও বাড়ীয়ে নিতে সাহায্য করবে। লাইভ ডেমো আমার ব্লগের সাইডবারেই দেখতে পাচ্ছেন।

সকল পোষ্ট দেখুন

১. ব্লগার ব্লগে যুক্ত করুন Email Subscription Form উইজেট-১

২. ব্লগার ব্লগে যুক্ত করুন Email Subscription Form উইজেট-২

৩. ব্লগার ব্লগে যুক্ত করুন Email Subscription Form উইজেট-৩

৪. ব্লগার ব্লগে যুক্ত করুন Email Subscription Form উইজেট-৪

কিভাবে ব্লগে যুক্ত করবেন?

• প্রথমে আপনার ব্লগে লগইন করুন।
• ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
• এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন। নিচের চিত্রে দেখুন -

• তারপর HTML/JavaScript এ ক্লিক করুন।
• এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।

<style type="text/css">
#pro-subscribe{height:222px;background:#FFF;color:#0c6e0c;font-family:Georgia,"Times New Roman",Times,serif;padding:3px;border:3px solid #734E76;border-radius:5px}
.pro-subscribe-rashid{color:#734E76;font-weight:500;text-align:center;padding:2px 0 10px 0}
.pro-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKabnF_9eV2Hd_rfRnJVK_RePF2cXXtWAI1a6Bub_Q-Lx0bL1nI_gnHpMk2-AySY2QjQEzsy7ZP75JVf6zAHCTzTDSEEVbivOMx9NOqDEx0K5U0U4nREWE_rwGwd36ifmwe4xXnLyI3r8/s1600/Mail.png) no-repeat 10px 11px;border:1px solid #dcdcdc;border-radius:4px;color:#444;margin:0 7px 15px;padding:10px 40px;width:67%}
#pro-subscribe-submit{height:40px;width:150px;background:#734E76;color:#FFF;font-weight:bold;text-align:center;margin-left:68px;border:1px;border-radius:5px;cursor:pointer}
#pro-subscribe-submit:hover{background-color:#000000}
#pro-social-icons{height:50px;width:100%;margin-left:20px;clear:both;z-index:2;position:relative}
.pro-social-media-icons{display:table}
.pro-social-media-icons ul{text-align:center;padding:5px 5px 0 0;list-style-image:none;list-style-position:outside;list-style-type:none}.pro-social-media-icons ul{margin-bottom:0;padding:0}
.pro-social-media-icons li.media_icon{margin-left:14px;padding-left:0!important;background:none!important;display:inline;float:left}
.pro-social-media-icons li:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(-360deg);-moz-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}</style>

<div id="pro-subscribe">
<div class="pro-subscribe-rashid">Write About Social Media</div>
<div class="pro-social-media-icons" id="pro-social-icons">
  <ul>
     <li class="media_icon"><a href="#" target="_blank" title="Facebook"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb5n1AQPhGd5H27blzJzTF7p1btXABJRJkPJzPpVNyMoMW07A5gTwRe1rXpBqZWordLSGQV5jKqQWQ8Dr9g-qWHhXp-4Z4DitEwA9V27oy2y2D0c23CZDeMoBGG7jcaHVAvBJkWlIZTQU/s1600/Facebook.png" /></a></li>
     <li class="media_icon"><a href="#" target="_blank" title="Twitter"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5L-9agZj4GfIBF3mPvYMC4Lpo9GQLQI8bZrg1OrCqe7ltvkPm3HHW-gRo14KcxTgtoOtnf1Dn8MCevmjklYa7E-voHtN3ZEBNzFe24MU2jVCRa-B1Mlge-LGcmNUZv9OcvesRlt_Adrs/s1600/Twitter.png" /></a></li>
     <li class="media_icon"><a href="#" target="_blank" title="Google+"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOWOdHzwTxdeXNdWPC1cLBEzMc2zHX6YreylSYSwVEiK7dp8H6f0lsW3zqbMb0puYdQciU7WhTduhhA7wHAC68ibh-Jvvbor5t1RKKokF_tdt1piYWXB-VlvUNsHjgAll1FVbOnNropzI/s1600/Google.png" /></a></li>
     <li class="media_icon"><a href="#" target="_blank" title="Youtube"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8nhu_nhLTtbkfqQYsBGSGHX8P3Qn84rXtlw4i1pNO_thgqiZyimfa1Dy-eQRQN9ei4-UpFDzZEx2Ud1ElQjYJRjsNBeLNBim4OD2kzMNZsxgTrtoskRH1ghyphenhyphenkni4bcaxV9oILXhc6RAM/s1600/Youtube.png" /></a></li>
     <li class="media_icon"><a href="#" target="_blank" title="Rss"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6I36k8dMwc3VpgNOnUAgQYYh1KUM2LpBaXCMrctWkJ8dLfC1WxyKCEiQMKQG2H7W7qZ7PMhRCy78RQcuK1HLlYKW_LHsQjuBCIq60PL7lC0Ny6SE6BH_JtJ7Dz31rkRt6C-Qg1wIZ00/s1600/Rss.png" /></a></li>
    </ul>
</div>
<div class="pro-subscribe-rashid">SubScribe Me<br/>Email Update</div>
 <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  type="text" class="pro-email-field" name="email" autocomplete="off" placeholder="Your email adress"/><br />
  <input type="hidden" value="prozokti" name="uri"/>
  <input type="hidden" name="loc" value="en_US"/>
  <input type="submit" value="Submit" id="pro-subscribe-submit"/>
 </form>
</div>

• সবশেষে Gadget টি Save করুন।

কাষ্টোমাইজেশনঃ

• সোসিয়াল মিডিয়া আইকনগুলি ঠিক মাপমত না বসলে নীল কালারের margin-left:20px পরিবর্তন করে দিতে পারেন।
• উপরের লাল কালারের # এর জায়গার সোসিয়াল মিডিয়াগুলির এড্রেস দেন।
• পিংক কালারের prozokti এর স্থলে আপনার Feedburner একাউন্ট এর নাম দেন।
• আপনার যদি Feedburner একাউন্ট না থাকে তাহলে এখান থেকে তৈরী করে নিতে পারেন।