Dec 15, 2015

ব্লগার ব্লগে যুক্ত করুন Email Subscription উইজেট (V-2)

আমরা ইতিপূর্বে কয়েকটি আকর্ষণীয় Email Subscription Form উইজেট আপনাদের সাথে শেয়ার করেছি। এবারও আপনাদের সাথে আরেকটি Email Subscription Form উইজেট শেয়ার করব। আসলে প্রত্যেক ব্লগেই Email Subscription Form থাকা একান্ত প্রয়োজন। কারণ এটি আপনার ব্লগের Subscriber বাড়িয়ে নিতে সাহায্য করবে। যে কোন ব্লগের Subscriber যখন বাড়তে থাকবে তখন ভিজিটরও বাড়তে থাকবে।
ব্লগার ব্লগে যুক্ত করুন Email Subscription Form উইজেট
উপরের চিত্রে Email Subscription Form উইজেট এর ডেমো দেখতে পাচ্ছেন। এটি সম্পূর্ণ Css3 এর সমন্বয়ে তৈরি করা হয়েছে। আপনি ইচ্ছে করলে এটাকে আপনার মনেরমত করে কাষ্টমাইজ করতে পারবেন। তাছাড়া বাটনগুলি কিছু অতিরিক্ত 3D Css3 ইফেক্ট দেয়া হয়েছে। আশাকরি আপনার কাছে উইজেটটি ভাল লাগবে। লাইভ দেখুন- Live Demo
সকল পোষ্ট দেখুন

কিভাবে যুক্ত করবেনঃ

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
  • এখন ডান পাশের Layout হতে Add Gadget এ ক্লিক করুন। নিচের চিত্রে দেখুন -
ব্লগার ব্লগে যুক্ত করুন Email Subscription Form উইজেট
  • তারপর HTML/JavaScript এ ক্লিক করুন।
  • এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।
<style type="text/css">
#pro-subscribe {background:#576269; 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="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=prozokti', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
   <input type="text" name="email" placeholder="আপনার ই-মেইল এড্রেস" />
   <input type="hidden" value="prozokti" name="uri"/>
   <input type="hidden" name="loc" value="en_US"/>
   <input value="সাবমিট করুন" class="button" type="submit"/>
  </form>
 </div>
</div>
  • সবশেষে Gadget টি Save করুন।

পরিবর্তনঃ

  • উপরের লাল কালারের # এর জায়গার সোসিয়াল মিডিয়াগুলির এড্রেস দেন। 
  • নীল কালারের Write Title এর জায়গায় সোসিয়াল মিডিয়ার টাইটেল লিখুন।
  • পিংক কালারের prozokti এর স্থলে আপনার Feedburner একাউন্ট এর নাম দেন।
  • আপনার যদি Feedburner একাউন্ট না থাকে তাহলে এখান থেকে তৈরী করে নিতে পারেন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

4 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. এই জিনিস টার খুব দরকার ছিল। এটা শেয়ার করার জন্য ধন্যবাদ।

    ReplyDelete
  2. ভাল লাগল পোস্টটি

    ReplyDelete

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: