Rabu, 19 Desember 2012
Selamat Pagi semua, sebelum Bima4rt mau tidur. Bima4rt akan menyempatkan diri untuk memposting cara membuat social button yang keren nih. Di lihat-lihat ternyata ada widget yang keren nih gan. Social Button yang dibuat om-dayz emang keren gan, blognya aja simple dan sangat ringan. WOW!
Yaudah langsung masuk aja ke tutorial cara membuat social button ala Bima Bhaskara, tutorial ini Bima4rt sendiri yang buat, karena mungkin hasil 'nyuri' widget secara diam-diam dengan view source code nya ._. Nih tutorial nya
- Buka Template > Edit HTML > Expan Template Widget
- Cari kode ]]></:bskin>
- Lalu Paste kan kode di bawah tepat di atas kode ]]></b:skin>
- Lalu Cari tag </body>
- Pastekan kode di bawah tepat di atas tag </body>
- Ganti tulisan berwarna merah sesuai keinginan agan :)
/* social button */
.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/AVvXsEjVOkFMFIjCtxruq902CrrkSCjhN8dnnYBSuo_gxilN359touLkYcHwN5_mZJaO4jIgNHEXRZNEhvnPa0jJKqfUEh174FcIqt6KbbtpRPaYsZCVYGCf8Rv4-woL5xK_cx3J-3jX8uihuaM/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/AVvXsEjVOkFMFIjCtxruq902CrrkSCjhN8dnnYBSuo_gxilN359touLkYcHwN5_mZJaO4jIgNHEXRZNEhvnPa0jJKqfUEh174FcIqt6KbbtpRPaYsZCVYGCf8Rv4-woL5xK_cx3J-3jX8uihuaM/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/AVvXsEjVOkFMFIjCtxruq902CrrkSCjhN8dnnYBSuo_gxilN359touLkYcHwN5_mZJaO4jIgNHEXRZNEhvnPa0jJKqfUEh174FcIqt6KbbtpRPaYsZCVYGCf8Rv4-woL5xK_cx3J-3jX8uihuaM/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/AVvXsEjVOkFMFIjCtxruq902CrrkSCjhN8dnnYBSuo_gxilN359touLkYcHwN5_mZJaO4jIgNHEXRZNEhvnPa0jJKqfUEh174FcIqt6KbbtpRPaYsZCVYGCf8Rv4-woL5xK_cx3J-3jX8uihuaM/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVOkFMFIjCtxruq902CrrkSCjhN8dnnYBSuo_gxilN359touLkYcHwN5_mZJaO4jIgNHEXRZNEhvnPa0jJKqfUEh174FcIqt6KbbtpRPaYsZCVYGCf8Rv4-woL5xK_cx3J-3jX8uihuaM/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;}}
<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='clear'/>
</div>
<div class='rt-social-buttons'>
<a class='lightbox' data-options='{"width":420, "height":405, "iframe": true}' href='http://twitter.com/BimaCyber4rt' id='rt-twitter-btn' rel='nofollow' title='Twitter Bima4rt'>
<span>Follow Me On Twitter</span></a>
<a class='lightbox' data-options='{"width":300, "height":430, "iframe": true}' href='http://facebook.com/Souzun.MIRAE' id='rt-facebook-btn' rel='nofollow' title='Facebook Bima4rt'>
<span> Facebook Fanspage</span></a>
<a href='https://plus.google.com/u/0/114025132420932074654' id='rt-buzz-btn' rel='nofollow' target='_blank' title='Google Plus Bima4rt'>
<span>Circle Me On Google Plus</span></a>
</div>
</div>
<script src='http://ganteng-project.googlecode.com/svn/trunk/om-dayz/panelticon.js' type='text/javascript'/>
Credit by Bima4rt
