বন্ধুরা স্বাগতম আপনাকে আমার আরও একটি নতুন টিউটোরিয়াল এ। Floating twitter box ব্লগ এবং ওয়েবসাইটের জন্য খুবই জনপ্রিয় একটি Widget. এটি আপনার ব্লগে ভিজিটর বাড়ীয়ে নিতে সাহায্য করবে। তাছাড়া এটি ব্যবহার করার ফলে আপনার ব্লগের সুন্দর্যও বৃদ্ধি পাবে। এই ধরনের উইজেট বড় বড় ব্যবসায়িক ওয়েবসাইট থেকে শুরু করে বিভিন্ন পার্সোনাল ব্লগেও ব্যবহার করতে দেখা যায়।

এই উইজেটটি Blogger এবং WordPress দুই ধরনের ব্লগেই ব্যবহার করতে পারবেন। এটি সাধারনত ব্লগের ডান পাশে হাইড করা অবস্থা থাকবে, কিন্তু যখন আপনার কম্পিউটার মাউস এটির উপরের ধরবেন, তখন সাথে সাথে স্লাডিং করে বেরিয়ে আসবে। কাজেই এটি যে কোন ভিজিটরের মনোযোগ আকর্ষণ করতে সক্ষম হবে।

ব্লগে যুক্ত করার পদ্ধতীঃ

প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
তারপর ব্লগার ড্যাশবোর্ড হতে 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><br />
<br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><br />
<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><br />
<br />
<div id="twitter-floating">
<div id="twitter-twit" style="top: 20%;">
<div id="pro-twitter">
<img id="twitter-twit-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pLIf2jSMyXKaf_1yHj2k2oNdVM-3Tx03Z4ZCGrjGJZlYkhvJ1SoBcQuifOaCwFzdfVnbkWoOOahvWIknLDsZBkgJcMAh2ZnBoHVGT0jwnaErrPL1LOiYrBz41HPFv3Jv1444i2OVnNS9/s1600/twitter.png" /><br />
<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><br />
</div>
</div>
</div>

সবশেষে Gadget টি Save করুন। That's all.

পরিবর্তনঃ
উপরের বক্সের নীল রংয়ের মাধ্যমে মার্ক করা অংশ হচ্ছে আমার Twitter Account এর Widget. এখানে আপনার Twitter Account এর Widget টি দিতে হবে। আপনার যদি Twitter Widget না থাকে তাহলে এখান থেকে তৈরী করে নিতে পারেন।
উপরের width:246px; এবং height:353px; এই অংশ হতে বক্সটির Height এবং Width পরিবর্তন করে নিতে পারবেন।

কাজটি খুবই সহজ। আপনারা কোনো প্রকার ঝামেলা ছাড়া ই কাজটি করতে পারবেন। তবুও কথাও বুঝতে কোনো সমস্যা হলে অবশ্যই কমেন্ট করে জানাবেন।

POST VIEWSl

website counter