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..
- LogIn to your Blogger account..
- Go to Dashboard and Click Template..
- BackUp your template/HTML before you do this..
- Click Edit HTML..
- Find ]]></b:skin> [use ctrl+f to make it easy]..
- Copy the code below and Paste above ]]></b:skin> ..
- [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='{"width":420, "height":405, "iframe": 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='{"width":300, "height":430, "iframe": 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:
Post a Comment