Membuat fisheye menu di blogger dengan css3

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 .

Sekarang kita lihat ke langkah pembuatannya yuk :

1. Login ke blogger
   
   
   
   
   
   
   
2. Masuk ke Rancangan >> Edit HTML
   
   
   
   
   
   
   
   
   
   
   
   
3. trus cari kode </body> dan taruh kode di bawah ini tepat di atasnya
   
   
   
   
   
   
   
   <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vAEujUDIOizSZAA7zFivUZQHtkKaABeW5tseeg-rkK2_Cwai9hKqMjAewNsQwz92BM1E-R5Ckq3IMnJf_Ab0FnjtyPXuJp1mwzPVo5IXFQNOhLH5r5uJxl01uBqZcxB3elw0jxQYJZPp/s1600/Home_64x64.png' width='50'/></a></li>
   <li><a href='#'><img alt='Daftar isi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2g5ZTI6dv1BGc8RImT2bMH8PPwUWC307KrYarLAR5HF69khDVSG5FtZ1mKWJWGpQpiYxlCrS4-gRK_t4H-B4sW8BvavZwbQaSBkyxJsncno4B-NUnmSO-vfFZJpd1HlSHehQpx5VSBjIY/s1600/Books-64.png' width='50'/></a></li>
   <li><a href='#'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDI4-HK5N4U0f61fx_EPN-Us9CSCMiNM8b3drv7Yxl_1Xxxo15M2nFBdjl2UNjDf0Ewvn3DisAfKZXddB1ggk6sYNqNV2ze6ValtsRbejRwDknSca8ho6A4_24bw1wrCNXutY1MDQ3M83m/s1600/Facebook-64.png' width='50'/></a></li>
   <li><a href='#'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLI59U2dM09Yakf04E2ZPGOQy38heOkrqgi7fK61ythBeATs8I5HTh_MP1XKIabfKs9PpRi__8ZeCxzdXcrWh0oy8h8f4PBwWDfDi3SHBtFXllg30r4dLjHlt_DIqF-y_k-UJBd5X7_89f/s1600/icontexto-webdev-social-bookmark-09.png' width='50'/></a></li>
   <li><a href='#'><img alt='flock' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXpik-AHF0hDmlx1mMWw0w31Mw6T6Q0q_61ebzVUuxbiYiX0M-kOpKys2Iu4Gl8upjgMjmnSPsArm6xh7eDP_lNFuz47A6s11-qnRY9-Lgbp-cvXsfPr-YmFgM3HsMz80RPQ-Iwb_HwBW/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 :
   
   • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXpik-AHF0hDmlx1mMWw0w31Mw6T6Q0q_61ebzVUuxbiYiX0M-kOpKys2Iu4Gl8upjgMjmnSPsArm6xh7eDP_lNFuz47A6s11-qnRY9-Lgbp-cvXsfPr-YmFgM3HsMz80RPQ-Iwb_HwBW/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
   • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLI59U2dM09Yakf04E2ZPGOQy38heOkrqgi7fK61ythBeATs8I5HTh_MP1XKIabfKs9PpRi__8ZeCxzdXcrWh0oy8h8f4PBwWDfDi3SHBtFXllg30r4dLjHlt_DIqF-y_k-UJBd5X7_89f/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
   • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDI4-HK5N4U0f61fx_EPN-Us9CSCMiNM8b3drv7Yxl_1Xxxo15M2nFBdjl2UNjDf0Ewvn3DisAfKZXddB1ggk6sYNqNV2ze6ValtsRbejRwDknSca8ho6A4_24bw1wrCNXutY1MDQ3M83m/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
   • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2g5ZTI6dv1BGc8RImT2bMH8PPwUWC307KrYarLAR5HF69khDVSG5FtZ1mKWJWGpQpiYxlCrS4-gRK_t4H-B4sW8BvavZwbQaSBkyxJsncno4B-NUnmSO-vfFZJpd1HlSHehQpx5VSBjIY/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
   • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vAEujUDIOizSZAA7zFivUZQHtkKaABeW5tseeg-rkK2_Cwai9hKqMjAewNsQwz92BM1E-R5Ckq3IMnJf_Ab0FnjtyPXuJp1mwzPVo5IXFQNOhLH5r5uJxl01uBqZcxB3elw0jxQYJZPp/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 .

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg