এখনি আপনার ব্লগস্পট সাইটে যুক্ত করুন হুবহু ওয়ার্ডপ্রেস সাইটের মত Stastic follow by email pop out উইগেট! দারুন দেখাবে

আসসালামু আলাইকুম। সুপ্রিয় মডার্ন টেকনোলজি সাইটের সবাইকে সালাম ও পবিত্র রমজানুল মোবারকের শুভেচ্ছা। আশা করি সবাই এক প্রকার কুশলেই আছেন। আজকের টিউনে আপনাদেরকে ব্লগারের একটি উইগেট বিষয়ে আলোচনা করব যাহা টিউনের শিরোনামে বলেছি।
Stastic Follow উইগেট কি?
মূলত Stastic Follow by email pop out উইগেট হল গুগলের ফিড বার্নার পদ্ধতির একটি প্রতিচ্ছবি। যেখানে আপনার ব্লগের ভিজিটরেরা তাদের ইমেইল দ্বারা সাবমিট করলে আপনার ব্লগে ভিজিট না করেও তাদের ইমেইলে আপনার ব্লগের টিউনের আপডেট জানতে পারবে। অনেকেই এই ফিড বার্নার উইগেটটি  ব্লগে ব্যবহার করে থাকে। তবে এখানে যে উইগেট ব্যবহার করা হয় তা মূলত ব্লগস্পটের স্বতন্ত্র পদ্ধতি। অনেকের ইচ্ছা ইশ! ফ্রি সাইট ওয়ার্ডপ্রেস ডটকমের মত যদি ফলো আউট ইন্টারফেস সুবিধা থাকত তাহলে ব্লগস্পটের লুক ইন্টারফেস আরো সুন্দর লাগত।  হ্যা যারা ওয়ার্ডপ্রেস ডট কম সাইট দ্বারা ব্লগ চালাচ্ছে তারা নিশ্চয় লক্ষ্য করেছেন একদম ফুটার অপশনের ডান পাশে Stastic Follow উইগেটটটি পরিলক্ষিত হয়। নিচের চিত্র দেখলে বুঝতে সুবিধা হবে-

চিত্র ১

 

চিত্র ২

 




কিভাবে উইগেট ইনস্টল করবেন? আসুন এবার উইগেট টি কিভাবে বসাতে হয় দেখি

১ম পদ্ধতি

আপনার ব্লগ এর Layout এ জান । এর পর add a Gadget এ ক্লিক করুন।
এবার নিচের পিক এর মত HTML/JavaScript  এ ক্লিক করুন।

তার পর নিচের কোডটি কপি করে পেস্ট করুন।



<style type="text/css">
/*<![CDATA[*/
#TOBTfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
.followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
.TOBTFb {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
.TOBTFb span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkmxnAPuGeQLw4VrMQS5SLFMj5IiSDxVXI1JCEhD0oN9ZSfq1LEC_hBeFJ5KtMBG8KFJ4Ocr2EdSv3iJgo31Ox_rpjMTRSmzpQxomFWugZb-VXXcUFeAAiqY743TETzbIxJNDTKZoCm05N/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.TOBTFb:hover,.followActive {color: #fff !important;}
.TOBTFb:hover span,.followActive span {background-position: 0 -37px !important;}
.followactive {background-color: #333;}
.TOBTForm {padding: 15px;}
.TOBTForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.TOBTForm p {margin: 0 0 10px;}
.TOBTForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
.TOBTForm form {text-align: center;}
.TOBTForm .emailInput:focus {color: #000;border-color: #000;}
.TOBTForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
.emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
.emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
.TOBTFF {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
.TOBTFF a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
.TOBTFF a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#TOBTfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".TOBTFb").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="TOBTfollowSubscribe" style="display:none;">
<div class="TOBTForm">
<a class="TOBTFb" href="#" title="Follow"><span>Follow</span></a>
<h3>Follow "মডার্ন টেকনোলজি"</h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= blogspot/Tutorial মডার্ন টেকনোলজি','popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
<input type="hidden" value="blogspot/Tutorialমডার্ন টেকনোলজি" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe Now" class="emailSubmit"/>
</form>
<p class="TOBTFF">
<a href="http://technologyrbd.blogspot.com/" target="_blank">Delivered by মডার্ন টেকনোলজি</a>
</p>
</div>
</div>


এবার লাল চিনহিত মডার্ন টেকনোলজি লিখাটি পরিবর্তন করে দিতে পারেন। এখানে আপনার মন মত নাম দিন. এবং সেভ করুন।

অথবা  ২য় পদ্ধতি

উপরের  কোড টুকু কপি করে আপনার ব্লগার এর theme থেকে Edit HTML এ জান।

 এর পর Ctrl+R চাপুন এবং </head> টি কপি করে নিচের চিত্রের মত পেস্ট করুন এবং এন্টার চাপুন।

এবার আপনার ব্লগের কোড গুলর দিকে লক্ষ করুন, দেখুন একটি </head> ট্যাগ দেখা যাচ্ছে
এবার উপরে কোড গুলি ( যা কপি করে রেখেছিলেন) </head> এর পুরবে কোড গুলি পেস্ট করে সেভ করুন।
উপরে দুটি হতে যেকোনো একটি করুন মনে রাখবেন দুটি ই যেন করে ফেলিয়েন না। এবার আপনার সাইটে ঢুকে লক্ষ করুন। চমৎকার একটি  follow by email pop out যুক্ত হয়েগেছে।।

তবে ১ম পদ্ধতি ব্যাবহার করাটাই ভাল।


কোডিং লাইনে জেকুয়েরি কোড সংযুক্ত

যদি কাজ না করে তাহলে বুঝতে হবে  আপনার ব্লগার টেমপ্লেটে কোডিং লাইনে জেকুয়েরি কোড সংযুক্ত নেই। তাই নিচের কাজ টুকুও করুন। ( জেকুয়েরি কোড সংযুক্ত করুন )

এজন্ন আপনাকে ১ম পদ্ধতি ব্যাবহারের পর নিচের কাজ টুকু করুন ইন্সেয়াল্লাহ ১০০% কাজ করবে।

তাহলে আবার  আপনার ব্লগার এর theme থেকে Edit HTML এ যান।।  এরপর আবার আগের মত  Ctrl+R চাপুন এবং </head> টি কপি করে নিচের চিত্রের মত পেস্ট করুন এবং এন্টার চাপুন।








নিচের মত  </head> ট্যাগ পাবেন









এই </head> ট্যাগের নিচে নিম্নের কোডটুকু যুক্ত করুন এবং সেভ করুন ।

কোড এই


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>



দেখুন আপনার ব্লগে যুক্ত হয়ে গেছে।
কোস্ট করে পরার জন্য ধন্যবাদ। আল্লাহ হাফেজ।