Minggu, 09 September 2012

Cara Membuat Menu Facebook, Twitter, RSS dan Google Plus Melayang Dengan Efek 3D


By on 10.52

CSS - Menu ini berfungsi untuk menghemat tempat di ruang blog Anda, tentunya dengan efek melayang, dan disini icon dari Facebook, twitter, RSS dan Google plus berbentuk 3D. Saat pointer menyentuh icon tersebut secara otomatis akan muncul efek 3D dan hovernya.


1. Login ke blog kamu.
2. Pilih Tata Letak > Add Gadget > HTML/JavaScript.
3. Copy kode dibawah ini.
<style> .TNT-flt-wdt { position:fixed; right:10px; top:36% ; } .TNT-flt-wdt img { float:right; clear:right; margin:1px; -webkit-transition: all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .TNT-flt-wdt img:hover { -moz-transform: scale(1.2) rotate(6deg); -webkit-transform: scale(1.2) rotate(6deg); -o-transform: scale(1.2) rotate(6deg); -ms-transform: scale(1.2) rotate(6deg); transform: scale(1.2) rotate(6deg); } </style> <div class="TNT-flt-wdt"> <style> .TNT1 { display: block; width: 64px; height: 64px; background: url('http://1.bp.blogspot.com/-tx_vF9eQ4-0/UDTfscLT45I/AAAAAAAABnc/xpo5WKfAR5M/s1600/Facebook+Icon.png') bottom; text-indent: -99999px; } .TNT1:hover { background: url('http://3.bp.blogspot.com/-CW5UXw9tlJ4/UDTftHq12XI/AAAAAAAABnk/OYNJ1Z9KDi8/s1600/Facebook+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT1" href="www.facebook.com/BLAZERBLOG"></a> <style> .TNT2 { display: block; width: 64px; height: 64px; background: url('http://3.bp.blogspot.com/-xs-A-sxI5Rg/UDTfxKZSl5I/AAAAAAAABoM/4lSjbIAwLn4/s1600/Twitter+Icon.png') bottom; text-indent: -99999px; } .TNT2:hover { background: url('http://4.bp.blogspot.com/-Av3BgeByurw/UDTfxgVGqYI/AAAAAAAABoU/4BmnsYNK6JE/s1600/Twitter+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT2" href="https://twitter.com/blazer_blog"></a> <style> .TNT3 { display: block; width: 64px; height: 64px; background: url('http://4.bp.blogspot.com/-1s1g_MazmMc/UDTftg_jb1I/AAAAAAAABns/2JhD1VYDYfc/s1600/Feedburner+Icon.png') bottom; text-indent: -99999px; } .TNT3:hover { background: url('http://4.bp.blogspot.com/-464885HODoE/UDTfuVzBYKI/AAAAAAAABn0/-yMgRXt2hUA/s1600/Feedburner+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT3" href="http://feeds.feedburner.com/blazer_blog"></a> <style> .TNT4 { display: block; width: 64px; height: 64px; background: url('http://2.bp.blogspot.com/-N5kf9ym1mWk/UDTfvIvzklI/AAAAAAAABn8/jCexUi767Ko/s1600/Google+Icon.png') bottom; text-indent: -99999px; } .TNT4:hover { background: url('http://3.bp.blogspot.com/-viLihCxmAMo/UDTfvlGxnzI/AAAAAAAABoE/kfF_v8Rq_7U/s1600/Google+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT4" href="https://plus.google.com/114849896378202892510"></a>
Ganti kode yang berwarna merah dengan username masing-masing dari Anda.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

11 komentar:

  1. Anda bisa buktikan sendiri copy semua kode di atas lalu paste pada situs web ini Editor HTML Nanti ada tulisan hapus semuanya ganti dengan kode di atas

    BalasHapus
  2. Biar tampilnya dipinggir kiri blog kita gimana caranya mas?

    BalasHapus
  3. Cari kode ini position:fixed; right ganti kata right dengan left
    Selesai.

    BalasHapus
  4. dah ane coba gan.. ramuan berhasil hanks

    BalasHapus
  5. Makasih gan....
    Visit here >> mynameisvalentino.blogspot.com

    BalasHapus
  6. Ijin Sedot script kode nya ya Mas...,

    Kebetulan bgt memang saya lagi nyari gimana cara buat form facebok, g-Plus dan Twitter melayang...! soal keren itu model nya...

    BalasHapus
  7. ko ane ngga bisa di simpen ya gan..?

    BalasHapus
  8. wah betul2 sangat menarik yah.... :)

    BalasHapus