Membuat Button Social Slide Disamping Blog



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.

Cara Membuat Button Social Slide Disamping 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(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);background-position:-2px -68px;}
.rt-social-buttons a#rt-twitter-btn span {background-image: url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);background-position:-2px -24px;}
.rt-social-buttons a#rt-facebook-btn span {background-image: url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);background-position:-2px -46px;}
.rt-social-buttons a#rt-rss-btn span {background-image: url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/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='{&quot;width&quot;:420, &quot;height&quot;:405, &quot;iframe&quot;: 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='{&quot;width&quot;:300, &quot;height&quot;:430, &quot;iframe&quot;: 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.. ヅ 

Labels: blogger tutorial, template hack, Widget

Thanks for reading Membuat Button Social Slide Disamping Blog. Please share...!

14 Comments on Membuat Button Social Slide Disamping Blog

  1. Siiipp bang Dadan.. saya kasih bonus +1.. hehehe.. :)

    ReplyDelete
  2. Kunjungan balik nih Bang Dadan.. sekalian follback.. hehehe.. :)

    ReplyDelete
  3. Terimakasih kawan.. oke tar ane follow back..!! ヅ

    ReplyDelete
  4. bang ko hasilnya punyaku jdi gak braturan apanya yg slh ya bang ?? :(

    ReplyDelete
  5. owh, coba saya lihat dulu blog'y??

    ReplyDelete
  6. terimakasih bang...follow my blog juga ya ...slm blogger

    ReplyDelete
  7. Oke,, saya udah lihat blog kamu, tar aku ksana skalian follow..!!

    ReplyDelete
  8. Andriyani Chie@ Aku udh follow blogmu, tp pas aku mau koment, kotak kometarnya gak ada. ywdh disini aja:
    kamu cari kode ini: left: 10px;text-transform: lalu ganti angka 10px menjadi 20px.

    ReplyDelete
  9. gadget di atas kalian bisa pastekan langsung ke GADGET ;;HTML/JAVASCRIPT..
    css nya kalian tambah <style> css di atas </style>..DIV nya biarkan aja gitu ,, dengan demikian tak ada edit html lg ...salam semuanya.

    ReplyDelete
    Replies
    1. Wah,, makasih tambahannya sob, salam blogger..!!!

      Delete
  10. Nice info gan

    http://blogziip.blogspot.com/2013/07/12-tanda-cowok-jatuh-cinta-pada-cewek.html

    ReplyDelete
  11. keren gan visit ya www.donesiarony.blogspot.com

    ReplyDelete
  12. Keren banget Gan ..

    kunjungi blogku juga di http://taugi.blogspot.com/

    ReplyDelete

Back To Top