আমার ব্লগের ডান পাশে সোস্যাল নেটওয়ার্কিং সাইটের ভাসমান শেয়ার বাটনটি তো দেখছেন। আজকে আমি তা কিভাবে বানালাম বর্ননা করব। এর আগে একটি পোস্টে বলেছিলাম যে বিষয়টি নিয়ে আলোচনা করব। how to Make Floating Social Network / Social Bookmark.

• লগ ইন করুন ব্লগারের ড্যাশবোর্ডে, "Design" > "Edit HTML"এ ক্লিক করুন। তারপর "Expand Widget Templates" চেকবক্সটিতে ক্লিক করুন।

• Ctrl+F প্রেস করুন আপনার কিবোর্ডে, </head> ট্যাগটি খুজুন। নিচের কোডটি পেস্ট করে দিন ঠিক এর পরে।

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script language='javascript'>
var name = &quot;#floatMenu&quot;;
var menuYloc = null;
$(document).ready(function(){
menuYloc =
parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css (&quot;top&quot;).indexOf(&quot;px&quot;)))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;
$(name).animate({top:offset},{duration:1000,queue:false});
});
});
</script>

duration:1000 ফ্রেমের মুভমেন্টের টাইম।

• তারপর ]]></b:skin> ট্যাগটি খুজুন,নিচের কোডটি পেস্ট করে দিন ঠিক এর আগে।

#floatMenu {
position:absolute;
top:150px;
float:left;
width:45px;}
#floatMenu ul {
list-style: none;}
#floatMenu ul li a {
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.8;}
#floatMenu ul li a:hover {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
opacity: 1;}

• এখন </body> ট্যাগটি খুজুন,নিচের কোডটি পেস্ট করে দিন ঠিক এর আগে।

<div id='floatMenu'>
<ul>
<li><a class='facebook-share-button' href='http://www.facebook.com/sharer.php'/><script src='http://widgets.fbshare.me/files/fbshare.js'/></li>
<li><a class='twitter-share-button' data-count='vertical' data-via='samazgor' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></li>
<li><script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<!-- Medium Button -->
<a class='DiggThisButton DiggMedium'/></li>
</ul>
</div>

• টেমপ্লেট সেভ করুন।

বিঃদ্রঃ টেমপ্লেট অবশ্যই ব্যাকআপ রাখবেন।