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

পড়ুন কিভাবে ব্লগের ছবি তে REFLECTION ইফেক্ট যুক্ত করতে হবে।

১. ব্লগের ড্যাসবোর্ড থেকে Layout সিলেক্ট করে যেখানে বাটনগুলো যুক্ত করতে চান বা করলে ভাল হবে সেখানের Add a Gadget বাটনে ক্লিক করুন।

২. এবার লিস্ট থেকে HTML/JavaScript গ্যাডগেট টি যুক্ত করুন এবং নিচের কোডটি কপি করে পেষ্ট করুন।

<style>
p#socialicons img {
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#socialicons img:hover {
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

p#socialicons1 img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#socialicons1 img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#socialicons2 img {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

p#socialicons2 img:hover {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>

<center>
<p id=”socialicons”>
<a href=”http://www.facebook.com/FB_NAME” target=”_blank”><img border=”0″ src=”http://4.bp.blogspot.com/-Q7l2AIANnbI/UApzYR4CKWI/AAAAAAAABDE/g7m_rz8dW0s/s1600/latesthack.com-facebook.png” /></a>

<a href=”http://www.twitter.com/TWITTER_NAME/” target=”_blank”><img border=”0″ src=”http://4.bp.blogspot.com/-GHi-SgA9yWY/UApzaE6ooTI/AAAAAAAABDc/glSG637KE4U/s1600/latesthack.com-twitter.png” /></a>
</p>
<p id=”socialicons”>
<a href=”https://plus.google.com/u/0/123456789012345678901” target=”_blank”><img border=”0″ src=”http://3.bp.blogspot.com/-4sZkt3DbUxg/UApzY-Eda8I/AAAAAAAABDM/p8-j4asZm6Q/s1600/latesthack.com-google_plus.png” /></a>

<a href=”http://feeds.feedburner.com/FEEDBURNER_NAME/” target=”_blank”><img border=”0″ src=”http://2.bp.blogspot.com/-qxygObBRqtM/UApzZd8YQNI/AAAAAAAABDU/Pxn3uOsVjeg/s1600/latesthack.com-rss.png” /></a>
</p>
</center>
<p style=”display:none;”>Spinning icons by <a href=”http://tipsworldbd.blogspot.com”>COMPUTER TIPS WORLD BD</a></p>

৩.  লাল রংয়ের লেখাগুলো কে আপনার Username দিয়ে পরিবর্তন করুন।

৪. Gadget টি সেইভ করুন।

সময়ের অভাবে ছবি দিতে পারলাম না বলে দুঃখিত।