Membuat Social Button ala Om Dayz - Hack4rt

Selamat Pagi semua, sebelum Hack4rt berangkat ke Rumah Sakit. Hack4rt akan menyempatkan diri untuk memposting cara membuat social button yang keren nih. Awalnya hack4rt liat-liat blog yang ngebuat template hack4rt ini yaitu om-dayz.blogspot.com . 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 om-dayz, tutorial ini hack4rt 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>

/* 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/AVvXsEh9TnrPpKqW40DHKWjWxCpN-FHICHO6kkPD6yXOv0eCH2ys6XxUZmSWQfbE5sKPx-f_gTQrm2vERcq_4XcIc1D5v6xt-YMDu8RXVfs6LbnhCtlih18vnEzmyX-sLsaANBnwOlK8MAWGiKQ/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/AVvXsEh9TnrPpKqW40DHKWjWxCpN-FHICHO6kkPD6yXOv0eCH2ys6XxUZmSWQfbE5sKPx-f_gTQrm2vERcq_4XcIc1D5v6xt-YMDu8RXVfs6LbnhCtlih18vnEzmyX-sLsaANBnwOlK8MAWGiKQ/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/AVvXsEh9TnrPpKqW40DHKWjWxCpN-FHICHO6kkPD6yXOv0eCH2ys6XxUZmSWQfbE5sKPx-f_gTQrm2vERcq_4XcIc1D5v6xt-YMDu8RXVfs6LbnhCtlih18vnEzmyX-sLsaANBnwOlK8MAWGiKQ/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/AVvXsEh9TnrPpKqW40DHKWjWxCpN-FHICHO6kkPD6yXOv0eCH2ys6XxUZmSWQfbE5sKPx-f_gTQrm2vERcq_4XcIc1D5v6xt-YMDu8RXVfs6LbnhCtlih18vnEzmyX-sLsaANBnwOlK8MAWGiKQ/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9TnrPpKqW40DHKWjWxCpN-FHICHO6kkPD6yXOv0eCH2ys6XxUZmSWQfbE5sKPx-f_gTQrm2vERcq_4XcIc1D5v6xt-YMDu8RXVfs6LbnhCtlih18vnEzmyX-sLsaANBnwOlK8MAWGiKQ/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;}}

Lalu Cari tag </body>
Pastekan kode di bawah tepat di atas 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='clear'/>
</div>
<div class='rt-social-buttons'>
<a class='lightbox' data-options='{"width":420, "height":405, "iframe": true}' href='http://twitter.com/novalbintangs' id='rt-twitter-btn' rel='nofollow' title='Twitter Hack4rt'>
<span>Follow Me On Twitter</span></a>
<a class='lightbox' data-options='{"width":300, "height":430, "iframe": true}' href='http://facebook.com/novalbs' id='rt-facebook-btn' rel='nofollow' title='Facebook Hack4rt'>
<span> Facebook Fanspage</span></a>
<a href='https://gplus.to/novalbintangs' id='rt-buzz-btn' rel='nofollow' target='_blank' title='Google Plus Hack4rt'>
<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'/>

Ganti tulisan berwarna merah sesuai keinginan agan :)

Terimakasih telah membaca :)

Related Posts