Untuk kesekian kalinya,Pelajaran Blog,akan merepotkan lagi Bapak Supono. Ya,karena mungkin pusing akan penjabaranya,CSS,pengertian CSS,anda bisa baca disini. Tapi,Pelajaran Blog,nggak mau dong dibilang nggak modal lagi,he..he.. Jika dengan HTML,saya menuliskan sebuah kalimat: Maka saya akan menuliskan kode:
Tapi dengan CSS,kita bisa menghemat penerapan kode,hanya dengan mengatur atribut kalimat yang akan kita tulis,di bagian atas kode <HEAD>,pada halaman HTML anda.Contoh,tulisan Apa itu CSS? di atas,akan saya tulis memakai CSS. Pertama,saya meletakkan kode ini di atas kode <Head> pada halaman HTML saya.<style type='text/css'>Setelah itu,saya menuliskan kode di bawah ini sesudah kode <Head><script type='text/javascript'/>Hasilnya akan seperti ini : Apa Itu CSS? Sama khan ?Nah itu penjelasan dikit tentang CSS. Kurang Jelas,anda bisa pelajari CSS di http://learn-css-tutorial.com/. Baca Juga Yang Ini.. |
Showing posts with label Css. Show all posts
Showing posts with label Css. Show all posts
Saturday 24 July 2010
CSS
Apa itu CSS?: "
Wednesday 21 July 2010
Membuat Menu Navigasi dengan CSS
Membuat menu navigasi,adalah pelajaran yang paling banyak di pertanyakan oleh blogger-blogger pemula,termasuk saya beberapa hari yang lalu. Disini kita akan membahas tentang bagaimana membuat menu makanan 4 sehat 5 sempurna, Hus !! bukan,maksudnya Menu Navigasi dengan CSS. Tapi tidak seperti kebanyakan,biasanya mereka meletakkan di bawah kode <body>,tapi di sini kita akan meletakkan kodenya di Element HTML/Javascript yang baru. Apa itu CSS? kita akan bahas beberapa hari lagi,berhubung yang kita bahas kali ini Menu Navigasinya. Seperti apa sich contoh Menu Navigasi?Navigasi pada web / blog,sesuai dengan namanya,yaitu untuk menuntun jalan,supaya web / blog lebih mudah di telusuri.Contoh bentuk fisiknya seperti di bawah ini : Untuk membuatnya kali ini,kita minta bantuan CSS,apa itu CSS,kita bahas naa..ant : (,tadi sudah di omongiiin!!!! #$%#!  .Cara membuatnya sederhana sekali,berhubung kita dengan bantuan CSS,kita tak perlu membuat tabel untuk Menu Navigasi seperti di atas. Tapi,yang paling surprise buat gw waktu aku jalan-jalan ke Blok-M,tiba-tiba aku ngliat yang belum pernah...OOee!!Ngemeng aja!ntar aja ceritanya ngapa !! Ok! berhubung ntar malah tambah bikin rusuh suasana,kan dapet dosa tuh!,kalo dosa,kita masuuk Nera...@#$@#$@!!gUBRAK! gw bilang ntar ya ntar ceritanyaaa!!  Ya..ya.ntar aja ceritanya ya..Ok langsung ke topik,kita hari ini. Langkah pertama,pergi ke Dashboard (untuk blogspot),lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML. Lalu cari kode ]]></b:skin>,jika sudah ketemu,tepat diatasnya,letakkan kode di bawah ini :#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }Jika kode sudah anda letakkan,lalu Simpan Template. Selanjutnya pilih Tab Tata Letak,dan buat Element Baru / Add New Widget,pilih HTML / Javascript. Lalu letakkan kode di bawah ini pada halaman HTML / Javascript yang baru saja anda pilih. Jika kode sudah anda letakkan,lalu pilih Simpan,dan anda bisa langsung lihat hasilnya. Untuk http:/// ,anda isi dengan alamat URL yang akan di tuju,sedagkan untuk Menu 1,2,3,4 ,Untuk tulisan yang akan tampil,sedangkan jika ingin menambahkan satu kolom lagi,anda tinggal menulis satu baris lagi,baris yang mana?Copy aja salah satu kode : <li><a href='http:///'>Menu 4</a></li>,dan paste persis di bawahnya.Sekarang tinggal nglanjutin cerita di Blok-M tadi,jadi gini nich..@#$@#%$! Gubrak ! Baca Juga Yang Ini.. |
Subscribe to:
Posts (Atom)