Menu navigasi di blog ini aslinya tak memiliki efek slide. Bahkan tak membawa kode untuk menu drop down. Berikut kode perubahan dalam tempalate blog ini untuk menu navigasi.
KODE ini saya dapatkan setelah membuka source code dari template yang saya download. Ini memang cara mudah otak-atik template. Jika anda membuka sebuah halaman dan tertarik dengan tampilannya, buka source codenya yang di browser disediakan untuk melihat kode sumbernya. Di Firefox –> tekan control U, di Opera –> klik kanan pada layar halaman dan pilih Lihat Kode HTML, di Chrome —> klik kanan pada layar halaman dan pilih Lihat sumber laman.Berikut cara membaca kode (sumber) halaman dalam blog ini:
1. Kode HTML biasanya dibagi 3, yakni: <html></html>, <head></head><body></body>. Tanda / adalah penutup tag. Jika menulis kode <head> bla bla bla…. dst yang berisi kode-kode yang lain dan sesudahnya tanpa diakhiri dengan kode </head> maka itu error dan browser tak akan bisa menterjemahkan.
2. Kode CSS (Cascading Style Sheets) terletak di antara kode <head> dan </head>. CSS adalah kode yang mengatur tampilan (style) dari elemen-elemen yang ada diantara tag <body> dan </body>. Elemen ini termasuk header, footer dan outer yang berisi kolom-kolom, mulai dari kolom untuk posting maupun kolom samping. Tampilan ini mulai dari jenis hurufnya, ukuran hurufnya, lalu apakah hurufnya dibuat tebal atau normal atau miring, lebar dan tinggi elemen sampai margin hingga padding.
3. Kode script java, yang diletakkan dalam kode <head> dan </head>. Untuk JavaScript, cari tulisan berikut ini: <script type='text/javascript'> dan diakhir dengan </script>. Kode ini biasanya diletakkan tepat diatas kode </head>. Cara mencarinya: setelah control U di Browser Firefox, jendela baru akan muncul. Dalam jendela baru tersebut tekan control F yang di bawah akan memunculkan tab cari. Lalu ketik </head> pada kotak, dan dengan sendirinya di halaman akan disorot yang anda cari tersebut.
Sesudah bisa membaca kode-kode sumber halaman, berikut kode yang harus anda cari setelah membuka jendela Kode Sumber Halaman di browser Firefox:
1. Kode JavaScript<script type='text/javascript'>
function mainmenu()………, dan seterusnya.Javascript Mainmenu 2. Kode CSSScript Java di atas digunakan untuk menampilkan slide, bukan drop down-nya. Jika hanya membutuhkan drop down, cari kode berikut:#navi ……., dan seterusnya hingga berakhir pada #navi li:hover, #navi li.sfhover { position: static;}
navi
Untuk anda yang ingin mengotak-atik warna tampilan, jenis huruf, ukuran huruf, perhatikan yang ini –> background, color, font-family, font-size.Anda bisa merubah-rubahnya sesuai selera anda.Untuk mengetahui kode warna, anda bisa meminta bantu Adobe Photoshop yang jalan di Windows atau GIMP yang jalan di Linux. Di color pick-nya disertakan kode-kode warna untuk HTML.Perhatikan pula tulisan ini –> #navi li #nav li li active hover visited
Untuk #navi li adalah deretan pada menu utama.
Untuk #navi li li adalah deretan pada sub menu-sub menu
active adalah link yang nampak pada blog ini berhuruf Arial dengan bold (font-weight), warna latar hitam (kode HTML #000000) dan warna huruf putih (kode html #ffffff), baik pada menu utama maupun sub-sub menunya.
hover adalah kursor tangan pada saat mouse kita geser ke atas link tersebut, dengan latar warna putih dan huruf warna merah (kode HTMl #f50000), pada menu utama. Sementara pada sub menunya, warna latar berubah biru (#0a348f) dengan tulisan warna kuning kabur (#e6dc8d).
visited adalah link, baik di menu utama maupun sub-sub menunya yang telah kita klik.
Sebaiknya coba-coba saja terlebih dulu dengan mengetahui hasilnya setelah anda selesai melakukan semua langkah.
3. Kode HTML
Buat diagram untuk link-link yang akan anda jadikan link menu utama, sub menu dari menu utama dan sub menu dari sub menu sebelumnya. Dalam halaman blog ini, menu utamanya adalah: Home Dokumentasi Jurnalistik IT Perpustakaan Halaman Unduh Lebih Dekat.
Menu Utama yang memiliki sub menu hanya: Dokumentasi dan Halaman Unduh. Sub menu di menu Dokumentasi adalah: News Story Petite Stoire Sastra Kolom.
Sementara sub menu News Story memilik sub menu lagi, yakni: Papua Hukum Ekonomi dan Bisnis Humanitas Liputan Malam.
Dan seterusnya.
Sesudah membuat rancangan, sekarang buat kode HTML-nya, yang nantinya akan diletakkan dalam body. Ini adalah contoh kode menu utama dalam halaman blog ini:
Kode Menu Blog Ini
Catatan:
Penulisan kode dengan baris menjorok ke dalam tak berpengaruh. Baris per baris HTML ditandai dengan tag penutup yang disimbolkan dengan garis miring. Menuliskan baris menjorok disini untuk mempermudah mana-mana saja yang menjadi deretan menu utama dan deretan sub menu pertama serta deretan sub menu kedua.
Setelah menuliskan kode sub menu yang anda miliki, sekarang saatnya menempatkan kode tersebut ke bagian HTML yang anda miliki.
Sebelumnya, lakukan langkah berikut di blogger:
1. Masuk ke blogger dan login sesuai dengan id yang anda miliki.
2. Masuk ke Desain.
3. Pilih Edit HTML, yang ada diantara tab Elemen Halaman dan Desain Template.
4. Terlebih dulu Download Full Template dan simpan untuk berjaga-jaga jika anda ingin mengembalikan template semula.
Sesudah melakukan langkah di atas, selanjutnya:
1. Untuk Kode Script, gunakan bantuan find (control F) kemudian cari tag </head> dan tempelkan kode JavaScript tersebut diatasnya. Atau tempatkan dibawah kode ]]>.
2. Untuk kode CSS yang telah anda rubah sesuai dengan keinginan anda, gunakan bantuan find (control F) cari tulisan body, == tanpa tag <> dan beda dengan <body> == lalu geser ke bawah sehingga anda menemukan #nav atau #menu atau lainnya yang sesuai dengan kode template anda. Jika kesulitan, cirinya: ada kode-kode ul li hover. Namun tidak di bawah body. Di template saya semula ada di bagian #navmenu yang ada di bawah /* Begin Horizontal Nav Menu */
Dan ini tak saya hilangkan, dan tak berpengaruh sama sekali karena tak saya tandai dalam script java dan div id di kode HTML-nya.
Setelah ketemu, tempelkan kode anda di situ. Bisa me-replace yang telah ada, atau menambahkan. Sebaiknya tambahkan saja.
Ingat: setelah tanda # bisa diberikan nama macam-macam sesuai selera. Sebetulnya ini hanya penanda untuk id di dalam kode HTML yang memiliki tag <div id=’……’> dan penanda dalam script Java. Coba buka script Java, cari #navi dan kode HTML cari <div id=’navi’>. Disinilah sebenarnya kuncinya. Saya pernah mengalami pengalaman pahit karena melupakan penanda-penanda ini. Jika di CSS anda menuliskan style-nya dengan tanda #menu berarti dalam script java dan id div harus juga menu.
3. Untuk kode HTML, di template anda silahkan gunakan bantuan Find (control F) cari <body> lalu geser ke bawah sehingga anda menemukan kode yang bercirikan <ul> <li> Home dan seterusnya. Kode itu dimulai dengan <div id=’…..’> dan berakhir pada </div> dimana titik-titik adalah penanda pada navigasi. Di template saya ada di bagian setelah <!---start horizontal nav—>
Lalu replace dengan kode yang telah anda buat. Ingat, sesuaikan id yang ada di <div id=’…..’> dengan penanda # yang ada dalam kode CSS anda.
Setelah selesai, simpan template dan klik View Blog pada bagian: Your changes have been saved. View Blog. Jika masih belum berhasil, silahkan hubungi teman anda, termasuk saya yang memiliki sedikit pengetahuan tentang otak-atik template blog.
Selamat mencoba, dan keep your spirit and good luck. (G)
0 comments:
Posting Komentar