সালাম

কেমন আছেন সবাই। আশা করি ভাল। আজকে একটা ছোট টিউন নিয়ে এসেছি আপনাদের জন্যে। অনেকের ই ওয়ার্ডপ্রেস ব্লগ আছে যেটাকে খুব সুন্দর ভাবে উপস্থাপন করতে চান। আর বর্তমানে সোশ্যাল শেয়ারিং বাটনের বৈচিত্র ব্লগ কে এক অন্যরকম রুপ দেয়।।

অনেকেই দেখেছেন বিভিন্ন ব্লগ সাইট গুলোতে স্লাইডিং সোশ্যাল শেয়ারিং বাটন গুলো। ভেবেছেন নিজের ব্লগেও এরকম বাটন যোগ করতে পারলে সাইট টি আরো সুন্দর হত এজন্যে বিভিন্ন কোড এডিট করে করতে গিয়ে পারেন নি হয়ত। আবার অনেকেই পেরেছেন। তবে আজকে আমি যে পদ্ধতী টি বলব সেটায় কোনো কোডিং এর ঝামেলা করতে হবেনা। শুধু কোড টি কপি করে একযায়গায় পেস্ট করে দিলেই কাজ শেষ।

উদাহরন হিসেবে আমার সাইট টি দেখতে পারেন কিভাবে বাটনগুলো থাকবে Social Media Blog

তো আসুন দেখে নেই ২ মিনিটের এই কাজ টি কিভাবে করবেন।

প্রথমে আপনার ওয়ার্ডপ্রেসে ড্যাশবোর্ড এ Appearance > Widgets  এ যান।

এবার এখান থেকে Text widget টি ড্র্যাগ করে নিয়ে সাইডবারে বসান।

Text widget  এ নিম্নের কোড টি কপি করে পেস্ট করুন।

<!–SideBar Floating Share Buttons Code Start–>

<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.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='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='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='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a <font></font></font></a></div></div>

<!–SideBar Floating Share Buttons Code End–>

ব্যাস হয়ে গেল। এবার সেভ করুন।

আর কি? সাইট রিলোড করে দেখুন বাম পাশে সেট হয়ে গেছে 🙂

ভাল লাগলে কমেন্টে জানাবেন