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

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsCfBvjcmWdptSa4-LbgVdDUXqpAyXM7n9yDDnCYd2EZcV-aSgg3AhSZY5EorsNbYJG1SCTHSjUllO4GOJXtqfpNGKsVf8i2fcHSLkZKOTT6rwS5fEtnSKEBafD6iDck5b4-mcVbL17LBY/s1600/Facebook+Icon.png') bottom; text-indent: -99999px; } .TNT1:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZdzoedtb_d6AVv-K0bas_WRdG2Q4p9F6bdu9ZPpFoVTnF2H-eCi1PYZE-xugz4rvtwDAESCtAAmfzNVq2v0t2fMtTZWccg9H5v2yLIqfSUrXXjADEdD3aeb8ZDU5yZAxc0CFysC_N8L22/s1600/Facebook+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT1" href="www.facebook.com/My Note"></a> <style> .TNT2 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxxJ5yQ2dEbjjYaWNAG-_nluiIwTpXeGxK4CSqvd7IpXqKkEvGQi-_tNEsge5IU4Jxl6UwzoJYqd0-tYPxy9KWCSHXqdNvsxaNJTHkkK0_oAIhvC5ARYnN3RRRqm64-bCnE21EEYtA_to2/s1600/Twitter+Icon.png') bottom; text-indent: -99999px; } .TNT2:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChk37gZITzpjwpU7OW8viT_zpgajvM478-CPwDPqO1HAQ8I2yZMESECvHdGpPJ5Q4Z0KJ9uuhrS5i90eKO4co0bfLVMbbaZ_Yo0IPwHrfWmDK78PX-8MaFbQLPauuLQ2lwod9SoqNPk_O/s1600/Twitter+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT2" href="https://twitter.com/My_Note"></a> <style> .TNT3 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7_gz5rrYqVhMFypCSa_8FA1VAhyphenhyphenNVdJvCvUpBYIGZP0Vi5vkpD2qGIMRitGYlr_X21P3-pBLY7z5HxSyk3KH1LT0jpAkdCmgLeUJdn5h7THlf5LgZHW0TXnDgwKMt8_DX1CNTHBG2D2Xb/s1600/Feedburner+Icon.png') bottom; text-indent: -99999px; } .TNT3:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslvQRwLRJcevZuqXC7-Kj5h_hXgiUGMAXaMcgU8vGPfGcSxf0L9ZLslLirFL_TpCWqtg2xhRM4U6oZejSEwHmpRJlm5dRDx2i1HAs_tj_fvcPrbWGCWQxlaL-EmWhvOWX3jX8LkgAA9X1/s1600/Feedburner+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT3" href="http://feeds.feedburner.com/My_Note"></a> <style> .TNT4 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv3BXMC6_6nU03DqwM2CmXEROiEtf9SC6m5VAj1Ps1WEXciqRdBOxNw_Osl_a2UrjPPJpiVJwh-BZ-7ElOsh82kD-LUsvvXSblmTn3QwuTPumWwqkom3P4pSupkyZMdvz1jUjRChuh9zus/s1600/Google+Icon.png') bottom; text-indent: -99999px; } .TNT4:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT5uPQpkVEfeJO00qQjG5xDDp4AmCjUtrcaRb7Ag7ONYotP2QSCqr7bsFp1LNMI_1t3DzLoACq7H1uL2BPwLjNmsBBcVxbt4fD8MwSFMD7BdDYEGrBXKRWzBKBs7MTUi0J3TmZN2ezTjYS/s1600/Google+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT4" href="https://plus.google.com/Kode Google Anda"></a>

Ganti kode yang berwarna merah dengan username masing-masing dari Anda.