Jul 8, 2015

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

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

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

  • প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
  • এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন।
add blogger new widget
  • তারপর 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="http://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="http://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=/^http:/.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 পরিবর্তন করে নিতে পারবেন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

0 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

Post a Comment

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: