৭ মে, ২০১৫

ব্লগারে যুক্ত করুন আকর্ষণীয় Floating Social Media Sharing Buttons

ব্লগারে যুক্ত করুন আকর্ষণীয় Floating Social Media Sharing Buttons
4/ 5 stars - "ব্লগারে যুক্ত করুন আকর্ষণীয় Floating Social Media Sharing Buttons" ব্লগ কিংবা ওয়েবসাইটের Social Media Sharing এর মধ্যে সবচেয়ে আকর্ষণীয় ও জনপ্রিয় হচ্ছে Floating Social Media Sharing. যত টপ লেভেলের ওয়েবসাইট ...
-
ব্লগ কিংবা ওয়েবসাইটের Social Media Sharing এর মধ্যে সবচেয়ে আকর্ষণীয় ও জনপ্রিয় হচ্ছে Floating Social Media Sharing. যত টপ লেভেলের ওয়েবসাইট দেখা যায় প্রায় সবগুলিতেই এই ধরনের Social Media Sharing বাটন যুক্ত করা থাকে। এটি ব্লগের সুন্দর্য বৃদ্ধি করার পাশাপাশি আপনার Social Media গুলিতে ব্লগ পোষ্টগুলি সহজে শেয়ার করতে সাহায্য করবে। যার ফলে Social Media হতে অনেক ভিজিটর পাওয়ার সম্ভাবনা বেড়ে যায়।
Floating-Social-Share
আজকে আমি যে Floating Social Media Sharing উইজেটটি শেয়ার করবো এটিতে একসাথে Facebook Like, Twitter Share, Google+ এবং StumbleUpon বাটন যুক্ত করা আছে। এই সব বাটনগুলি আলাদা আলাদা বক্সের মাধ্যমে Like এবং Share কাউন্ট করবে। তাছাড়া আপনি ইচ্ছে করলে আরও অনেক বাটন এটিতে যুক্ত করে নিতে পারবেন। এই ধরনের বাটন সাধারনত Add This ওয়েবসাইট হতে ব্লগে যুক্ত করা হয়, যেগুলি কাষ্টমাইজ করা যায় না। কিন্তু আমি যেটি শেয়ার করছি এটি সম্পূর্ণ আমাদের নিজস্ব কোডিং এর মাধ্যমে। যার ফলে এটিকে আপনার ইচ্ছামত কাষ্টমাইজ করতে পারবেন। এখান থেকে এর লাইভ ডেমো দেখে আসতে পারেন - Live Demo

কিভাবে ব্লগে যুক্ত করতে হয়ঃ

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
  • এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন। নিচের চিত্রে দেখুন -
Blogger Gadget
  • তারপর HTML/JavaScript এ ক্লিক করুন।
  • এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।
<style type="text/css">
#social-buttons {
   position:fixed;
   bottom:30%;
   margin-left:-740px;
   float:left;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   background-color:#fff;
   padding:0 0 2px 0;
   border:2px solid #000000;
   z-index:10;
}
#social-buttons .button-share {
   float:left;
   clear:both;
   margin:5px 5px 0 2px;
}
</style>
<div id='social-buttons' title="Get This From www.prozokti.com">
<div class='button-share' id='like' style='margin-left:7px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='prozokthi' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://www.prozokti.com/2015/05/floating-social-media-sharing-buttons-for-blogger.html">widget</a></div></div></div>
  • সবশেষে Gadget টি Save করুন।

 কাষ্টমাইজেশনঃ

  • উপরের লাল চিহ্নিত bottom:30% হচ্ছে Vertical alignment. অর্থাৎ এটি আপনি কতটুকু উপরে কিংবা নিচে রাখতে চাচ্ছেন। এই সংখ্যাটি যত বাড়াবেন ততই উপরের দিকে উঠতে থাকবে।
  • উপরের ২য় লাল চিহ্নিত margin-left:-740px হচ্ছে Horizontal alignment. অর্থাৎ এটি আপনি কতটুকু ডানে কিংবা বামে রাখতে চাচ্ছেন। এই সংখ্যাটি যত বাড়াবেন ততই বাম দিকে সরতে থাকবে। 
  • এরপর Pink কালারের prozokthi এর স্থলে আপনার Twitter একাউন্টের User Name দিন।
  • আপনি ইচ্ছে করলে এই Widget টির যে কোন বাটন ডিলিট করতে পারবেন। আবার ইচ্ছে করলে নতুন বাটন যুক্ত করেও নিতে পারবেন।
Subcribe to our all updates

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

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

একটি মন্তব্য পোস্ট করুন

 
Subscribe for all Updates

Subscribe Now

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

Powered by: