Menu Social Button Melayang

Sekedar Berbagi Informasi karena ada teman yang bertanya bagaimana membuat social Button di sebelah kanan pada blog! 

Langsung masuk aja ke tutorial cara membuat social button Melayang, 

• Buka Template > Edit HTML > Expan Template Widget
• Cari kode ]]></:bskin>
• Lalu Paste kan kode di bawah tepat di atas kode ]]></b:skin>

/* social button http://tutorialbelajarblogger.blogspot.com*/
.staticbar {position: fixed;right: 0;top: 35%;width: 25px;animation:static-bar .8s;-moz-animation:static-bar .8s; -webkit-animation:static-bar .8s;}
.staticbar:hover {z-index: 1000;}
.rt-social-buttons a, .loginbtn {background: none repeat scroll 0 0 rgb(34, 34, 34);background-repeat: no-repeat;display: block;height: 20px;margin-bottom: 3px;padding: 4px 0 4px 4px;right: 0px;width: 140px;position: relative;-moz-border-radius: 3px 0px 0px 3px;-webkit-border-radius: 3px 0px 0px 3px;-khtml-border-radius: 3px 0px 0px 3px;border-radius: 3px 0px 0px 3px;background-position: 4px 4px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;border:1px solid rgb(51, 51, 51)}
.rt-social-buttons span, .loginbtn span {background-repeat: no-repeat;color: #FFFFFF;display: block;font-size: 10px;height: 18px;letter-spacing: -1px;line-height: 1.9em;padding-left: 10px;text-transform: uppercase;text-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);}
.rt-social-buttons a:hover, .loginbtn:hover {background: none repeat scroll 0 0 rgb(150, 0, 0);border:1px solid rgb(70, 0, 0);
right: 119px;}
.rt-social-buttons a#rt-buzz-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzLBktM_aO3t9A2iJqspL1rFumLEA6MuJchkn6Nt_IwhotX7zK496XtIx2Y4JnLFfanoRZ3w6dtXLfU8Yoml79NhaqQBDn7OILWBk9wW3oFNcin_0kVORd0oBoS1eFC2cUoW2gD9xNz0/s1600/socialsprite.png);background-position:-2px -68px;}
.rt-social-buttons a#rt-twitter-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzLBktM_aO3t9A2iJqspL1rFumLEA6MuJchkn6Nt_IwhotX7zK496XtIx2Y4JnLFfanoRZ3w6dtXLfU8Yoml79NhaqQBDn7OILWBk9wW3oFNcin_0kVORd0oBoS1eFC2cUoW2gD9xNz0/s1600/socialsprite.png);background-position:-2px -24px;}
.rt-social-buttons a#rt-facebook-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzLBktM_aO3t9A2iJqspL1rFumLEA6MuJchkn6Nt_IwhotX7zK496XtIx2Y4JnLFfanoRZ3w6dtXLfU8Yoml79NhaqQBDn7OILWBk9wW3oFNcin_0kVORd0oBoS1eFC2cUoW2gD9xNz0/s1600/socialsprite.png);background-position:-2px -46px;}
.rt-social-buttons a#rt-rss-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzLBktM_aO3t9A2iJqspL1rFumLEA6MuJchkn6Nt_IwhotX7zK496XtIx2Y4JnLFfanoRZ3w6dtXLfU8Yoml79NhaqQBDn7OILWBk9wW3oFNcin_0kVORd0oBoS1eFC2cUoW2gD9xNz0/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzLBktM_aO3t9A2iJqspL1rFumLEA6MuJchkn6Nt_IwhotX7zK496XtIx2Y4JnLFfanoRZ3w6dtXLfU8Yoml79NhaqQBDn7OILWBk9wW3oFNcin_0kVORd0oBoS1eFC2cUoW2gD9xNz0/s1600/socialsprite.png);background-position:-2px 0px;}
@keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}
@-moz-keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}
@-webkit-keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}

Langkah terakhir, pasang Script dibawah ini diatas tag </body>

<div class='staticbar'>
<div class='login'>
<div id='rt-login-button'>
<a class='loginbtn buttontext' href='http://blogger.com' rel='nofollow' target='_blank' title='Login Blogger'>
<span class='desc'>Blogger Login</span></a>
</div>
<div class='rt-social-buttons'>
<a class='lightbox' data-options='{&quot;width&quot;:420, &quot;height&quot;:405, &quot;iframe&quot;: true}' href='http://tutorialbelajarblogger.blogspot.com' id='rt-twitter-btn' rel='nofollow' title='Twitter Belajar Blog'>
<span>Follow Me On Twitter</span></a>
<a class='lightbox' data-options='{&quot;width&quot;:300, &quot;height&quot;:430, &quot;iframe&quot;: true}' href='http://tutorialbelajarblogger.blogspot.com' id='rt-facebook-btn' rel='nofollow' title='FacebookTutorial Blog'>
<span> Facebook Fanspage</span></a>
<a href='http://tutorialbelajarblogger.blogspot.com' id='rt-buzz-btn' rel='nofollow' target='_blank' title='Google Plus Tutorial Blog'>
<span>Circle Me On Google Plus</span></a>
<a href='http://tutorialbelajarblogger.blogspot.com' id='rt-rss-btn' rel='nofollow' target='_blank' title='RSS Belajar Blog'>
<span>Subscribe to RSS Feed</span></a>
</div></div></div>

Selamat Mencoba .. . Happy Blogger