Cara Membuat Tombol Menu 3D diblog

Yups, kali ini DUNIAKU akan berbagi tentang Cara Membuat Tombol Menu 3D diblog yang baru saja saya dapatkan dari penelusuran saya di dunia maya. Dengan adanya tombol ini, teman bisa menghemat tempat pada tampilan blog teman, karena tombol menu ini mempunyai posisi yang unik menurut saya karena posisinya berada pada bagian samping kanan luar dan tombolnya akan muncul secara otomatis bila dilewati cursor. Jika teman penasaran ingin melihatnya, tenang!!! Contohnya ada pada blog saya yaitu DUNIAKU. Hehehehe. Coba teman lihat tombol yang berada dibawah buku tamu sebelah kanan. Nah, seperti itulah hasilnya nanti. Yups, mungkin itu saja pembicaraan kita, berikutnya langkah-langkah bila teman ingin memasangnya diblog teman.

1. Masuk atau Login ke Blogger teman
2. Lanjutkan ke Tata Letak 
3.  Lalu klik Tambah Gadget lalu pilih HTML/Java Script 
4. Kemudian Copy dan Pastekan code berikut ini ke dalam HTML/Java Script tadi dan klik SIMPAN>>>

<style> .TNT-flt-wdt { position:fixed; right:10px; top:50% ; } .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/AVvXsEjy9s9Amd13euw5qtUOtrWUmmfwQkSxJUTf2DIATjxeAzaOPAGWSW0IBcO0frGjavu-OSJEORPU-y9k04uQAnSI7H5lezxOWkkRo5wr5r7VGai2dTZTaSonkaRBOe3Dendf8Qde5kufgQNo/s1600/Facebook+Icon.png') bottom; text-indent: -99999px; } .TNT1:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZI15irdajkqZU0x8-5IsuiaEVaYq-0_xGhFviOsHxutJ7wU10X3Y1Df-mVRX3pp0nSWu3EDIX-KpDbUVNZLc5IcKxvwA4Ouhyphenhyphen8A_-WlQ3p69FWNJ6n1xCHBnQoP80RCyzU7-zSA5DT8h/s1600/Facebook+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT1" href="https://www.facebook.com/iman.tamnge"target=blank"></a> <style> .TNT2 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht36U0xbNav5FW1PQxOJzhhCS1j_wigB4y5xO97PmcuuTf9tQ3UmhmTmdlr7t4vzM8j_YEpSWGcm77Fm5ItcyacK2tQaq6MRiryxwtSAmIYyiweKB-Ujbz-NC6WcDbpfzcv1VxojcMC4eY/s1600/Twitter+Icon.png') bottom; text-indent: -99999px; } .TNT2:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3JHfCoHL2E3fE2_KFpI2KrcefUaPAx5r_FtZKR5lK6X8SAyxjeDlylwvGOZ5rXBrvSaxNuepE8pBJmeg6-YQYOpv3b55xBBh-Hgw7Yg3X3Ixm_twZHkGwdoGbMIHXKV-pXKrQf_KFXgB/s1600/Twitter+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT2" href="https://twitter.com/iman_tamnge"target=blank"></a> <style> .TNT3 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWI7vDk1Iei7_GbaaJ8SUwz7uVZMZr6i-gY8vdEcYfrbZ-CtGYVh-RLiidJl3v-jGyZ8uiDEt2R01aiRYy8yf3Ny7Ncdj-8Yz7qJNfNhm_rZ6zCxwpqrVoJU8CZTd9uV_easbHAI0bK7N/s1600/Feedburner+Icon.png') bottom; text-indent: -99999px; } .TNT3:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR5ERpcS5QsYAB_rMF1A9QH4JYdMwP37bx-VjePVyy4tB9JVre4DzPdZ57DVlNRQGqVdryTEaE1Gpor4q9BL_2NmtkdVvtdV0-lsVesrW7fg6wY89gTMw6XDMLDV6fOaxqyLLaxxJ8MXMS/s1600/Feedburner+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT3" href="http://feeds.feedburner.com/blogspot/VsAfQ"target=blank"></a> <style> .TNT4 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipUOomzLme8aPNUUxImQG5I-vtFu1mLDsJw6C-Ns7paQ2b__I69dEtrT6G6p6o7ZESDPBtEmQydpq9fQ9WGRpfA8F9CQspBC34kO-MmRrd9XTeZwd6qb8adoy-ghqkaR-xtFWA4RO3JbJB/s1600/Google+Icon.png') bottom; text-indent: -99999px; } .TNT4:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemzp6kTfHkzNHqxmR55vCngqqwXmBWD0wiX1AULwbcZaCKbUWMNGOThJ5Ebb6DsOJ0ru5dgye4PE_OCYboTSJ5Rm9k8we6yAF7kGV5D8IirDRtJONMmuGlO1nC0BSn7YB6R4XeLDVjHFb/s1600/Google+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT4" href="https://plus.google.com/u/0/106730624420841821594/posts"target=blank"></a></div>

Catatan :

“ pada tulisan yang berwarnat Merah, teman bisa menggantikannya sesuai dengan keinginan teman”.

Mungkin sampai sini saja penjelasannya mengenai Cara Membuat Tombol Menu 3D diblog, semoga bermanfaat untuk teman dan keluarga. Hehehehehe