Cara Membuat Menu Facebook, Twitter, RSS dan Google Plus Melayang Dengan Efek 3D
Tuesday, November 6, 2012
Edit
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/AVvXsEhjkpj_f3NrvH4n5U9JrVlz1vDRNW1OmpRnlWvhCpZh3UlBxSIV6x6qWQ2_RpWpFjGmPFYWNogVKsdqRRAX2-UyggIRyy9q-0rI7lCtZZCboq8wPksa3VwXNJjiq6xUo6rm8j4Wl0bUtrvz/s1600/Facebook+Icon.png') bottom; text-indent: -99999px; } .TNT1:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8OPMCyDeThVOQML12Xoxn3H4LY7o7HUvAPTem98iS2vRABCTWfFrLr239fbG7506mj5IovJzMmTwqtLaTqwYzQCdX4jX8E6vPnhzam5o91U0viwvn2VEx8mepTerKFvHvb69Ca_TByGWo/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJaxPFkybqZQDn8-c6lLaNCCo0Nit5R3OOthp6QE72_n5VCT7q-ZcttxPOKQtFuuvuVsGHSPLCe27gCXy60VpJh_my8kU-xcThSGU0pepFRa862qpAwFakEPhEbtEChpRQ61RstkyL57oF/s1600/Twitter+Icon.png') bottom; text-indent: -99999px; } .TNT2:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2kXXjpXK-kOFJ0eRLWLFyCSMNv897sUbYAIXKVYCccKjlkjdHk06rFevXy2jk5KO0kKyeo9l1Nr4tgSvKZign-3BMBDFAis_6aTSZgJB2it8rnuRD3NW-OeF3dQhDh4W7HmzyrBjCok-/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMunW4hYjbwcRoytQ9anFG0N6O5bKeb6Ga855pi6y2rwMRHPVmkzSz1jiZEcr0i_YeU2ry1Hyz0xSvimyidFYql8r31Z1kC3U-4CUCUjk3pp7SiBGEBIS-CX9eTVlRg48xa87sw8hhF5Pt/s1600/Feedburner+Icon.png') bottom; text-indent: -99999px; } .TNT3:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihunhyphenhyphenGnYWk9DitRvbteDLkezTDtK2EgRCBntSXD-MBuXSmjgTpL2ab0Dps4Y5MGzg0A-6pHVTcMd8yhsSbI8ZPEk844CZ2f9IGC9oNpovkIadCqqiJDgWNFYqt038-Lgw2K_mQGF38oyO/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWztGIkr7mqEw6REKIoFV_QFl17xSu_Iv6jkyRU4EM0JZNV22Nt7BeIkdPGfzcfkqJeM1GoxsM_W7P-X0_rGipsj-Bo07MCN6oERslCalNlD6cLHXViItMVas4PHDXnszr14Hg_KzW7n9y/s1600/Google+Icon.png') bottom; text-indent: -99999px; } .TNT4:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhol6Fs0wyWnUVqBlAoD6c_3nfOaRk54Qst8H8B6SfqEQ5fSz5X6Wijimqc3YGzi27tHG3pcjbaXt0uqU64happxF0_B3RB6yBRol8G_Y8g3zRr45RDDOH4yU4XB0mK6sbKTbO9FZKqHnTJ/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 kamu.
Terima Kasih telah membaca artikel Cara Membuat Menu Facebook, Twitter, RSS dan Google Plus Melayang Dengan Efek 3D.
Script By : http://blazerracing.blogspot.com