Floating twitter box ব্লগ এবং ওয়েবসাইটের জন্য খুবই জনপ্রিয় একটি Widget. এটি আপনার ব্লগে ভিজিটর বাড়ীয়ে নিতে সাহায্য করবে। তাছাড়া এটি ব্যবহার করার ফলে আপনার ব্লগের সুন্দর্যও বৃদ্ধি পাবে। এই ধরনের উইজেট বড় বড় ব্যবসায়িক ওয়েবসাইট থেকে শুরু করে বিভিন্ন পার্সোনাল ব্লগেও ব্যবহার করতে দেখা যায়।
ব্লগে যুক্ত করার পদ্ধতীঃ
- প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
- তারপর ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
- এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন।
- তারপর HTML/JavaScript এ ক্লিক করুন।
- এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।
<style type=”text/css”>
img,a {border:0;}
#twitter-floating {visibility:visible;}
#pro-twitter {
width:246px;
height:353px;
overflow:hidden;
margin:1px 0 0 0px;
}#twitter-twit {
z-index:10004;
background-color:#6CC5FF;
border:2px solid #6CC5FF;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width:246px;
height:353px;
position:fixed;
right:-250px;
}
#twitter-twit-img {
position:absolute;
top:-2px;
left:-35px;
border:0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
</style><script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script type=’text/javascript’>
jQuery(document).ready(function(){ jQuery(“#twitter-twit”).hover(function(){
jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){
jQuery(“#twitter-twit”).stop(true,false).animate({right: -250}, 500); });});
</script><div id=”twitter-floating”>
<div id=”twitter-twit” style=”top: 20%;”>
<div id=”pro-twitter”>
<img id=”twitter-twit-img” src=”https://2.bp.blogspot.com/-V1p3sb5awqU/VZy1U6_ekkI/AAAAAAAAE18/cWiDmwz8TJc/s1600/twitter.png” />
<a class=”twitter-timeline” data-widget-id=”498715853966159872″ href=”https://twitter.com/prozokthi”>Tweets by @prozokti</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^https:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
</div>
</div>
</div>
- সবশেষে Gadget টি Save করুন। That’s all.
পরিবর্তনঃ
- উপরের বক্সের নীল রংয়ের মাধ্যমে মার্ক করা অংশ হচ্ছে আমার Twitter Account এর Widget. এখানে আপনার Twitter Account এর Widget টি দিতে হবে। আপনার যদি Twitter Widget না থাকে তাহলে এখান থেকে তৈরী করে নিতে পারেন।
- উপরের লাল অংশ হতে বক্সটির Height এবং Width পরিবর্তন করে নিতে পারবেন।
