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/AVvXsEjCv3JwsQ9_RorQxq_uGm2WBC3CV7MUxjv5H5Rl-fezOceiv2kpBr3uGEZ6tZAOsCnaqqour3NqXR8aVGF6nhBTbKq1A3PzAxGnnJBgBGFB7xODwOUcdbBL4uIbnIpOgjDzko6eTKTTcUQ/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/AVvXsEjCv3JwsQ9_RorQxq_uGm2WBC3CV7MUxjv5H5Rl-fezOceiv2kpBr3uGEZ6tZAOsCnaqqour3NqXR8aVGF6nhBTbKq1A3PzAxGnnJBgBGFB7xODwOUcdbBL4uIbnIpOgjDzko6eTKTTcUQ/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/AVvXsEjCv3JwsQ9_RorQxq_uGm2WBC3CV7MUxjv5H5Rl-fezOceiv2kpBr3uGEZ6tZAOsCnaqqour3NqXR8aVGF6nhBTbKq1A3PzAxGnnJBgBGFB7xODwOUcdbBL4uIbnIpOgjDzko6eTKTTcUQ/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/AVvXsEjCv3JwsQ9_RorQxq_uGm2WBC3CV7MUxjv5H5Rl-fezOceiv2kpBr3uGEZ6tZAOsCnaqqour3NqXR8aVGF6nhBTbKq1A3PzAxGnnJBgBGFB7xODwOUcdbBL4uIbnIpOgjDzko6eTKTTcUQ/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCv3JwsQ9_RorQxq_uGm2WBC3CV7MUxjv5H5Rl-fezOceiv2kpBr3uGEZ6tZAOsCnaqqour3NqXR8aVGF6nhBTbKq1A3PzAxGnnJBgBGFB7xODwOUcdbBL4uIbnIpOgjDzko6eTKTTcUQ/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='{"width":420, "height":405, "iframe": 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='{"width":300, "height":430, "iframe": 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
Belum ada tanggapan untuk "Cara Membuat Menu Social Button Melayang "
Posting Komentar