Cara Membuat Menu Facebook, Twitter, RSS dan Google Plus Melayang Dengan Efek 3D
Ditulis Oleh Fajar Lesmana | Minggu, 09 September 2012 | 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.
1. Login ke blog kamu.
2. Pilih Tata Letak > Add Gadget > HTML/JavaScript.
3. Copy kode dibawah ini.
Ganti kode yang berwarna merah dengan username masing-masing dari Anda.<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwXNHfV_NllqBw0SfLnv47zQMrHzBRO1_gzfaEKeVdLYjGUV2LDKoc3lcZrVVeKcCZMrpftVNB5ekC3TLLSJz15VzFCVBSaVbuWFgM-moMyzPb_wk0ozK_rzw4oEggRRpph41VzfrpTQ07/s1600/Facebook+Icon.png') bottom; text-indent: -99999px; } .TNT1:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkAbES1wIFp3YNCAIQpDq2ouqMlDA-9pyk1qdikdSTqhEjqtH_-QP1XPUpVkFVk8dlDoHpJNkJjCGsAEVDdA2HngiudAfbtezawR2s1IhCEZFIWfiydMZ3YJxis7PIgLMeiYxLvtEVm177/s1600/Facebook+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT1" href="www.facebook.com/dumai88"></a> <style> .TNT2 { display: block; width: 64px; height: 64px; background: url('http://3.bp.blogspot.com/-xs-A- 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>
