Tutorial Belajar Blog | Tips Blog - Cara Membuat Social Button Melayang ,Tutorial Ini Terinspirasi dari Blogmates om-dayz, 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/AVvXsEghQe7HjxwTJVaR82OlEJ3zs1VcXJER1MAAcDInz5WPVKFvPuQF_CNY8EKI5I1BkcxSYrmTdnEGZ0C5BCLPVRAoVE9RIYcuvidmkCquerWVNFUAhzrCsYcJijYEP1D4c7Tdqdk2l9woXkQ/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/AVvXsEghQe7HjxwTJVaR82OlEJ3zs1VcXJER1MAAcDInz5WPVKFvPuQF_CNY8EKI5I1BkcxSYrmTdnEGZ0C5BCLPVRAoVE9RIYcuvidmkCquerWVNFUAhzrCsYcJijYEP1D4c7Tdqdk2l9woXkQ/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/AVvXsEghQe7HjxwTJVaR82OlEJ3zs1VcXJER1MAAcDInz5WPVKFvPuQF_CNY8EKI5I1BkcxSYrmTdnEGZ0C5BCLPVRAoVE9RIYcuvidmkCquerWVNFUAhzrCsYcJijYEP1D4c7Tdqdk2l9woXkQ/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/AVvXsEghQe7HjxwTJVaR82OlEJ3zs1VcXJER1MAAcDInz5WPVKFvPuQF_CNY8EKI5I1BkcxSYrmTdnEGZ0C5BCLPVRAoVE9RIYcuvidmkCquerWVNFUAhzrCsYcJijYEP1D4c7Tdqdk2l9woXkQ/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghQe7HjxwTJVaR82OlEJ3zs1VcXJER1MAAcDInz5WPVKFvPuQF_CNY8EKI5I1BkcxSYrmTdnEGZ0C5BCLPVRAoVE9RIYcuvidmkCquerWVNFUAhzrCsYcJijYEP1D4c7Tdqdk2l9woXkQ/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>

Untuk demo Social Button Melayang  anda bisa melihat langsung di blog Demo, ataupun Blog ini selamat mengoprek :)) Terima Kasih Om-Dayz

Advertisment
** Share nya Jangan Lupa Ya.. Salam,salam **

Saya hanya blogger biasa yang suka kutak-katik blogger, senang belajar dan berbagi pengetahuan dan pengalaman dengan yang lain. Blog ini hasil dari source mas Septi Rosidi, semoga dapat bermanfaat untuk semua. Silahkan masukan email Anda pada kotak di bawah ini untuk mendapatkan update artikel dari semujursite.


0 komentar:

Posting Komentar

 
Top