আপনার ব্লগস্পট সাইটে যুক্ত করুন Stastic Follow by email pop out উইগেট হুবহু ওয়ার্ডপ্রেস ডট কম সাইটের মত!

আজকের টিউনে আপনাদেরকে ব্লগারের একটি উইগেট বিষয়ে আলোচনা করব যাহা পোষ্টের শিরোনামে বলেছি।

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

কিভাবে আপনার ব্লগে কাজটি করবেন?

ব্লগে এটি যুক্ত করতে গেলে এর প্রথম শর্ত হল আপনার ব্লগার টেমপ্লেটে কোডিং লাইনে জেকুয়েরি কোড সংযুক্ত থাকতে হবে। যদি পূর্ব হতেই যুক্ত থাকে তাহলে নতুন করে সংযোজন না করলেও হবে। যদি সংযোজন করার প্রয়োজন হয় তাহলে আপনার ব্লগের টেমপ্লেট এডিটর অপশনে চলে যান । সার্চ করে </head> ট্যাগের নিচে নিম্নের কোডটুকু যুক্ত করুন।

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

কিভাবে উইগেট ইনস্টল করবেন?

১। ব্লগ লগইন করে layout অপশনে যান
২। একটি widget নিয়ে সেখানে “html/javascript” widget হিসাবে নিচের কোডটুকু যোগ করে সেইভ করুন।
অথবা, টেমপ্লেট এডিটরে </head> ট্যাগ অপশনের পূর্বে নিচের কোড যোগ করলেই হবে।

<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/AVvXsEgU4yaPnYSKLUPIIxjSCyuha1rOvOCstt4qgFqXJIa-GhlGMKrnfmjY__BY3sOM5dx7sQvxxMw_v7KcIBC3lhd51LdYL8XjQCcJGbBGwXm1bP5oHCzmQzBx38Ho2Z60GzwBiD83jF9c_g5w/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 "Tutorial Gift.Com"</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/TutorialGift','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/TutorialGift" 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://theoriginalbloggertricks.blogspot.in/" target="_blank">Delivered by FeedBurner</a>
</p>
</div>
</div>

সর্বশেষ

আশা করি টিউটোরিয়াল অনুযায়ী উক্ত কাজটি করতে পারবেন। তবে উক্ত কোড প্রয়োগের পর কিছু অপশন/শব্দবলী নিম্নরুপ পরিবর্তন করতে হবে-

ক। আপনার ব্লগ উইগেট অপশনে গিয়ে সার্চ করুন > সেখানে আপনার ব্লগের টাইটেল পরিবর্তন করবেন “Tutorialgift.Com“ এর পরিবর্তে অন্য আপনার পচ্ছন্দ মত লিখুন।

খ। গুগলের ফিড বার্নার ঠিকানা "TutorialGift" এর পরিবর্তে আপনার ব্লগের ফিডবার্নার ইউজার নাম দিন। সবশেষে সেইভ করে কাজটি পরীক্ষা করুন।

বিঃ দ্রঃ আপনার ফিড বার্নার ঠিকানা না থাকলে তা কাজ করবে না। যদি গুগলের মেইল থাকে তাহলে আপনি সহজেই ফিডবার্নার তৈরি করতে পারবেন এখানে

Friday, January 5, 2018