ব্লগে যুক্ত করুন একটি সুন্দর অ্যানিমেটেড শেয়ারিং বাটন

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

পড়ুন কিভাবে ব্লগের ছবি তে 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 টি সেইভ করুন।

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

Level 0

আমি অসীম কষ্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 39 টি টিউন ও 35 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি একজন ছাত্র পড়াশুনার ফাঁকে ফাঁকে কম্পিউটার নিয়ে ঘাটাঘাটি করি। এতে আমি যা জানতে পারি বা বুঝতে পারি তা বন্ধুদের সাথে শেয়ার করি। ঘুরে বেড়াতে ভাল লাগে একা একা থাকতে আর সারাদিন নাওয়া খাওয়া ছেড়ে কম্পিউটারের সাথে লেগে থাকতে ভাল লাগে। খুব বেশি বন্ধু তবে আমরা যখন একত্র হই তখন...


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস