আপনার সাইটে যোগ করুন Floating Share Buttons: 7 Buttons!

6
373

আপনার সাইটে যোগ করুন Floating Share Buttons: 7 Buttons!

আপনারা যখন বিভিন্ন সাইট ভিজিট করবেন তখন দেখবেন একটি Vertical Bar এর মত আছে যাতে ঐ Site টি Share, Like, +1, Tweet করার ব্যবস্থা থাকে। আপনারা হয়ত অনেকেই জানেন কিভাবে এটা করতে হয়। এটা করার জন্য বিভিন্ন রকম Code আছে।

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

কিন্তু আজ আপনাদের যে Code টি দিব এটা আপনারা খুব সহজেই ব্যবহার করতে পারবেন। এটাতে ৭টি বাটন আছে। FB Like, Google +1, StumbleUpon, Digg, Tweet, Linked in এবং Reddit.

Demo দেখুন

 

সাধারণত একসাথে ৭ টি কোড পাওয়া যায় না। আর একসাতে ৭টি বাটন পাওয়া গেলেও একসাথে ৭টি বাটন কারো কাজে লাগে না বা বেশি বড় হয়ে যায়। কিন্তু এই কোডটি আপনারা খুব সহজেই Modify করতে পারবেন। যে বাটনটি দরকার নেই সেটি আপনার া কোড থেকে খুব সহজেই মুছে ফেলতে পারবেন।

Code টি Blogger এ Test করা। কিন্তু আশা করি সব সাইটেই কাজ করবে। এখানে শুধু ব্লগারে যুক্ত করার  নিয়মটা বলে দিই।

Sign in to your Blogger Account > Design > Layout > Add a Gadget (যে কোন একটি নিলেই হবে) > HTML/ JavaScript > এবার Content Box এ নিচের Code টি কপি পেস্ট করে বসিয়ে দিন > Save.

<!–SideBar Floating Share Buttons Code Start–>

<style>
#pageshare {position:fixed; bottom:15%; left:3px; float:left; border: 1px solid black; border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#eff3fa;padding:0 0 1px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:3px 3px 0 3px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id=’pageshare’ title=”Share This With Your Friends”>

 

<div class=’sbutton’ id=’gb’><script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like layout=”box_count” show_faces=”false” font=””></fb:like></div>

 

<div class=’sbutton’ id=’gplusone’><script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script><g:plusone size=”tall”></g:plusone></div>
<div class=’sbutton’ id=’su’><script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script></div>

 

<div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’><script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script><a></a></div>

 

<div class=’sbutton’ id=’rt’><a href=”http://twitter.com/share” data-count=”vertical” >Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=”text/javascript”></script></div>

 

<div class=’floatbutton’ id=’linkedin’><script src=”//platform.linkedin.com/in.js” type=”text/javascript”></script>
<script type=”IN/Share” data-counter=”top”></script></div>

 

<div id=”reddit”><script type=”text/javascript” src=”http://www.reddit.com/static/button/button2.js”></script><!– AddThis Button BEGIN –><div><a></a></div>

 

<!–SideBar Floating Share Buttons Code End–></div></div>

এবার আপনার Site এ গিয়ে দেখুন ফলাফল।

একটু ভাল মত লক্ষ করলেই দেখতে পাবেন কোডটি ৭ টি ভাগে ভাগ করা। এক একটি ভাগ এক একটি বাটন। আপনি বাটনের সংখ্যা কমাতে চাইলে যে বাটন টি রিমুভ করতে চান সে বাটনের কোড মুছে দিবেন। তারপর আপনার HTML/ JavaScript Gadget এ Cope Paste করবেন। 

এটি একটি  Translate করা লেখা। বিস্তারিত পাবেন  Marks PC Solution  এ। 

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

6 মন্তব্য

    • I m sorry brother. This code don’t let you to make the bar horizontal. You can only set it either on the left side or right.

      You can search Google for horizontal bar.

      Thank you.

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

three × five =