Tutorial : Jquery Lava-Lamp Menu Bar
Apr 29, 2011 • 29.4.11 • 0 comments okeh, malas nak terangkan, terus pergi Dashboard > Design > Page Element > Add A Gadget > HTML/JavaScriptcopy (ctrl+C) pastu paste (ctrl+V) kat kotak tu ea? <style> #container { width: 100%; margin: 0px 0px; padding: 0px 0px 40px 10px; } ul, li { margin: 0; padding: 0; } #blob { border-right: 1px solid #0059ec; border-left: 1px solid #0059ec; position: absolute; top: 0; z-index : 1; background: #0b2b61; background: -moz-linear-gradient(top, #0b2b61, #0b2b61); background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#0b2b61)); -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 2px 3px 5px #011331; -webkit-box-shadow: 2px 3px 5px #011331; } #lava-lamp { background: #32312E; float: left; border: 1px solid #BDBCBA; margin: 0px 0px 15px; padding: 0px 3px 10px 0px; } #lava-lamp li { float: left; list-style: none; border-right: 1px solid #4a4a4a; border-left: 0px solid #4a4a4a; } #lava-lamp li a { color: #DDDCD8; text-shadow: 0 0px 1px #81807B; position: relative; z-index: 2; float: left; font-size: 13px; font-family: arial, sans-serif; font-weight: bold; text-decoration: none; padding: 0px 20px; } </style> <div id="container"> <ul id="lava-lamp"> <li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li> <li><a href="http://link-di-sini.blogspot.com">About</a></li> <li><a href="http://link-di-sini.blogspot.com">Blog</a></li> <li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li> <li><a href="http://link-di-sini.blogspot.com">Contact</a></li> </ul> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script> <script type="text/javascript"> $('#lava-lamp').spasticNav(); </script>dah paste kat kotak tu? tengok kat bawah tukar warna button : edit code warna MERAH tukar warna background : edit code warna BIRU tukar URL : edit code warna HIJAU tukar Tajuk : edit code warna OREN Tukar Ketebalan Background : edit code warna UNGU kalau nak tukar background tabs dia , cari code #lava-lamp { background: #32312E; float: left; border: 1px solid #BDBCBA; margin: 0px 0px 15px; padding: 8px 3px 10px 0px; } lepastu tukarkan background: #32312E; kepada Background-image:url(URL GAMBAR); pastekan url gambar yang korang nak dekat URL GAMBAR. okey? kalau nak tukar warna tulisan , pergi kat code #lava-lamp li a { color: #413839; text-shadow: 0 0px 1px #81807B; position: relative; z-index: 2; float: left; font-size: 13px; font-family: arial, sans-serif; font-weight: bold; text-decoration: none; padding: 0px 20px; } yang merah tu tukar code colour dia eh?klik save! pastu drag kotak tu kat bawah header (masa dekat Page Elements). SAVE lagi. DONE! p/s : credit cik neiysa like okay jika suke |
MY WORDS;
OTHERS;
♥ >> Rindu Allah :')
date : NOW
at:10 am
♥ >> Dapat template baru
date : 1hours ago
at:7am
♥ >> Raraa sayang Allah
date : 12/12/12
at: 12pm
♥ >> Menjadi anak solehah
date: 25/11/2012
at: 13.12pm
BLOG ARCHIVE; |