Membuat Button Social Slide Disamping Blog

Coretan Bang Dadan on

Tuesday, December 18, 2012

Cara Membuat Button Social Slide Disamping Blog - Sahabat blog semuanya, pada kesempatan sore hari ini bang dadan akan mebahas artikel tentang Cara Membuat Button Social Slide Disamping Blog. Setelah sebelumnya bang dadan telah membuat artikel tentang cara membuat membuat widgate menempel dibawah blog. Oke sob, widgate ini terdiri dari 4 akun yaitu Login Blog, Twitter, Facebook, dan Google +. dan jika sobat ingin melihat -nya bisa langsung lihat pada bagian samping kanan blog ini, tepat berada di tengah-tengah blog.

Oke bagi sobat yang ingin menerapkan tutorial ini pada blognya sendiri silahkan, ikuti langkah - langkahnya dibawah ini:

◉ Membuat Button Social Slide Disamping Blog

Pertama silahkan sobat login pada akun blog sobat
Selanjutnya menuju Dasbor/Rancangan
Kemudian Buka Template
Lalu Pilih Edit HTML *Jangan lupa centang Expand Template Widgate
Cari kode ]]></:bskin>
Setelah ketemu Paste kan kode di bawah tepat di atas kode ]]></b:skin>

◉ Berikut kodenya :

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

Selanjutnya cari lagi tag </body>
Lalu Salin kode dibawah ini dan paste kan tepat diatas tag </body>

◉ Berikut kodenya :

<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/bangdadan' id='rt-twitter-btn' rel='nofollow' title='Twitter Bang Dadan'>
<span>Twitter</span></a>
<a class='lightbox' data-options='{"width":300, "height":430, "iframe": true}' href='http://facebook.com/dadan.mistick' id='rt-facebook-btn' rel='nofollow' title='Facebook Bang Dadan'>
<span> Facebook</span></a>
<a href='https://plus.google.com/112804609939968416257' id='rt-buzz-btn' rel='nofollow' target='_blank' title='Google Plus Bang Dadan'>
<span>Google +</span></a>
</div>
</div>
<script src='http://ganteng-project.googlecode.com/svn/trunk/om-dayz/panelticon.js' type='text/javascript'/>

Selanjutnya Klik Simpan Template

◉ Keterangan :

Silahkan sobat ganti Tulisan yang berwarna Merah dengan ID Social network sobat masing- masing.

Nah mungkin cukup sekian dulu tutorial Cara Membuat Button Social Slide Disamping Blog, artikel ini bang dadan kutip dari blog hack4rt.com/2012/12/membuat-social-button-ala-om-dayz.html, dan bang dadan ucapkan terimakasih kepada hack4rt yang telah memberikan tutorial ini, dan majulah terus hacker - hacker indonesia. Mungkin hanya itu prakata dari bang dadan kurang dan lebihnya saya mohon maaf. waduh udah kaya pidato aja nih kata-kata,, jadi malu.. シシ

Ya udah pokoknya salam aja buat para blogger dimanapun anda berada. tetap semangat.. ヅヅ