Cara Membuat Menu Social Button Melayang


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/AVvXsEiU8aF-rJsF-gwDQq1dB5UjEOG8f6S0fe7TzdAaNWymmfAgF40_6DJmRGWtxzKe68LgaCi-7Il748siuV4IUcCvTU-jeFAjXCuIXSDTGzfUScC00fWnSJDjcDCgC9C9y-P-wp0kFt_NJK4/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/AVvXsEiU8aF-rJsF-gwDQq1dB5UjEOG8f6S0fe7TzdAaNWymmfAgF40_6DJmRGWtxzKe68LgaCi-7Il748siuV4IUcCvTU-jeFAjXCuIXSDTGzfUScC00fWnSJDjcDCgC9C9y-P-wp0kFt_NJK4/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/AVvXsEiU8aF-rJsF-gwDQq1dB5UjEOG8f6S0fe7TzdAaNWymmfAgF40_6DJmRGWtxzKe68LgaCi-7Il748siuV4IUcCvTU-jeFAjXCuIXSDTGzfUScC00fWnSJDjcDCgC9C9y-P-wp0kFt_NJK4/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/AVvXsEiU8aF-rJsF-gwDQq1dB5UjEOG8f6S0fe7TzdAaNWymmfAgF40_6DJmRGWtxzKe68LgaCi-7Il748siuV4IUcCvTU-jeFAjXCuIXSDTGzfUScC00fWnSJDjcDCgC9C9y-P-wp0kFt_NJK4/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU8aF-rJsF-gwDQq1dB5UjEOG8f6S0fe7TzdAaNWymmfAgF40_6DJmRGWtxzKe68LgaCi-7Il748siuV4IUcCvTU-jeFAjXCuIXSDTGzfUScC00fWnSJDjcDCgC9C9y-P-wp0kFt_NJK4/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

10   komentar

bro coba di check blog saya template cloning dari om dayz http://aguzcreative.blogspot.in
Reply Delete
ehhehe sudah banyak juga teman yg menggunakan cloningan dari om dayz oleh blog santa
Reply Delete
ckckck sudah banyak penggunanya , td nya blog ini juga mau pake template tu tp ga jd karna sudah bnyk menggunakan,,,
lumayan bt tambah koleksi template, msh ada jga hasil cloningan ane dr om-dayz.cuma om santa lebih jago,kckckc
Reply Delete
Ngga saya nyaranin aja untuk blog ini memakai template cloned dari santa mars
Reply Delete
hahahha gi mls ganti template... n kebetulan jga dah ad blog ane yg laen pake template hasil clone
Reply Delete
bagus banget gan, jadi ngiri ane, hehehe kunjungi blog ane gan http://habiball.blogspot.com/
Reply Delete
Anonim mengatakan... 29 Juli 2013 pukul 02.51
ane coba dl gan, dipadu dengan template revolution pasti mantabb \m/
Reply Delete
Komentar ini telah dihapus oleh pengarang.
Delete
]]> ga ketemu ane cari cari
Reply Delete
Penjelasannya bagus dan detail menyertakan berbagai sumber yang terpercaya

Info untuk menghasilkan uang (memonetize) dari blog, website dan bisnis online bisa belajar dengan mengklik link di bawah ini

http://www.asianbrain.com/letter.html/903484
Reply Delete

Posting Komentar

Cancel Reply