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

Css3 এর সমন্বয়ে তৈরি Email Subscription Form উইজেট। এটাকে মনেরমত করে কাষ্টমাইজ করতে পারবেন।

আমরা ইতিপূর্বে কয়েকটি আকর্ষণীয় Email Subscription Form উইজেট আপনাদের সাথে শেয়ার করেছি। এবারও আপনাদের সাথে আরেকটি Email Subscription Form উইজেট শেয়ার করব। আসলে প্রত্যেক ব্লগেই Email Subscription Form থাকা একান্ত প্রয়োজন। কারণ এটি আপনার ব্লগের Subscriber বাড়িয়ে নিতে সাহায্য করবে। যে কোন ব্লগের Subscriber যখন বাড়তে থাকবে তখন ভিজিটরও বাড়তে থাকবে।
ব্লগার ব্লগে যুক্ত করুন Email Subscription উইজেট (V-2)

উপরের চিত্রে 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="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" 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 একাউন্ট না থাকে তাহলে এখান থেকে তৈরী করে নিতে পারেন।

COMMENTS

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

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

    ReplyDelete
  3. ভাই সোশ্যাল আইকন ব্লাং দেখাচ্ছে

    ReplyDelete
    Replies
    1. আপনার ব্লগের লিংক শেয়ার করুন। বিস্তারিত দেখে জানাব। কারণ ডেমোতে এখনো পরিষ্কার দেখা যাচ্ছে। ধন্যবাদ...

      Delete

Name

Adsense,16,Affiliate,1,Android Tricks,1,Blog Design,35,Blogger Theme,9,Blogger Widgets,25,Create Blog,3,Earnings,19,Mim,5,Pro News,8,Responsive,5,SEO,55,Social Media,2,Tech,1,WordPress,3,YouTube,3,
ltr
item
ব্লগার বাংলাদেশ: ব্লগার ব্লগে যুক্ত করুন Email Subscription উইজেট (V-2)
ব্লগার ব্লগে যুক্ত করুন Email Subscription উইজেট (V-2)
Css3 এর সমন্বয়ে তৈরি Email Subscription Form উইজেট। এটাকে মনেরমত করে কাষ্টমাইজ করতে পারবেন।
https://3.bp.blogspot.com/-ioJTzfrGNFc/XMiFZbBw0GI/AAAAAAAAAgw/OQKQAHGUg4ApE_YEAG83B9sQQK2udtdZwCLcBGAs/s400/Blogger-Email-Subscription-Form.png
https://3.bp.blogspot.com/-ioJTzfrGNFc/XMiFZbBw0GI/AAAAAAAAAgw/OQKQAHGUg4ApE_YEAG83B9sQQK2udtdZwCLcBGAs/s72-c/Blogger-Email-Subscription-Form.png
ব্লগার বাংলাদেশ
https://www.bloggerbangladesh.com/2015/12/css3-email-subscription-form-widget.html
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/2015/12/css3-email-subscription-form-widget.html
true
1297988252866731047
UTF-8
Loaded All Posts Not found any posts VIEW ALL বিস্তারিত পড়ুন Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy