কেমন আছেন সবাই।আশা করি ভাল আছেন।দিন যত সামনের দিকে এগুচ্ছে ব্লগ এবং ব্লগারের সংখ্যা

ততই বৃদ্ধি পাচ্ছে।আর এই সমস্ত ব্লগ এবং ব্লগাররা তাদের ব্লগের জন্য বিভিন্ন সামাজিক সাইটে পেইজ,গ্রুপ, আইডি ইত্যাদি খুলে থাকে। কারণ বর্তমানে সামাজিক বিভিন্ন সাইট যেমন:ফেজবুক, টুইটার,গুগুল + এর জনপ্রিয়তা দিন দিন বেড়েই চলছে।

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

Demo

এবার আসি কাজের কথায়।এটা কিভাবে আপনার সাইটে লাগাবেন।এটা একদম সহজ।

>> প্রথমে সাইটের Layout   এ যান।

>> Add a Gadget.

>> Select HTML/JavaScript.

তারপর এখানে নিচের কোডটি বসান।

<style>
#social-hover {
float: right;
position: relative;
height: 40px;
}
#social-hover a{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
width: 40px;
transition:width 0.4s;
-webkit-transition:width 0.4s;
-moz-transition:width 0.4s;
}
#social-hover a:hover{
width: 115px;
}
#social-hover ul, #top-menu ul { margin: 0; }
#social-hover li,
#social-hover li a,
#social-hover li .ts-icon,
#social-hover li .ts-text {
display: block;
position: relative;
width: 40px;
height: 40px;
}
#social-hover li,
#social-hover li a,
#social-hover li .ts-text {
float: left;
width: auto;
overflow: hidden;
}
#social-hover li a {
width: 40px;
line-height: 40px;
color: #FFF;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
#social-hover li.ts-rss a { background-color: #F88F16; }
#social-hover li.ts-rss .ts-icon { background: url("https://lh6.googleusercontent.com/-oQGmKZI7eJs/UlLJ-4f81II/AAAAAAAACV4/F3IcLsUKqsY/s16/rss.png") no-repeat center center; }
#social-hover li .ts-icon { float: left; }
#social-hover li.ts-facebook a { background-color: #3B5998; }
#social-hover li.ts-facebook .ts-icon { background: url("https://lh6.googleusercontent.com/-EcJsEGuE1QA/UlLJ-nbtGOI/AAAAAAAACVs/dizwfAR_0KU/s16/facebook.png") no-repeat center center; }
#social-hover li.ts-twitter a { background-color: #3CF; }
#social-hover li.ts-twitter .ts-icon { background: url("https://lh6.googleusercontent.com/-k9dXtRP_KG4/UlLJ_VpWtJI/AAAAAAAACWA/fsGPNo1tkjw/s16/twitter.png") no-repeat center center; }
#social-hover li.ts-gplus a { background-color: #BD3518; }
#social-hover li.ts-gplus .ts-icon { background: url("https://lh6.googleusercontent.com/-zwl2BMOWHWs/UlLJ-yjUF_I/AAAAAAAACWE/2z5vF-txseA/s16/gplus.png") no-repeat center center; }
</style>
<div id="social-hover">
<ul>
<li class="ts-rss"><a href="http://feeds.feedburner.com/" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">RSS Feeds</div></a></li>
<li class="ts-facebook"><a href="https://www.facebook.com/mizan.doly.5" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Facebook</div></a></li>
<li class="ts-twitter"><a href="https://twitter.com/riyad21bd" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Twitter</div></a></li>
<li class="ts-gplus"><a href="https://plus.google.com/112735332015921651188/about" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Google+</div></a></li>
</ul>
</div>

লক্ষ করুন এখানে কোডের একদম নিচে যায়গায় আপনি আপনার নিজের ফেজবুক, টুইটার, গুগুল +, আর.এস.এস লিংক স্থাপন করুন।
ব্যাস হয়ে গেল।এবার উপভোগ করুন।সুন্দর একটি সামাজিক আইকন বার।

আজ এ পর্যন্ত।সবাই ভাল থাকবেন।আল্লাহ হাফেজ।

ফেজবুকে আমি

প্রথম প্রকাশ এখানে

ব্যক্তিগত ব্লগে আমি