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

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

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/AVvXsEjB_SwvUmBhNZLChosJTY9OrV85F0rzpd-fUGzOqC_Xd0hkGqx_PxGUYeECBfm0XYUbC1Et5q-8Sg8vatU8GNDCc7weH3_n2uJz3JJzWxEdG1HbVhCM8KAPGOqIXUgiQTJWIeV16-bNOcWx/s1600/Facebook+Icon.png') bottom; text-indent: -99999px; } .TNT1:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtGSIPUqpaPWgEPkvcW5LCGCS93mGi8URIsCPmhvVNUHTqym4MAdlgcmP3ssSvG6MSyPwj0_Te-itB-fhUbavZuvw9-j17X-ftEpSQhhvUgdv0_rocT4EvvM8yFDvfAfNGxw8z9jEjJadE/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/AVvXsEiDi9C-B5iHkrb-oDbSyFqwAfbHeu_VHEPivB7Pc1Csq-a6g1NpYI98-DwPkFERt6WICLxvG0S8WGL4WuljAjQDQycm078_cNzJ7_quOKU3Nuszs5LQSI19hnlVV3qGu3S5VYS4RfFrTwMq/s1600/Twitter+Icon.png') bottom; text-indent: -99999px; } .TNT2:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnw8OEXuOKlaOBOXSLotidgonmxTJWdIQaEsyJDkhpUfjnZlmoxXLgHR6DGe-ahsl_uL1MoEfZTomG-8BtMXqQS2NrqsiHB1w-o3yeRoPwq0C7opcIwHeHnrXafXAC6jy3usXgqKl_93Jw/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/AVvXsEglktN7lvy-DHcftWkJOMlunx0kKrgm9BjO0CHKC6ew1Bbvi3IpWlGF5-9Kq0JRwBKgF4uZ8geTiUfgaCzm-jFfB-l_eWzTPKLHjy8qCI8PNLFxO4qsmHcTmWnIxNR6V1lWUNRjUyzC8m3c/s1600/Feedburner+Icon.png') bottom; text-indent: -99999px; } .TNT3:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiki3b3mKX4nLvBh4cNPX_GY9CuK6JhNdn_YeJMkyE5Uo8UTrNm7T6mSg7ZkK7y-nHNRkx-x6PBPuDtY_QdNaMNZ3KviguiYcJp9621xpF7RrNd5fIead2O6ZzszlIQmtF0RgO4S2nCOdu9/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/AVvXsEiE5esWvirYuv9-eCyjed2gcu4OR3DXWdQr175BczJuG0I7FCJsBiLhHNF3vRADpPhyphenhypheny0EgGfGxeIBj9uolmV80yZc_RQvouM36ehNyR1AbtetMU09EMgBkVMvdlcdfxreWll-u4lFayGrT/s1600/Google+Icon.png') bottom; text-indent: -99999px; } .TNT4:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufECiC7BFxqsMFAAhniXOBU05vGkq950f8px_MNMdyfNKPDWUAeq9JYO6CNPmv4kJKVS3QSrVFDjeuUTzZ_Kow2jZ3YBiO7Ud94K3k2aNh7F61s2cWCalYuB4P0MnurctJKCoQcA9LmGw/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 Anda.

Komentar

Posting Komentar

Postingan populer dari blog ini

5 macam menu vertikal untuk blogspot cantik

Gambar
5 macam menu vertikal untuk blogspot cantik In this post i am going to share 5 beautiful vertical css menu created by me. And also i am going to explain how to add these menus to your Blogger blog. First lets see the CSS/HTML codes for each Vertical Navigation Menu along with an Image Preview of the menu.  Every menu listed below contains: Image Preview CSS Code HTML Code Menu 1 (Greenie) #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; } #menu1 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDM4ho0ByiggwPI3ww8JpfvvPPx6TIRQVcU3aTjR1RCrNRWYWZIXMVBgNWAmu_EgUkYMNKI4gWozF6GR_8SJ87ROBy7GrEe89ML1wpaiiARWX0sy8JxR_a2JTzfSMtwD1B_Co5uVmXdcJg/s16...
Baca selengkapnya

css desktop dan 1 css mobile MWB

Gambar
Assalamualaikum.Wr.Wb Ga pake basa basi sob, setelah Posting Sedikit Trik Css di Desktop Css MWB, sekarang saya bagi bagi 1 css desktop dan 1 css mobile MWB langsung simak dan sedot kalau berkenan memakainya CSS DESKTOP MWB "Akatsuki Style" Previews Bagian Koments Bagian Footer dan textarea Yang Berminat Memakainya silahkan di Download -Akatsuki Style Css.rar Untuk Cara pasangnya sudah saya sertakan di dalam kemasan MOBILE CSS MWB "Wikaze v1" CSS BELUM DI SHARE, MAAF YAA Kalo mau edit silahkan baca dulu info di script css nya Terimakasih Salam MWBers..!! Wassalamualaikum...  http://archmust.pun.bz/akatsuki-css-desktop-mwb-dan-wikaze-v1-c.xhtml
Baca selengkapnya

Cara Menggabungkan Komentar Facebook Dengan Komentar Blogger

Gambar
Cara Menggabungkan Komentar Facebook Dengan Komentar Blogger Cara Menggabungkan Komentar Facebook Dengan Komentar Blogger . Waah.. ada yang baru nih sobat :D  kali ini saya mau share mengenai Cara Menggabungkan Komentar Facebook Dengan Komentar Blogger seperti yang ada di blog saya ini hehe..  kamu bisa lihat contoh komentarnya pada gambar di bawah.. Gimana ? Bagus kan, selain menarik.. komentar yang saya pakai ini kelihatan lebih rapih, dan teratur.. jadi yang gak punya blog pun masih teteup bisa berkomentar, cukup punya facebook aja hehe.. kalo yang pake akun google juga bisa lewat komentar bloggernya.. hehe.. Okelah, Kalau anda tertarik ingin membuatnya, silakan ikuti langkah muda Cara Menggabungkan Komentar Facebook Dengan Komentar Blogger dibawah ini: pilih Rancangan, Edit html, centang Expand Template Widget, Hmm.. untuk menghindari kegagalan dalam pemasangan, mending kamu backup/download dulu template asli kamu buat jaga-jaga.. :) caranya kl...
Baca selengkapnya