বন্ধুরা কেমন আছেন? অনেক দিন
পর আসলাম। যাই হোক কথা বেশী বলবো না। আমি আজ নিয়ে আসলাম একটি Social
Widget ব্লগার এর জন্য। নিচে এর LIVE DEMO দেখে নিন।
<!--Sexy Social Buttons Widget By projuktirkhela.blogspot.com-->
<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/AVvXsEjae4Htpyu_vWobMhKUyTg15-U-aKKKAHz_23QRe1lmACs4Hru0eITYibvuXjnEHFfTTFCy8OZLv8jTGmlUSwDcpxofdCzPEoTUak4yqoow9Pupyr2_HFLrOFDFaMq_HAqBSQGFSyEu6nk/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>
<!--Sexy Social Buttons Widget By projuktirkhela.blogspot.com-->
এটিকে আপনার করে নিতে হলে যা
করনীয়
১. প্রথমই আপনার ব্লগে প্রবেশ
করুন
২. তারপর আপনি সোজা Layout এ গিয়ে Add Gadget এ ক্লিক করে HTML/JavaScript টি Select করে নিন।
৩. তারপর নিচের কোডটি Select করে নিন
<!--Sexy Social Buttons Widget By projuktirkhela.blogspot.com-->
<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/AVvXsEjae4Htpyu_vWobMhKUyTg15-U-aKKKAHz_23QRe1lmACs4Hru0eITYibvuXjnEHFfTTFCy8OZLv8jTGmlUSwDcpxofdCzPEoTUak4yqoow9Pupyr2_HFLrOFDFaMq_HAqBSQGFSyEu6nk/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>
<!--Sexy Social Buttons Widget By projuktirkhela.blogspot.com-->
ফেসবুক এর জন্য EASiblu নামটি পালটিয়ে আপনার Username দিয়ে নিন
·
টুইটার এর জন্য EAShiblu নামটি পালটিয়ে আপনার Username দিয়ে নিন
·
গুগল+ এর জন্য 103593204016755715965 নামটি
পালটিয়ে আপনার Username দিয়ে নিন
·
আপনার FeedBurner পাল্টান http://feeds.feedburner.com/projuktirkhela
৪. এবার আপনি SAV E দিয়ে দিন।
ভাল লাগলে বা সমস্যা হলে মন্তব্য
করে জানাবেন।
0 মন্তব্য(গুলি):
একটি মন্তব্য পোস্ট করুন