ব্লগে যুক্ত করুন একটি আকর্ষণীয় Floating Twitter Twits Box

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

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

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

• প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
• তারপর ব্লগার ড্যাশবোর্ড হতে 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pLIf2jSMyXKaf_1yHj2k2oNdVM-3Tx03Z4ZCGrjGJZlYkhvJ1SoBcQuifOaCwFzdfVnbkWoOOahvWIknLDsZBkgJcMAh2ZnBoHVGT0jwnaErrPL1LOiYrBz41HPFv3Jv1444i2OVnNS9/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 পরিবর্তন করে নিতে পারবেন।

---

POST VIEWSl

Next Post Prev Post