Selamat dini hari sobat, kali ini saya mau ngeshare Cara Membuat Menu Social Button Melayang di Blog, Ada Home Blog, Fb, Twitter, G+, dan RSS Blog.
Oke langsung kita masuk aja ke tutorial cara membuat social button Melayang
- Buka Template > Edit HTML > Expan Template Widget
- Cari kode ]]></b:skin>
- Lalu Paste kan kode di bawah tepat di atas kode ]]></b:skin>
- kode CSS
/* social button http://index-assembly.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/AVvXsEjP012K2zyF3TLPVSHVoE4CoIS2Y7P0bJSwSSRpTp8m8LwpLz8iDoeGRByiMILomrJDp8XkzjNVpD3Kp9fKiwnQl_rYQ3RnCwNV-1xaScUm8nc6rIiftZIlrEqJiw_X_nu4U1axW-EVapQ/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/AVvXsEjP012K2zyF3TLPVSHVoE4CoIS2Y7P0bJSwSSRpTp8m8LwpLz8iDoeGRByiMILomrJDp8XkzjNVpD3Kp9fKiwnQl_rYQ3RnCwNV-1xaScUm8nc6rIiftZIlrEqJiw_X_nu4U1axW-EVapQ/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/AVvXsEjP012K2zyF3TLPVSHVoE4CoIS2Y7P0bJSwSSRpTp8m8LwpLz8iDoeGRByiMILomrJDp8XkzjNVpD3Kp9fKiwnQl_rYQ3RnCwNV-1xaScUm8nc6rIiftZIlrEqJiw_X_nu4U1axW-EVapQ/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/AVvXsEjP012K2zyF3TLPVSHVoE4CoIS2Y7P0bJSwSSRpTp8m8LwpLz8iDoeGRByiMILomrJDp8XkzjNVpD3Kp9fKiwnQl_rYQ3RnCwNV-1xaScUm8nc6rIiftZIlrEqJiw_X_nu4U1axW-EVapQ/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP012K2zyF3TLPVSHVoE4CoIS2Y7P0bJSwSSRpTp8m8LwpLz8iDoeGRByiMILomrJDp8XkzjNVpD3Kp9fKiwnQl_rYQ3RnCwNV-1xaScUm8nc6rIiftZIlrEqJiw_X_nu4U1axW-EVapQ/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 tepat 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='{"width":420, "height":405, "iframe": true}' href='http://twitter.com/verdycode' id='rt-twitter-btn' rel='nofollow' title='Twitter Belajar Blog'>
<span>Follow Me On Twitter</span></a>
<a class='lightbox' data-options='{"width":300, "height":430, "iframe": true}' href='http://facebook.com/twitter.go.id' id='rt-facebook-btn' rel='nofollow' title='FacebookTutorial Blog'>
<span>Add Me Facebook</span></a>
<a href='https://plus.google.com/106363944691302137507' id='rt-buzz-btn' rel='nofollow' target='_blank' title='Google Plus'>
<span>Circle Me On Google Plus</span></a>
<a href='http://index-assembly.blogspot.com' id='rt-rss-btn' rel='nofollow' target='_blank' title='RSS index Blog'>
<span>Subscribe to RSS Feed</span></a>
</div></div></div>
Untuk demo Social Button Melayang anda bisa melihat langsung di blog ini, Sekian dari saya bila ada kurangnnya mohon maaf. Wassalamualaikum Wr. Wb
0 komentar
Posting Komentar