অসাধারন CSS Social ওয়েডগেট ব্লগার ব্লগ এর জন্য ।

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

LIVE DEMO

কিভাবে এটিকে আপনার ব্লগে যুক্ত করবেন বিস্তারিত নীচেঃ

১) ব্লগ লগ অন করুন ।

২) ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন ।

৩)  Add a gadget এ ক্লিক করুন ।

৪) একটি পেজ ওপেন হবে সেখানে HTML/Java Script এ ক্লিক করুন ।

৫) Content ঘরে নীচের যেটি আপনার পছন্দ সেই CSS  কোডটি কপি করে পেস্ট করুন ।


;;; স্টাইল  ঃ ১

<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/YOUR FACEBOOK URL" 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/YOUR TWITTER URL/" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-GHi-SgA9yWY/UApzaE6ooTI/AAAAAAAABDc/glSG637KE4U/s1600/latesthack.com-twitter.png" /></a>    <a href="https://plus.google.com/u/0/YOUR GOOGLE+ URL" 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/YOUR FEEDBURNER URL/" 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://www.latesthack.com">Latest Hack</a></p>

Spinning icons by Latest Hack

;;; স্টাইল  ঃ 2

Spinning icons by Latest Hack

<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="socialicons1">    <a href="http://www.facebook.com/YOUR FACEBOOK URL" 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/YOUR TWITTER URL/" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-GHi-SgA9yWY/UApzaE6ooTI/AAAAAAAABDc/glSG637KE4U/s1600/latesthack.com-twitter.png" /></a>    <a href="https://plus.google.com/u/0/YOUR GOOGLE+ URL" 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/YOUR FEEDBURNER URL/" 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://www.latesthack.com">Latest Hack</a></p>

;;; স্টাইল  ঃ ৩

Spinning icons by Latest Hack

<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="socialicons2">    <a href="http://www.facebook.com/YOUR FACEBOOK URL" 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/YOUR TWITTER URL/" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-GHi-SgA9yWY/UApzaE6ooTI/AAAAAAAABDc/glSG637KE4U/s1600/latesthack.com-twitter.png" /></a>    <a href="https://plus.google.com/u/0/YOUR GOOGLE+ URL" 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/YOUR FEEDBURNER URL/" 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://www.latesthack.com">Latest Hack</a></p>

এবার একটু এডিট করে নিতে হবে নীচে দেখুনঃ

* আসুন ওয়েডগেট টি কে একটু কাটা ছাটা করে বেশি কিছু না সুধু YOUR URL এর ইস্থানে আপনার ফ্যান পেজ এর URL  টি বসিয়ে দিন ব্যাস ।


* উপরে আমি যে তিনটি ওয়েডগেট দিলাম সেগুল দেখতে একি কিন্তু এর রউন্ড স্টাইল আলাদা তাই যেটি আপনার পছন্দ সেটির কোড কপি করে পেস্ট করুন ।


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