Cara Membuat Menu Facebook, Twitter, RSS dan Google Plus Melayang Dengan Efek 3D | SDN Pesantren Hias Blog

Senin, 27 Mei 2013

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

Menu ini berfungsi untuk menghemat tempat di ruang blog kamu, 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/AVvXsEhZJeUHAJ303HKPKWUdQJzsqJ3OFuJ_XfrwrGBMCsi0yAWIlal0zgzUGYYuw9Bmq4wzTYK3LroZfvh108-aRgu6dDKXqxF-IZFm71AvTlGKCoePC7l7AWrehT7gZPPjWbteQR_bhl6nILkX/s1600/Facebook+Icon.png') bottom; text-indent: -99999px; } .TNT1:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW84tg_Ku_TwIi7wFnwD8rpTW-2_-MO2uHz_gLYSj2ojRdE_BskWLb9b5JNN9rSJlc9YaF0XRumJA_rj4QtiGtEJLEOwV92Sg_e0w7OpUa1ydUdtxPQZCi-3GuBXKDEOv0rwMFgd0p8vQP/s1600/Facebook+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT1" href="www.facebook.com/arieadie"></a> <style> .TNT2 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieB6sCJIdeSVWXYHb_3TxRP3HPl2ettGBIjOMcQPO7XfBOa3mScgpIo9_-mmVP5g4b7eBbPhacI7QcKArML6fH0YqieDBrNvc1HtwHw7Pg5YO8S_QpY6lwnCSrVBEKvZRUnCOewC4MysaI/s1600/Twitter+Icon.png') bottom; text-indent: -99999px; } .TNT2:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnL-ubSIyvOdKOJ_a7vUv03Db-Zifcj14uboP2bCTwkJ4MHt2JftaN3lTo-CKHfbQky1YrEMv9Yrta_aD-MfoBHIHbG9-S2gPS_N3K-eWOtwnWuLPIWZ30tMopwBQHgRlQhv70xjb4uFkZ/s1600/Twitter+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT2" href="https://twitter.com/lindamarlina40"></a> <style> .TNT3 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUiP1bwHf_-365mWaxgIspH7S75pkjHVraTuzM1L2ZZ3bMIpTCXO7eP79ZDsEpOI83WDl0tS1YqKr1IBZa2aqE6mmZXgv2250rrBaqYYPhwuu7U-aHgab9SDE_1JJ5s350YbvLdukL9F5z/s1600/Feedburner+Icon.png') bottom; text-indent: -99999px; } .TNT3:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjkKZ1o07OuVyu3s5PAl6CgjOEcj5lpBkXEM5Za0QrnKWcDqzhGXS-8vis0g6BwRFuQgWu3qmLN05dgvVVjo32Q8d606rHRbwHrhcAn_CiT9VPVoSLOwTEUPmschRGehfuZ1UBvgWp8EGh/s1600/Feedburner+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT3" href="http://feeds.feedburner.com/pengembarabiru"></a> <style> .TNT4 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISgp55xkcT6eCuFqkhjsDV6dZn7lKGSYCXUHHX7fAGz8uDpXnwW6MXoF0-EuCfcDNBn-BZkRUgdM85sSyDp4hmSn4bltdxw9q8u6LufalVwZpMISoXRli111OmhaWBeKcEcklfGkX5vWO/s1600/Google+Icon.png') bottom; text-indent: -99999px; } .TNT4:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuPRTUpPOnrgV7oZgub1Sg7RuJJIWrfzlTDOyWS2FDjvkh_LrdTWF5StnpExE7zlsaDczVjQV_oDj-qb3Dyjl9ZYOG1dpRdPgbzxiokZOi0-4hfn0HNE2X7BWN30dYY-qDIiduJxnHn7KV/s1600/Google+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT4" href="https://plus.google.com/114849896378202892510"></a>

Bagaimana mudah bukan?

Author: Mohammad

Mohammad is the founder of STC Network which offers Web Services and Online Business Solutions to clients around the globe. Read More →

0 komentar:

Langganan: Posting Komentar (Atom)