চমৎকার একটি ব্লগার Wiget

বন্ধুরা কেমন আছেন? অনেক দিন পর আসলাম। যাই হোক কথা বেশী বলবো না। আমি আজ নিয়ে আসলাম একটি Social Widget ব্লগার এর জন্য। নিচে এর LIVE DEMO দেখে নিন।

এটিকে আপনার করে নিতে হলে যা করনীয়

১. প্রথমই আপনার ব্লগে প্রবেশ করুন

২. তারপর আপনি সোজা Layout এ গিয়ে Add Gadget এ ক্লিক করে HTML/JavaScript টি Select করে নিন।

৩. তারপর নিচের কোডটি Select করে নিন

<style>
#wtss{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#wtss a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#wtss li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#wtss .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-sHrLI_ug7CTWDoRAyvR-zupdHND-TsBSBXk0RzmfydjfOPUzun3KR6M5wecUlmvwpjcThZDm8Hrv03d7bb7JpxO9kEU1NgqPHg1JQkOqNnTqt0ReAJsMiqn8feTrxmJf2v_QoXO5jM/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#wtss li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#wtss .icon{overflow:hidden; color:#fafafa;}
#wtss .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#wtss .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#wtss .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#wtss .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#wtss .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#wtss li:hover .icon,
.touch #wtss li .icon{width:210px;}
.touch #wtss li .facebook, #wtss li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #wtss li .twitter, #wtss li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #wtss li .googleplus, #wtss li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #wtss li .pinterest, #wtss li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #wtss li .rss, #wtss li:hover .rss{background-color:rgba(255,102,0,1);}
</style>

<ul id="wtss">
<li data-alt="Follow me on Facebook"><a class="icon facebook" href="http://www.facebook.com/Easiblu">আমাকে Follow করুন</a></li>
<li data-alt="Follow me on Twitter"><a class="icon twitter" href="http://www.twitter.com/EAShiblu">আমাকে Follow করুন</a></li>
<li data-alt="Follow me on Google+"><a class="icon googleplus" href="http://plus.google.com/103593204016755715965">আমাকে Follow করুন</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/projuktirkhela">Subscribe করুন RSS দিয়ে</a></li>
</ul>

·        ফেসবুক এর জন্য EASiblu নামটি পালটিয়ে আপনার Username দিয়ে নিন

·        টুইটার এর জন্য EAShiblu  নামটি পালটিয়ে আপনার Username দিয়ে নিন

·        গুগল+ এর জন্য 103593204016755715965  নামটি পালটিয়ে আপনার Username দিয়ে নিন

·        আপনার FeedBurner পাল্টান http://feeds.feedburner.com/projuktirkhela

৪. এবার আপনি SAV E দিয়ে দিন।

ভাল লাগলে বা সমস্যা হলে মন্তব্য করে জানাবেন।