Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Rabu, 23 Juni 2010

Membuat fisheye menu di blogger dengan css3

Kategori : ,
Maraknya perkembangan CSS3 membuat saya bersemangat untuk belajar css3 tersebut namun sayangnya ga ada yang mau ngajarin, akhirnya terpaksa saya harus belajar sendiri. Sekarang saya akan menjelaskan tentang "Membuat fisheye menu di blogger dengan css3". mungkin bingung y dari nama atau judul trik blog ini, mungkin fisheye yang membingungkan sobat, fisheye itu hampir sama dengan Dock Menu pada windows namun beda-nya fisheye ini pergerakannya kurang halus namun tidak memberatkan blog (masih bingung), oke deh kalau sobat masih bingung langsung aja kesini, kesitu atau kesono juga boleh oketrik.blogspot.com.

fisheyeoketrikSekarang kita lihat ke langkah pembuatannya yuk :
  1. Login ke blogger




  2. Masuk ke Rancangan >> Edit HTML


    fisheyeoketrik



    fisheyeoketrik


  3. trus cari kode </body> dan taruh kode di bawah ini tepat di atasnya


    fisheyeoketrik



    <style type='text/css'>
    .navo {width:100%; position:fixed; _position:absolute; bottom:0px; center:50%; clip:inherit; z-index:+1000;}
    }

    ul,li {
    margin: 0;
    padding: 0;
    }
    ul {
    text-align: center;
    }
    li {
    display: inline;
    }

    .navo a:hover, a:focus {
    z-index: 200;
    }
    .navo a img {
    border: none;
    -webkit-transition: all .2s;
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    }
    .navo a:hover img,.nav a:focus img {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    }
    </style>
    <div class='navo'>
    <ul>
    <li><a href='#'><img alt='Home' src='http://3.bp.blogspot.com/_QfoNn403afE/TCGSe-HEHnI/AAAAAAAABGQ/H7rBmnQxrz0/s1600/Home_64x64.png' width='50'/></a></li>
    <li><a href='#'><img alt='Daftar isi' src='http://3.bp.blogspot.com/_QfoNn403afE/TCGSQ2JMdLI/AAAAAAAABGA/FVnvD8lA3mI/s1600/Books-64.png' width='50'/></a></li>
    <li><a href='#'><img alt='Facebook' src='http://3.bp.blogspot.com/_QfoNn403afE/TCGSXu21o6I/AAAAAAAABGI/dpVBItaQjBU/s1600/Facebook-64.png' width='50'/></a></li>
    <li><a href='#'><img alt='Twitter' src='http://4.bp.blogspot.com/_QfoNn403afE/TCGTSSBzxnI/AAAAAAAABGg/lqA66hgIwAE/s1600/icontexto-webdev-social-bookmark-09.png' width='50'/></a></li>
    <li><a href='#'><img alt='flock' src='http://3.bp.blogspot.com/_QfoNn403afE/TCGSmmD9teI/AAAAAAAABGY/20Y3X4rP0hE/s1600/Orange-RSS-Feed-64.png' width='50'/></a></li>
    <li><a href='http://oketrik.blogspot.com'><img alt='internet explorer' src='http://oketrik.googlecode.com/files/Logo%20Oketrik.png' width='50'/></a></li>
    </ul></div>


    Penjelasan :
    • http://3.bp.blogspot.com/_QfoNn403afE/TCGSmmD9teI/AAAAAAAABGY/20Y3X4rP0hE/s1600/Orange-RSS-Feed-64.png >> dapat sobat ganti dengan gambar icon RSS sobat sendiri, namun apabila tidak punya y tidak usah di ganti
    • # >> harus sobat ganti dengan alamat RSS Feed sobat, misalnya : http://www.oketrik.blogspot.com/feeds/posts/default
    • http://4.bp.blogspot.com/_QfoNn403afE/TCGTSSBzxnI/AAAAAAAABGg/lqA66hgIwAE/s1600/icontexto-webdev-social-bookmark-09.png >> dapat sobat ganti dengan icon gambar Twitter sobat sendiri, namun apabila tidak punya y tidak usah di ganti
    • # >> Ganti dengan alamat akun Twitter sobat
    • http://3.bp.blogspot.com/_QfoNn403afE/TCGSXu21o6I/AAAAAAAABGI/dpVBItaQjBU/s1600/Facebook-64.png >> dapat sobat ganti dengan icon gambar Facebook sobat sendiri, namun apabila tidak punya y tidak usah di ganti
    • # >> ganti dengan alamat Facbook sobat
    • # >> ganti dengan alamat Daftar isi blog sobat
    • http://3.bp.blogspot.com/_QfoNn403afE/TCGSQ2JMdLI/AAAAAAAABGA/FVnvD8lA3mI/s1600/Books-64.png >> dapat sobat ganti dengan icon gambar yang menunjukan bawha itu adalah icon daftar isi, namun apabila tidak punya y tidak usah di ganti
    • http://3.bp.blogspot.com/_QfoNn403afE/TCGSe-HEHnI/AAAAAAAABGQ/H7rBmnQxrz0/s1600/Home_64x64.png >> dapat sobat ganti dengan icon gambar Beranda sobat sendiri, namun apabila tidak punya y tidak usah di ganti
    • # >> ganti dengan alamat blog sobat
  4. Setelah itu simpan dan lihat hasilnnya
Mudah dan simple bukan cara memasangnya? tentu soalnya Trik Blog kali ini hasil modifikasi dari Membuat Float Teks Berjalan dengan CSS3 hover, dan namanya adalah fisheye. Mungkin hasil modifikasi saya tidak menarik tapi lumayan kalau sobat hanya ingin mencobanya. Terima kasih dan Happy Blogging oketrik.blogspot.com.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

17 Komentar untuk Membuat fisheye menu di blogger dengan css3

terima kasih atas ilmu css3 nya sob. .
semoga bertambah ilmunya. .
aminnnnnn

@M Chandra >> sama-sama sob, oke sob, semoga aja bertambah biar ane bisa berbagi heheheheheh....
aminnnn

css3 ya
waduch bingungnya congcot itu
di IE belum suport
hmmm jadi suka bingung
liat dech blog congcot
nama headernya juda pake css3

@congcot >> bener kang, kayanya IE g bakal nge-dukung, keren header dan blog-nya kang....

waduh syg bgt ya gk dukung di IE. tp gk pa2 deh kan IE skr jrg yg make....

@muzzy musthofa >> iy6a kang IE g dukung css3, lagi pula IE kan jarang orang yang pakai

update lagi nech....wah tambah bingung aku dengan css3 nee..hehhehe
owh iya nomer hp km berapa...soalnya akhir bulan aku mau ngirim pulsa hasil dari iklan ni narutobleachlover....ga banyak sech tapi yang penting berbai aja ^_^
balaz ke email aku saja ya ^_^

Waaah keren nih... bookmark dulu ah.. :))

Dicoba dlu sob...
Ane praktekan di blog experimen..
he..he..
thanks atas tutorial nya :)

Pumpung lagi hotspotan ane sengol lagi iklannya sob :-)

kurang demo sobat. biar kita tau apa itu fisheye

@TUKANG CoLoNG >> trik dimari dah ane kasih demo semua gan, coba ente baca yang bener....

tips yang sangat menarik.....nice info mas....:)

keren tutornya tanks

ini baru tutorial mantap.sukses di praktekan kang terimakasih ya..kunjungi juga
http://pelangiholiday.wordpress.com
http://pelangiholiday.blogspot.com

kalo di wrap-header nya udah ada menu lain harus dihapus dulu nggak?

http://kafast.blogspot.com