ভাসমান শেয়ার বাটন তৈরী

আমার ব্লগের ডান পাশে সোস্যাল নেটওয়ার্কিং সাইটের ভাসমান শেয়ার বাটনটি তো দেখছেন। আজকে আমি তা কিভাবে বানালাম বর্ননা করব। এর আগে একটি পোস্টে বলেছিলাম যে বিষয়টি নিয়ে আলোচনা করব। 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(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
<!-- Medium Button -->
<a class='DiggThisButton DiggMedium'/></li>
</ul>
</div>

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

2 comments :

ফয়েজ উদ্দিন শাকিল said...

ধন্যবাদ ভাই খুব উপকার করলেন । আমি আপনার এই পোস্টের মত কিভাবে আমার ব্লগে প্রতি পোস্টে ফেসবুক লাইক, সেন্ড ও গুগল প্লাস অপশন চালু করতে পারি জানালে খুব খুশি হব

Sam said...

অনেক ভাবে করা যেতে পারে। আপনি ডিফল্ট টেমপ্লেট একটু মডিফাই করে ব্লগে সেট করে নিন।
অথবা এই লিঙ্কে দেখুন http://sam.azgor.com/2011/08/plus1-fb-share-button-bellow-post-title.html