pujangga @dhitya |
| Membuat menu navigasi ( Following cursor ) Posted: 06 Jan 2011 12:57 PM PST  Pada tulisan kali ini kita akan mencoba membuat menu navigasi yang mana menu navigasi tersebut nantinya akan mengikuti pergerakan kursor.Untuk lebih jelasnya anda bisa lihat demo nya disini.Kalau kita lihat hasil demonya mungkin bagi anda yang pernah atau sampai saat ini memakai efek kursor ular-ularan berpikir bahwa ada kesamaan efek yang diterapkan ,dimana setiap pergerakan kursor selalu di ikuti dengan sederatan angka atau simbol yang bergerak seperti ular. bagaimana kalo kita langsung coba saja cara membuat floating cursor following menu tersebut. Rangkaian kode CSS yang akan kita pakai di dalaman tag head pada halaman template untuk membuat floating menu adalah sebagai berikut. @charset "utf-8"; /* cursor following menu style */ #cf_menu{position:absolute; display:inline-block; z-index:10; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:pointer; top:0; left:0; background:url(empty.gif);} /* stupid IE needs a background value */ #cf_menu .container{position:relative; font-family:Arial, Helvetica, sans-serif; font-size:10px;} #cf_menu .title{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#333; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px; color:#fff; padding:5px 8px;} #cf_menu ul{margin:0; padding:0; list-style:none; display:none;} #cf_menu ul li{margin:0; padding:0;} #cf_menu ul ul{margin:0 0 0 2px; padding:0; list-style:none; display:inline-block;} #cf_menu ul ul li{margin:0 2px 0 0; padding:0; display:inline-block;} #cf_menu a:link,#cf_menu a:visited{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px 1px 5px 1px; padding:5px 8px; border-bottom:1px solid #f33; border-right:1px solid #f33; color:#fff; background:#f33;} #cf_menu a:hover{background:#fff; color:#000; border-bottom:1px solid #000; border-right:1px solid #000;} #cf_menu ul ul a:link,#cf_menu ul ul a:visited{background:#333; color:#ddd; border-bottom:1px solid #333; border-right:1px solid #333;} #cf_menu ul ul a:hover{background:#fff; color:#000;} .cf_menu_transparency{filter:alpha(opacity=25); -moz-opacity:0.25; -khtml-opacity:0.25; opacity:0.25;} /* menu opacity */ jQuery (javascript library) Untuk penerapan efek Floating menu ini kita akan menggunakan 2 plugin jQuery yang akan menciptakan efek animasi dan menu navigasi yang akan mempercantik website/Blog kita. kedua jQuery plugin tersebut akan kita letakan didalam/dibawah bagian tag <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> Dan pada bagian tag <body>, kita akan menggunakan kode HTML seperti dibawah ini. <pre class="brush: xml;fontsize: 100; first-line: 1; "><div id="cf_menu"> <div class="container"> <div class="title">MENU</div> <ul> <li><a href="#home">↑ Home</a></li> <li><a href="#about">About me</a></li> <li><a href="work">+ Work</a> <ul> <li><a href="#recent">Recent</a></li> <li><a href="#web">Web</a></li> <li><a href="#print">Print</a></li> </ul> </li> <li><a href="#blog">Blog</a></li> <li><a href="links">+ Interesting links</a> <ul> <li><a href="#freebies">Freebies & Resources</a></li> <li><a href="#people">People</a></li> </ul> </li> <li><a href="#contact">Contact</a></li> <li><a href="info">+ Script info</a> <ul> <li><a href="#">See the post</a></li> <li><a href="#">↓ Download</a></li> </ul> </li> <li><a href="#">malihu</a></li> </ul></div> </div></pre> <br> Anda dapat dengan mudah mengkonfigurasi menu tulisan yang berwarna merah dengan mengubah variabel masing-masing sesuai dengan keinginan Anda.Dan Anda pun dapat memiliki sub single-level pada pilihan menu dengan menambahkan daftar unordered tambahan di dalam daftar item. Tambahkan script menu dan plugin di akhir dokumen, tepat sebelum tag </body>. <script> //cursor following menu config $mouseover_title="+ MENU"; //menu title text on mouse-over $mouseout_title="MENU"; //menu title text on mouse-out $menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds) $menu_following_easing="easeOutCirc"; $menu_cursor_space=30; //space between cursor and menu $menu_show_speed="slow"; //menu open animation speed $menu_show_easing="easeOutExpo"; //menu open animation easing type $menu_hide_speed="slow"; //menu close animation speed $menu_hide_easing="easeInExpo"; //menu close animation easing type </script> <script src="malihu.jquery.cfm.js"></script> Simpan hasil editan template page html anda dan silahkan anda lihat hasilnya.Selamat mencoba..! Untuk melengkapi tutorial ini...anda bisa download kode javascript yang nantinya bisa anda letakan di filehosting anda sendiri dan contoh dari index.html sebagai project latihan anda.  |
| Membuat Fading Image Header (hover effects) Posted: 06 Jan 2011 08:53 AM PST Modifikasi kode HTML memang sesuatu pekerjaan yang masih terhitung mudah.Seperti halnya apa yang akan kita bahas kali ini tentang modifikasi Header ( judul ) pada blogspot.Disini kita akan mencoba menghubungkan atau mengkombinasi Header Image dengan javascript,jadi..disaat mouseover pada header blog anda akan memperlihatkan efek fade yang contohnya bisa anda lihat pada header saya atau juga bisa anda lihat disini. Contoh kode HTML pada Header Blog saya adalah seperti ini. <h1 id="header"> <span class="fake-hover"></span> <a href="http://www.pujangga-adhitya.co.cc/">Pujangga BLogs</a></h1> Dan umumnya pihak Pengembang  Pengembang Yang biasa kita sebut sebagai pembuat template Blogger. template Blogspot sudah menyisipkan kode HTML header seperti dibawah ini.<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Pujangga BLogs (Header)' type='Header'/> </b:section> </div> Namun saya edit menjadi seperti ini. <div id='header-wrapper'> <div align='center'> <h1 id='header'><a href='http://www.pujangga-adhitya.co.cc/'>Pujangga Blogs</a></h1> </div> </div> Nah..sekarang saya coba untuk mengganti Kode CSS #Header (# biasa disebut dengan ID) menjadi seperti ini. #header { margin: 0; padding: 0; text-indent: -9999px; width: 400px; height: 225px; position: relative; margin-left: -1em; background: url(header.jpg) no-repeat; /*Image header 1*/ } #header a { position: absolute; // This allows us to have top: 0; // the anchor on top of the header left: 0; width: 400px; height: 225px; display: block; border: 0; background: transparent; overflow: hidden; } Selanjutnya kita tambahkan kode CSS #header .fake-hover dibawahnya yang berfungsi sebagai efek Header. #header .fake-hover { margin: 0; padding: 0; width: 400px; height: 225px; display: block; position: absolute; top: 0; left: 0; background: url(header.jpg) no-repeat 0 -240px; /*Image header 2*/ } Nah..sejauh ini kita sudah menyelesaikan pengeditan kode CSS dan HTML.Sekarang waktunya kita menyisipkan kode javascript untuk menciptakan efek fade in / fade out.Pertama kali kita panggil dulu kode jQuery (javascript library) dan letakan di bawah kode <head>. <script type="text/javascript" src="jquery-1.2.3.min.js"></script> Setelah itu kita masukan perintah javascript ini dan letakan diatas kode </head>. <script type="text/javascript"> //<![CDATA[ var Header = { // Let's write in JSON to make it more modular addFade : function(selector){ $("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector)); // Safari dislikes hide() for some reason $(selector+"a").bind("mouseenter",function(){ $(selector+".fake-hover").fadeIn("slow"); }); $(selector+"a").bind("mouseleave",function(){ $(selector+".fake-hover").fadeOut("slow"); }); } }; $(function(){ Header.addFade("#header"); }); //]]> </script> Yang perlu diperhatikan dari semua kode diatas.
Download jQuery fading header effect Semoga bermanfaat.  |
| You are subscribed to email updates from Pujangga Blogs To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 komentar:
Posting Komentar