Free download Games, software full version, Crack, Patch, Movies, and many more. Feel Free your download.

How to make Social Network button floating


Hello anoncyber's friends.. Do you see the button in the right bar / on scroll bar when you visit this blog.. ?? That's what I will share to you "how to make it" know.. Read the step by step carefully..


  1. LogIn to your Blogger account..
  2. Go to Dashboard and Click Template..
  3. BackUp your template/HTML before you do this..
  4. Click Edit HTML..
  5. Find ]]></b:skin> [use ctrl+f to make it easy]..
  6. Copy the code below and Paste above ]]></b:skin> .. 
  7. [Note : This is CSS code]..
/* social button http://anoncyber.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/AVvXsEjqQF6cLq8s-Xvz5W46lx37dWcNrdIIFD6jSnkB9aaBd79nX1-tqMxe8nO_IaoLAVDaLRbwIzfwDby6PKqqsMcuNtgOnOJ0AATYr0golUHGO5MX9rMzx5fej-FjobrNt2Q8HEKXalX6zy4/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/AVvXsEjqQF6cLq8s-Xvz5W46lx37dWcNrdIIFD6jSnkB9aaBd79nX1-tqMxe8nO_IaoLAVDaLRbwIzfwDby6PKqqsMcuNtgOnOJ0AATYr0golUHGO5MX9rMzx5fej-FjobrNt2Q8HEKXalX6zy4/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/AVvXsEjqQF6cLq8s-Xvz5W46lx37dWcNrdIIFD6jSnkB9aaBd79nX1-tqMxe8nO_IaoLAVDaLRbwIzfwDby6PKqqsMcuNtgOnOJ0AATYr0golUHGO5MX9rMzx5fej-FjobrNt2Q8HEKXalX6zy4/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/AVvXsEjqQF6cLq8s-Xvz5W46lx37dWcNrdIIFD6jSnkB9aaBd79nX1-tqMxe8nO_IaoLAVDaLRbwIzfwDby6PKqqsMcuNtgOnOJ0AATYr0golUHGO5MX9rMzx5fej-FjobrNt2Q8HEKXalX6zy4/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqQF6cLq8s-Xvz5W46lx37dWcNrdIIFD6jSnkB9aaBd79nX1-tqMxe8nO_IaoLAVDaLRbwIzfwDby6PKqqsMcuNtgOnOJ0AATYr0golUHGO5MX9rMzx5fej-FjobrNt2Q8HEKXalX6zy4/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;}}
8. After you Copy that code,now find </body> ..
9. Copy this code below and Paste above </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://twitter.com/_hactivist' id='rt-twitter-btn' rel='nofollow' title='Twitter AnonCyber'>
<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://facebook.com/Cxz96' id='rt-facebook-btn' rel='nofollow' title='FacebookAnonCyber'>
<span> Facebook </span></a>
<a href='http://anoncyber.blogspot.com' id='rt-buzz-btn' rel='nofollow' target='_blank' title='Google Plus AnonCyber'>
<span>Circle Me On Google Plus</span></a>
<a href='http://anoncyber.blogspot.com' id='rt-rss-btn' rel='nofollow' target='_blank' title='RSS AnonCyber'>
<span>Subscribe to RSS Feed</span></a>
</div></div></div>
Last,click Save Template and see what will happens in your blog..

Be Creative.. ^_^




0 komentar:

How to make Social Network button floating