ဘေလာ့ အတြက္Hover to Slide CSS3 Social Subscription Glass Widget ~ ၿငိမ္းခ်မ္းသူ(နည္းပညာ)

CSS3 Social Subscription Glass Widget ထည့္ ခ်င္သူေတြအတြက္ပါ

ေတာ္ေတာ္ေလးလန္းပါတယ္... ထဲ့ခ်င္တဲ့ ေဘာ္ဒါေတြအတြက္ေအာက္မွာ ကုတ္ေပးထားပါတယ္..

ေအာက္ကအဆင့္အတိုင္းသြားလိုက္ပါ...

Dashboard >> Layout >> Add a Gadget >> HTML/Javascript.

<style>
#BeH_social {width: 260px;margin: 5px 20px;padding:5px;}#BeH_social li {cursor: pointer;height: 54px;position: relative;list-style-type: none;}

#BeH_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2wlHwvwitZ8rDP18aKRR9-r8gjXfzdYpgZBT3VlJD6ONWlqJ3SZ62CzG7LjBwEMk19-8nxNRmvgh-t9BqBjNEvAwUl0HKn1CMAo5A4jd65txE9D-6-ZcgPpL63svcaYw-fCwzguYCHU/s1600/Social_Button.png') 0 0 no-repeat;

background-color: rgba(217, 30, 118, .42);
border-radius: 100px;

display: block;
color: #0033CC;
float:none;
height: 100px;
line-height: 48px;
margin: 5px 0;
position:fixed;
text-align: left;
text-indent: 90px;
text-shadow: #333 0 1.5px 0;
white-space: nowrap;
width: 48px;
z-index: 5;
-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;
-o-transition: width .50s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-o-box-shadow: rgba(0, 0, 0, 1.28) 10 2px 3px;
box-shadow: rgba(0, 0, 0, 11.28) 0 1.5px 5px;text-decoration: none;}
#BeH_social span:hover {visibility: hidden;}
#BeH_social span {display: block;top: 15px;position: absolute;left: 90px;}
#BeH_social .icon {color: #fafafa;overflow: hidden;}
#BeH_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}
#BeH_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}
#BeH_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}
#BeH_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;height: 50px;}
#BeH_social li:hover .icon {width: 250px;}
#BeH_social li:hover .icon {background-color: #d91e76;}
#BeH_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#BeH_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#BeH_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#BeH_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}
#BeH_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>

<br />
<ul id="BeH_social">
<li><a class="icon fb" href="http://www.facebook.com/nyeinchanthu">Like us on Facebook</a> </li>
<li><a class="icon twit" href="https://twitter.com/nyeinchanthu">Follow us on Twitter</a></li>
<li><a class="icon google" href="Your Google+ ID">Follow us on Google+</a> </li>
<li class="rss-special"><a class="icon rss" href="http://www.feedburner.com/nyeinchanthu">Subscribe via RSS</a> </li>
</ul>