Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Home » Posts filed under HTML

14 Februari 2010

Menyisipkan Image Pada Dokumen HTML

Ada beberapa alasan mengapa di dalam suatu dokumen html orang ingin menambahkan gambar atau objek lainnya. Mungkin hanya sekedar untuk mempercantik tampilan halaman, memberikan dukungan / penjelasan (support) mengenai isi artikel, atau alasan lainnya. Namun untuk menyisipkan gambar dalam suatu dokumen html tidak asal taruh saja, bisa-bisa hasilnya akan seperti ini:

Blogger dimulai oleh sebuah perusahaan sangat kecil di San Fransisco yang bernama Pyra Labs pada bulan Agustus 1999. Terjadi di tengah-tengah booming dot-com. Tetapi kami bukan jenis perusahaan yang didanai oleh VC, suka berpesta, dan berhura-hura, ataupun minum bir. (Kecuali bir gratis.)

Kami tiga sekawan, didanai dengan melakukan kontrak proyek web yang mengesalkan untu kperusahaan besar, berusaha mencari jalan masuk yang megah ke dunia Internet. Apa yang dulu kami coba lakukan tidak ada hubungannya lagi sekarang. Tapi dulku ketika melakukan itu, kami menciptakan Blogger, hanya iseng saja, dan kami berpikir — Hmmmm... ini sepertinya menarik.

Tidak rapi kan hasilnya, masih ada ruang kosong disebelah kanan gambar. Untuk merapikannya perlu ditambahkan kode "align="left atau right" setelah alamat url gambar. Contoh di atas kodenya seperti ini:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj07lJ8MQdnyIqfglIz2G-cQsDpu4lpKAfasNJnzO5SsTP-D2Q2_qrtuU5uY50ng5v_ciNeD6C_hZ5EClhyphenhyphenPBW_cMP5IwOqsnEeQh6uSlYgNoUwDlHmxxg9unQyab7DUNZ_bYLeVyLC9dk/s320/blogger_logo.gif">Blogger dimulai oleh sebuah perusahaan sangat... dst.

Maka agar kelihatan rapi tambahkan kode "align="left atau right" setelah alamat url gambar. Kurang lebih seperti ini:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj07lJ8MQdnyIqfglIz2G-cQsDpu4lpKAfasNJnzO5SsTP-D2Q2_qrtuU5uY50ng5v_ciNeD6C_hZ5EClhyphenhyphenPBW_cMP5IwOqsnEeQh6uSlYgNoUwDlHmxxg9unQyab7DUNZ_bYLeVyLC9dk/s320/blogger_logo.gif" align="right">

Hasilnya akan seperti ini:

Namun ada sedikit masalah, kelihatannya jarak gambar dengan isi tulisah terlalu dekat. Untuk mengatasinya tambahkan kode ini "hspace='10'". 10 dalam arti ukuran jarak 10 pixel, terserah mau anda tentukan berapa jaraknya. Kurang lebih code yang harus disisipkan akan seperti ini:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj07lJ8MQdnyIqfglIz2G-cQsDpu4lpKAfasNJnzO5SsTP-D2Q2_qrtuU5uY50ng5v_ciNeD6C_hZ5EClhyphenhyphenPBW_cMP5IwOqsnEeQh6uSlYgNoUwDlHmxxg9unQyab7DUNZ_bYLeVyLC9dk/s320/blogger_logo.gif" align="right" hspace='10'>

Hasilnya akan seperti ini:

Jika gambar ingin diletakkan di sebelah kiri, maka ganti "align='right' dengan align='left'". Cukup mudah bukan.

Selengkapnya

External Style Sheet Link Tag CSS

Banyak keuntungan yang didapat apabila anda menggunakan metode 'external style sheet' dibandingkan dengan menggunakan metode 'Internal Style Sheet' ketika menyisipkan css ke dalam dokumen html. Berikut keunggulan menggunakan metode 'external style sheet':

Lebih cepat daripada menggunakan metode 'Internal Style Sheet', dengan kata lain menggunakan metode external style sheet dapat menghemat waktu mengetik anda karena proses pengetikan code css hanya dilakukan sekali dan dapat diterapkan untuk beberapa dokumen html. Jika anda menggunakan 'Internal Style Sheet' lihat contoh penulisan codenya seperti di bawah ini :
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>title/judul halaman website anda</title>
<style type="text/css">

</style>
</head>
<body>
Contoh paragraf yang berwarna merah
</body>
</html>
```
Dapat anda lihat code css ditulis antara tag head buka dan tutup pada tiap-tiap dokumen. Dengan kata lain proses penyisipan code css harus dilakukan secara manual dan berulang-ulang untuk setiap dokumen html. Jika menggunakan cara 'External Style Sheet' anda hanya perlu menyisipkan link file css sekali saja.
User (pengguna) dapat browsing halaman web lebih cepat, karena browser hanya perlu membaca css satu kali karena file css tersimpan pada cache browser.
Memungkinkan anda untuk memasukkan beberapa link tag (multiple link tag) dalam setiap dokumen jika memang anda membutuhkan rule yang kompleks. Artinya anda dapat membuat lebih dari satu 'External Style Sheet'.

Nah sekarang ingin tahu seperti apa bentuk 'External Style Sheet' itu? Langsung saja lihat contohnya di bawah:

<link rel="StyleSheet" href="paragraf_warna.css" type="text/css">

Letak kode di atas antara tag 'head' buka dan tutup. Tentu saja sebelum menambahkan kode di atas pada dokumen html anda perlu membuat source file css nya terlebih dahulu. Anda dapat menggunakan text editor seperti 'Notepad'. Contoh pembuatan rule css (selector, property & value) pada file css baru dari inline style di atas:

p {
color: red;
}

body {
background-color: gray;
}

Selanjutnya simpan dengan files extention 'css', contoh simpan dengan nama 'background-warna.css'. Selanjutnya sisipkan ke dalam dokumen 'html'. Lihat contohnya di bawah:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title/judul halaman website anda</title>
<link rel="StyleSheet" href="paragraf_warna.css" type="text/css">
</head>
<body>
<p>Contoh paragraf yang berwarna merah</p>
</body>
</html>

Simpan dokumen html di atas pada folder yang sama dengan tempat anda menyimpan file 'background-warna.css', buka dengan menggunakan browser anda dan lihat hasilnya. Tulisan 'Contoh paragraf yang berwarna merah' mempunyai teks dengan warna merah dengan background berwarna abu-abu.

Selengkapnya

Tipe Dokumen HTML

Apabila melihat struktur dokumen html, yang pertama kali anda lihat adalah "Doc Type Declaration" pada bagian paling atas. Seperti apa struktur dokumen html, dapat anda lihat contohnya seperti di bawah ini;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

</head>

<body>

</body>
</html>

Dapat anda lihat text yang berwarna merah pada contoh html di atas adalah yang disebut dengan "Doc Type Declaration". Tujuan dari penentuan doc type declaration adalah untuk memberi informasi kepada browser tentang jenis bahasa yang akan digunakan dalam keseluruhan suatu dokumen html. Doc Type Declaration di atas madsudnya adalah bahasa yang digunakan adalah html "<DOCTYPE HTML PUBLIC", yang ditetapkan oleh 'W3C', dengan basic Document Type Definition (DTD) (contoh di atas DTD HTML Transitional), dan terakhir adalah alamat url dimana DTD dapat ditemukan.

Untuk sekarang ada tiga macam tipe bahasa dokumen html 4.01, antara lain;

Frameset Declaration.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Strict Declaration.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Transitional Declaration

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untuk lebih jelasnya dapat anda lihat di situs ini. Silahkan pilih sesuai dengan situs anda, umumnya sekarang banyak yang menggunakan tipe dokumen 'Transitional' karena dianggap hampir support oleh semua browser yang ada saat ini.

Selengkapnya

Auto Scrolling "Back To Top"

Jika pada artikel sebelumnya saya menulis cara 'Membuat Link Back to Top', nah sekarang saya akan sharing cara membuat link back to top pada blogspot, kurang lebih hampir sama dengan postingan saya sebelumnya. Yang membedakan hanyalah pada artikel ini hanya sedikit menambahkan 'auto scroller effect' dan 'Rollover Image' pada linknya. Seperti apa nanti jadinya, langsung saja ke tkp.

Bagaimana tahap pembuatannya, ikuti langkah-langkahnya berikut ini;

Pertama, Sign in ke akun blogger anda. Klik pada tab 'Layout' (tata letak) kemudian navigasikan pada link 'Edit HTML'. Cari kode "]]></b:skin>", kemudian tambahkan tag id ini di atas kode tersebut:

#atas {
bottom:5px; 
right:5px;
position:fixed;
width: 50px;
height: 50px;
}

'bottom' dan 'right' adalah jarak dari batas tepi bawah dan kanan sebesar 5 pixel, silahkan sesuaikan dengan kreatifitas anda. 'width' dan 'height' masing-masing menentukan lebar dan tinggi dari object link, kebetulan gambar yang saya pakai mempunyai ukuran lebar dan tinggi 50 pixel. Sesuaikan dengan gambar anda. 'Position:fixed' maksudnya objek dari link tidak akan berubah posisinya jika halaman di geser ke bawah maupun ke atas, ataupun jika halaman browser dirubah-rubah ukurannya.

Kemudian buatlah gambar untuk effect rollover image. Harap dicatat untuk membuat rollover image harus ada dua gambar, gambar yang pertama adalah default sedangkan yang kedua untuk efek rollover ketika mouse diarahkan pada link sehingga seolah-olah gambarnya berubah. Pakai software olah gambar yang biasa anda pakai, jika contoh tag id di atas ukuran gambar ditentukan '50px x 50px' maka untuk menggabungkan dua gambar menjadi satu buatlah ukuran dengan lebar 50px dan tinggi 100 px. '50px x 50px' bagian atas untuk gambar default sisanya untuk efek gambar rollover. Contoh gambarnya seperti di bawah ini:

Back to Top

Untuk mengaktifkan efek rollover maka anda perlu menambahkan tag id tambahan untuk efek link gambarnya (tuliskan kode ini di bawah kode tag id paling akhir dari '#atas' dibawah kode " } " ). Gambar yang saya pakai mempunyai alamat url 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1qU-jvn13h3gqEj33r5J1RQQEk7rDGr6Nf0pcmaEIkFRUTaA_Ht89AzC7Fe_NmYhq8GxzjL3lzzxfu60rvJfTSTZEwHI12WsLJvVe6CxD7xQoALQdaG4zGrebAeqdqaKkB6L6lP64ls/s320/top.gif'. Tuliskan kode CSSnya seperti di bawah ini:

#atas a:link, #atas a:visited {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1qU-jvn13h3gqEj33r5J1RQQEk7rDGr6Nf0pcmaEIkFRUTaA_Ht89AzC7Fe_NmYhq8GxzjL3lzzxfu60rvJfTSTZEwHI12WsLJvVe6CxD7xQoALQdaG4zGrebAeqdqaKkB6L6lP64ls/s320/top.gif) no-repeat left top;
display: block;
width: 50px;
height: 50px;
}

#atas a:hover, #atas a:active {
background-position: left bottom;
border: none;
}

Sudah hampir jadi, sekarang tinggal link ke file javascriptnya untuk efek auto scrolling. Tuliskan kode di bawah ini di bawah kode <head>:

<script src='http://www.domain.com/scroller.js' type='text/javascript'/>

Terakhir tinggal buat anchor linknya, ada dua cara yang dapat anda lakukan. Cara pertama klik pada tab 'Layout' (Tata Letak) klik pada 'Page element' (Elemen halaman). Klik pada 'Tambah gadget' (Harus pada gadget paling atas), kemudian klik pada pilihan 'HTML/Javascript', tuliskan kode di bawah ini pada kotak konten edit HTML/Javascript:

<a id="top" name="top"></a>

Cara yang kedua, pada tab menu 'Layout' (Tata Letak) klik pada 'Edit HTML', cari kode '<body>'. Kemudian tuliskan kodenya sama seperti kode di atas di bawah tag '<body>'.

Selanjutnya buat linknya, masih pada bagian 'Edit HTML', tambahkan kode ini di atas tag '</body>':

<div id='atas'>
<a href='#top' title='Back to top'></a>
</div>

Selesai, semoga bermanfaat...
:D

Selengkapnya

Membuat "Link Back To Top"

Bayangkan jika anda mengunjungi website atau blog dengan halaman yang panjang sampai capek untuk scroll ke akhir halaman, kemudian setelah selesai anda ingin kembali lagi ke halaman paling atas. Umumnya visitor akan scroll halaman secara manual kembali ke halaman paling atas, cara ini kurang efektif. Tips berikut ini akan memudahkan visitor untuk dapat lompat ke halaman paling atas tanpa harus scrolling (menggulung) mouse secara manual.

Syarat yang diperlukan adalah menambahkan tombol atau link yang mengarah pada halaman paling atas. Tambahkan sedikit modifikasi pada kode css & html, untuk pengguna blogspot ikuti langkah mudahnya seperi di bawah ini;

Login ke account blog anda.
navigasikan ke 'Layout' (Tata Letak) => Pilih tab 'Edit HTML'.
Cari kode "]]></b:skin>" dan kopi pastekan kode di bawah ini diatas kode "]]></b:skin>" ;

#atas {
bottom: 5px;
right: 5px;
position: fixed;
}

Atur penempatannya sesuai keinginan anda, "bottom:5px; right:5px" maksudnya jarak dari batas paling bawah 5 pixel, paling kanan 5 pixel. Jika ingin menempatkan pada tempat lain tinggal atur posisinya dengan perintah "bottom, right, left, top" kemudian sesuaikan jaraknya. Misal jika ingin menempatkannya pada bagian halaman pojok kanan atas tuliskan kode ini;

#atas {
top: 5px; /* 5px optional sesuaikan dengan angka anda. */
right: 5px; /* 5px optional sesuaikan dengan angka anda. */
position: fixed;
}

Pojok kiri atas ;

#atas {
top: 5px;
left: 5px;
position: fixed;
}

Pojok kiri bawah

#atas {
bottom: 5px;
left:5px;
position:fixed;
}

Kemudan tinggal menambahkan linknya, dapat berupa gambar ataupun hanya sekedar anchor link. Jika ingin menambahkan gambar caranya seperti di bawah ini;

<div id='atas'>
<a href='#'><img alt='Kembali Ke Halaman Paling Atas' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7v8OxyrrYBpYY3cfW4yrQJdPfa289QBsjQKAfXqzzOzGH73DNw7bdV4ceta3DLUIL7ClQ5D3w5gLpn5To1byDAFzkV25tjuC-9vmigzpPrpE-5aSs4g4t3lbIkkcJOhvR7J8LbI3UpU/s320/terbang.gif'/></a>
</div>

Ganti alt image 'Kembali Ke Halaman Paling Atas' dengan kata-kata anda sendiri. Jika anda lebih memilih memakai gambar (image), upload gambar anda ke blogger kemudian gantikan alamat url image di atas dengan alamat url image anda. Jika hanya ingin menggunakan anchor link, pakai kode ini:

<div id='atas'>
<a href='#' title='Kembali Ke Halaman Paling Atas'>Paling Atas</a>
</div>

Jika ingin pakai keduanya, tulisan dan gambar pakai kode di bawah ini;

<div id='atas'>
<a href='#'><img alt='Kembali Ke Halaman Paling Atas' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7v8OxyrrYBpYY3cfW4yrQJdPfa289QBsjQKAfXqzzOzGH73DNw7bdV4ceta3DLUIL7ClQ5D3w5gLpn5To1byDAFzkV25tjuC-9vmigzpPrpE-5aSs4g4t3lbIkkcJOhvR7J8LbI3UpU/s320/terbang.gif'/><br/>Paling Atas</a>
</div>

Selanjutnya copy dan pastekan kode di atas tepat di atas tag "</body>" ==> Terletak di bagian 'Edit HTML' hampir paling bawah. Selesai, Klik 'Save Template' (Simpan Template), lihat hasilnya.

Selengkapnya

Membuat Navigasi Menu Blogspot

Website atau blog rasanya kurang lengkap jika tidak ada navigasi menu, karena navigasi menu inilah yang menjadi penunjuk jalan bagi visitor untuk mengakses halaman pada sebuah webste / blog. Untuk membuat navigasi menu pada blogspot tidaklah begitu susah, ikuti cara pembuatannya berikut ini;

Login ke account blogger.
Navigasikan ke 'Layout' (tata letak) » Klik pada tab 'Edit HTML'.
Cari kode ini => "]]></b:skin>".
Copy dan pastekan kode di bawah ini di atas kode "]]></b:skin>" ;

#menuanda-wrapper {
width: 100%;
height: 27px;
background: #5bb3fd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left;
border-top: 0px solid #669999;
padding-left: 0px;
margin-bottom: 9px;
overflow: hidden
}

#menuanda-wrapper h2 {
display: none
}

#menuanda, #menuanda ul {
padding: 0px;
margin: 0;
list-style: none;
font: normal 0.95em arial;
color:#ffffff;
}

#menuanda a {
display: block;
text-decoration: none;
border-right: 0px solid 669999;
border-left: 0px solid #d3e2e2;
color: #003366;
background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left; 
padding-left: 9px;
padding-right:9px;
padding-top:6px;
padding-bottom: 7px
}

#menuanda a.depan {
padding: 0px;
border-left: 0px none;
width: 90px;
height: 27px;
background: #ffffff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left;
padding-left: 9px;
padding-right: 9px;
padding-top: 6px;
padding-bottom: 7px
}

#menuanda a.depan:hover {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqeOmJYJGciiLmDo42V9HJWKmV4k6aAdj-kVm9Y8spZu8f7KI643dUJVQhdSoolUoDAofDGQpPtE_q3R16mYgBrhq4hpdhYStl3oXtnbd7JKqPPA0Cjvyc36psT3f7G8gKWNxXXWVF2hY/s320/hover.gif') repeat-x top left;
padding-left: 9px;
padding-right: 9px;
padding-top: 6px;
padding-bottom: 7px
}

#menuanda a.depan em {
display: none;
}

#menuanda a.master {
font-weight: bold;
text-transform: capitalize;
}

#menuanda a.buntut {
padding: 0px;
border-left: 0px none;
border-right: 0px none;
width: 27px;
height:27px;
background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH9l13HwbfZVw7OJsxM8bli2HipD1EiyF2r4bPVtHRSfmGJpiLMeJh4r6qhBDUPuEW4t4Wkl7FnNPwxMQ1ZpZYD12vSbQT8B3YZkYQMa-XMt3A-Mu8i6IQylb1-2VnO8LN6tR92lpj0z4/s320/back.gif') no-repeat;
}

#menuanda li {
float: left;
width: 9em;
}

#menuanda li.kanan {
float: right;
border-left: 0px none;
}

#menuanda li ul, #menuanda ul li {
width: 14em;
}

#menuanda ul li a {
color: #ffffff;
border-left: 0px none;
border-right: 0px none;
padding-left: 5px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px
}

#menuanda li ul {
position: absolute;
display: none;
background-color: #5bb3fd;
z-index: 200;
border-right: 1px solid #5bb3fd;
border-left: 1px solid #A8C4C4;
border-bottom: 1px solid #A8C4C4;
margin-left: -1px;
text-align: left;
}

#menuanda li:hover a, #menuanda a:focus, #menuanda a:active{
color: #5BB3FD;
background-color: #dde1e4;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJDZY2zVPT07oXB3nbDsnZvlH-WDiwCiJxbA9wk6qKTdkJkHOnIPkrAciAZBh2X8DnuG1y5VIO1uLj4Ow9xVa7RnNQo5XCdT-Ga99GsyMC6LphsZ1FXhYGRRJGdkikBGJHIvYKvomaPJM/s320/hover.gif');
background-repeat: repeat-x
}

#menuanda li:hover ul {
display: block;
}

#menuanda li:hover ul a {
color: #000000;
border-top: 1px solid #8A8484;
background-image: url('none');
}

#menuanda ul a:hover {
background-color: #ffffff!important;
color: #ff0000!important;
}

#menuanda li {
width: auto;
}

Beberapa point yang perlu anda modifikasi. Pertama tiga gambar backround navigasi menu untuk menggantikan background image di atas, masing-masing 'normal.gif', 'hover.gif', dan 'back.gif'. 'normal.gif' → background default sebelum ada kontak dengan mouse, 'hover.gif' → muncul ketika mouse di arahkan ke navigasi menu, 'back.gif' buatlah sama dengan 'normal.gif'. Gunakan software olah gambar seperti adobe photoshop atau sowtware semacamnya. Untuk gambar 'normal' dan 'hover' berukuran 1px x 27px, sedangkan 'back' 27px x 27px. Membuat gambar pada dimensi 1 x 27 px mungkin sedikit susah membuatnya, buat dahulu dimensi 27px x 27px waktu membuat gambar jika sudah selesai baru tentukan resize ukurannya menjadi 1px x 27px. Upload gambar ke blogger kemudian gantikan alamat url gambar di atas dengan url gambar yang baru saja anda upload.

#5BB3FD → Warna text hover pada menu
#dde1e4 → Warna background submenu
#000000 → Warna text normal submenu
#8A8484 → Warna garis pemisah antar submenu
#ffffff → Warna background hover submenu
#ff0000 → Warna text hover submenu

Membuat navigasi menu. Misal anda mempunyai navigasi menu antara lain terdiri atas;

Menu home
Menu posting dengan sembilan submenu posting
Menu lainnya ; menu-1 sampai dengan menu ke-6, maka kode html yang anda tuliskan akan terlihat seperti di bawah ;

<div id="menuanda-wrapper">
<ul id="menuanda">
<li><a class="master" href="http://bloganda.com/" title="Halaman Utama">Home</a></li>
<li><a class="master" href="#" title="Artikel">Posting</a>
<ul>
<li><a href="http://bloganda.com/" title="title Posting 1">Posting 1</a></li>
<li><a href="http://bloganda.com/" title="title Posting 2">Posting 2</a></li>
<li><a href="http://bloganda.com/" title="title Posting 3">Posting 3</a></li>
<li><a href="http://bloganda.com/" title="title Posting 4">Posting 4</a></li>
<li><a href="http://bloganda.com/" title="title Posting 5">Posting 5</a></li>
<li><a href="http://bloganda.com/" title="title Posting 6">Posting 6</a></li>
<li><a href="http://bloganda.com/" title="title Posting 7">Posting 7</a></li>
<li><a href="http://bloganda.com/" title="title Posting 8">Posting 8</a></li>
<li><a href="http://bloganda.com/" title="title Posting 9">Posting 9</a></li>
</ul>
</li>
<li><a class="master" href="http://bloganda.com/" title="title anda 1">tab 1</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 2">tab 2</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 3">tab 3</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 4">tab 4</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 5">tab 5</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 6">tab 6</a></li>
</ul>
</div>

Modifikasi nama menu, alamat url, dan title sesuai minat anda. Untuk mengaktifkan menu ini, pada 'Dashboard' blogger pilih "Layout" (Tata Letak) » "Page Elemen" (Elemen halaman) » "Add Gadget" (Tambah Gadget) » pilih "HTML/JavaScript". Copy dan pastekan kode di atas, simpan dan sesuaikan penempatannya.

Contoh di atas sub menunya hanya sampai dengan level 1, kalau mau lebih sampai 3 level misalnya, pakai cara ini (Style menunya horizontal):

ul#menuku-horizontal {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul#menuku-horizontal ul {
width: 160px; /* Lebar Sub Menu */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}

ul#menuku-horizontal ul ul,ul#menuku-horizontal ul ul ul {
top: 0;
left: 100%;
}

ul#menuku-horizontal li {
float: left;
display: inline;
position: relative;
}

ul#menuku-horizontal ul li {
width: 100%;
display: block;
}

/* Menu Utama */
ul#menuku-horizontal a {
border-top: 1px solid #353535;
border-right: 1px solid #353535;
border-left: 1px solid #353535;
border-bottom: 1px solid #353535;
padding: 6px;
float: left;
display: block;
background: #4c4c4c;
color: #ffffff;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}

/* Hover menu utama */
ul#menuku-horizontal a:hover,ul#menuku-horizontal li:hover a,ul#menuku-horizontal li.iehover a {
background: #C8C3C3;
color: #000000;
}

/* Sub Menu Level 1 */
ul#menuku-horizontal li:hover li a,ul#menuku-horizontal li.iehover li a {
float: none;
background: #c8c3c3;
}

/* Sub Menu Level 1 Hover */
ul#menuku-horizontal li:hover li a:hover,ul#menuku-horizontal li:hover li:hover a,ul#menuku-horizontal li.iehover li a:hover,ul#menuku-horizontal li.iehover li.iehover a {
background: #c8c3c3;
}

/* Sub Menu Level 2 */
ul#menuku-horizontal li:hover li:hover li a,ul#menuku-horizontal li.iehover li.iehover li a {
background: #999;
}

/* Sub Menu Level 2 Hover */
ul#menuku-horizontal li:hover li:hover li a:hover,ul#menuku-horizontal li:hover li:hover li:hover a,ul#menuku-horizontal li.iehover li.iehover li a:hover,ul#menuku-horizontal li.iehover li.iehover li.iehover a {
background: #999;
}

/* Sub Menu Level 3 */
ul#menuku-horizontal li:hover li:hover li:hover li a,ul#menuku-horizontal li.iehover li.iehover li.iehover li a {
background: #666;
}

/* Sub Menu Level 3 Hover */
ul#menuku-horizontal li:hover li:hover li:hover li a:hover,ul#menuku-horizontal li.iehover li.iehover li.iehover li a:hover {
background: #333;
}

/* Hover Attribut - Jangan Di Hapus */
ul#menuku-horizontal li:hover ul ul,ul#menuku-horizontal li:hover ul ul ul,ul#menuku-horizontal li.iehover ul ul,ul#menuku-horizontal li.iehover ul ul ul {
display: none;
}

ul#menuku-horizontal li:hover ul,ul#menuku-horizontal ul li:hover ul,ul#menuku-horizontal ul ul li:hover ul,ul#menuku-horizontal li.iehover ul,ul#menuku-horizontal ul li.iehover ul,ul#menuku-horizontal ul ul li.iehover ul {
display: block;
}

'border-top sampai dengan border bottom' → '1px solid' berarti ukuran ketebalan garis 1 pixel dengan tipe solid, '#353535' kode untuk warna garis.
Di bawahnya 'background:#4c4c4c' dan 'color:#ffffff' masing-masing merupakan penentuan warna untuk background menu utama dan warna teks menu utama (saya pakai warna putih/#ffffff).

Di bawahnya lagi '/* Hover menu utama */' pada bagian 'background dan color' masing-masing menentukan warna hover baik background maupun teks pada menu utama.

Dan yang terakhir '/* Sub Menu Level 1 */' menentukan background warna pada submenu level 1 dan '/* Sub Menu Level 1 Hover */' menentukan hover warna background pada sub menu level 1. Level 2 sampai dan level 3 pengertiannya sama dengan level 1.

HTML Code:

<ul id="menuku-horizontal">
<li><a href="http://tutorial7.blogspot.com/" title="Halaman Utama">Home</a></li>
<li><a href="#" title="Semua Posting">Posts</a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/Bisnis%20Online%20Dunia%20Maya" title="Cari Penghasilan Tambahan Dari Internet">Duit Online</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Blogger%20Dummies" title="Blogger Untuk pemula">Blogger For Dummies</a></li>
<li><a href="#" title="Pemrograman Web">Web Programming >></a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/Cascading%20Style%20Sheets%20%28CSS%29" title="Cascading Style Sheets">CSS</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/HTML" title="Hyper Text Markup Language (HTML)">HTML</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/PHP%20Hypertext%20Preprocessor%20%28PHP%29" title="PHP Hypertext Preprocessor">PHP</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/search/label/Internet" title="Internet Tips">Internet</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Kabar%20dan%20Tips%20Lainnya" title="Kabar dan tips lainnya">Miscellaneous</a></li>
<li><a href="#" title="Microsoft Office">Microsoft Office >></a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/MS%20Excel%202007" title="Microsoft Excel 2007 Tips">Excel 2007</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/PowerPoint%202007" title="PowerPoint 2007 Tips">PowerPoint 2007</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/MS%20Word%202007" title="Word 2007 Tips">MS Word 2007</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/search/label/Search%20Engine%20Optimization%20%28SEO%29" title="Search Engine Optimization">SEO</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Windows" title="Windows Tips dan Trik">Windows</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/feeds/posts/default" title="Posts RSS">Posts RSS</a></li>
<li><a href="http://tutorial7.blogspot.com/feeds/comments/default" title="Comments RSS">Comments RSS</a></li>
<li><a href="http://www.blogger.com/profile/05899674811945754032" title="Tentang Saya">About Me</a></li>
<li><a href="http://tutorial7.blogspot.com/2009/04/kontak.html" title="Kirim Email Ke Saya">Email Me</a></li>
<li><a href="#" title="Link Partners">Link Partners</a>
<ul>
<li><a href="http://tutorial7.blogspot.com/2009/04/partner-link-indonesia.html" title="Partner Links Indonesia">Partner Links Indonesia</a></li>
<li><a href="http://tutorial7.blogspot.com/2009/04/partner-link.html">Partner Links</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/2009/04/sitemap.html" title="Peta Blog">Sitemap</a></li>
<li><a href="#">Owner Edit</a>
<ul>
<li><a href="http://www.blogger.com/post-create.g?blogID=780351826145379977">Brand New Post</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=5759422519225049811">Link Edit</a></li>
<li><a href="http://www.blogger.com/posts.g?blogID=780351826145379977">Posts View</a></li>
<li><a href="http://www.blogger.com/rearrange?blogID=780351826145379977">Widget</a></li>
<li><a href="http://www.blogger.com/html?blogID=780351826145379977">HTML</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=8945225034979464711">Map</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=3728186818005253981">Upload</a></li>
<li><a href="http://www.blogger.com/blog-options-basic.g?blogID=780351826145379977">Option</a></li>
</ul>
</li>
</ul>

navigasi menu dengan style vertikal. Pakai kode di bawah ini:

ul#menuku-vertikal,ul#menuku-vertikal li,ul#menuku-vertikal ul {
width: 160px; /* Menu Width */
margin: 0;
list-style: none;
}

ul#menuku-vertikal li {
float: left;
position: relative;
width: 100%;
}

ul#menuku-vertikal li.iehover {
z-index: 1000; /* IE z-index bugfix */
}

ul#menuku-vertikal ul {
display: none;
position: absolute;
top: 0;
left: 100%;
z-index: 9999;
}

/* Menu Utama */
ul#menuku-vertikal a {
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 6px;
display: block;
background: #DDD;
color: #666;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}

/* Hover menu utama */
ul#menuku-vertikal a:hover,ul#menuku-vertikal li:hover a,ul#menuku-vertikal li.iehover a {
background: #BBB;
color: #FFF;
}

/* Sub Menu Level 1 */
ul#menuku-vertikal li:hover li a,ul#menuku-vertikal li.iehover li a {
float: none;
background: #BBB;
}

/* Sub Menu Level 1 Hover */
ul#menuku-vertikal li:hover li a:hover,ul#menuku-vertikal li:hover li:hover a,ul#menuku-vertikal li.iehover li a:hover,ul#menuku-vertikal li.iehover li.iehover a {
background: #999;
}

/* Sub Menu Level 2 */
ul#menuku-vertikal li:hover li:hover li a,ul#menuku-vertikal li.iehover li.iehover li a {
background: #999;
}

/* Sub Menu Level 2 Hover */
ul#menuku-vertikal li:hover li:hover li a:hover,ul#menuku-vertikal li:hover li:hover li:hover a,ul#menuku-vertikal li.iehover li.iehover li a:hover,ul#menuku-vertikal li.iehover li.iehover li.iehover a {
background: #666;
}

/* Sub Menu Level 3 */
ul#menuku-vertikal li:hover li:hover li:hover li a,ul#menuku-vertikal li.iehover li.iehover li.iehover li a {
background: #666;
}

/* Sub Menu Level 3 Hover */
ul#menuku-vertikal li:hover li:hover li:hover li a:hover,ul#menuku-vertikal li.iehover li.iehover li.iehover li a:hover {
background: #333;
}

/* Hover Attribut - Jangan Di Hapus */
ul#menuku-vertikal li:hover ul ul,ul#menuku-vertikal li:hover ul ul ul,ul#menuku-vertikal li.iehover ul ul,ul#menuku-vertikal li.iehover ul ul ul {
display: none;
}

ul#menuku-vertikal li:hover ul,ul#menuku-vertikal ul li:hover ul,ul#menuku-vertikal ul ul li:hover ul,ul#menuku-vertikal li.iehover ul,ul#menuku-vertikal ul li.iehover ul,ul#menuku-vertikal ul ul li.iehover ul {
display: block;
}

Jika ingin menggunakan menu vertikal ganti kode widget <ul id="menuku-horizontal"> menjadi <ul id="menuku-vertikal">

Selesai, semoga bermanfaat...
:D

Selengkapnya

Membuat Marquee Text

Jika pada artikel sebelumnya saya menulis tentang bagaimana "Membuat Blinking Text (Text Berkedip) di Blog," kali ini tentang cara lain yang dapat digunakan untuk membuat text lebih kelihatan menarik dengan membuat 'Text Berjalan" (Marquee Text). Ada beberapa macam model marque text, berikut beberapa contoh diantaranya;

Marquee text biasa. Contoh;

<marquee>http://www.linggihnote.blogspot.com</marquee>

Ganti 'http://www.linggihnote.blogspot.com' dengan text anda, maka hasilnya akan seperti ini;

http://www.linggihnote.blogspot.com

Jika ingin membuat text tebal, cetak miring, dan dengan garis bawah text tuliskan kodenya seperti ini;

<marquee>
<B><U><I>http://www.linggihnote.blogspot.com</I></U></B>
</marquee>

Hasilnya akan seperti ini;

http://www.linggihnote.blogspot.com

Jika masih kurang puas, ingin merubah arah text ataupun ingin menambahkan warna bachground text ikuti cara berikut ini;

Untuk merubah arah text, tambahkan kode berikut ini => direction="tentukan arah text pilihan anda". Ganti text "tentukan arah text pilihan anda" dengan 'left, right, up, down, atau alternate'. 'left' mengarahkan text ke kiri, 'right' ke kanan, 'up' ke atas', 'down' ke bawah, 'alternate' bolak balik kayak orang bingung ha..ha..! Atau jika ingin efek geraknya hanya satu kali setelah itu berhenti, tambahkan kode ini ==> behavior="slide" <==. Lihat kode dan contohnya di bawah. Saya akan coba membuat marquee text dengan ketentuan text mengarah ke kanan, background warna kuning, teks warna merah, tetapi efek teks miring saya hilangkan;

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" direction="right">
<B><U>http://www.linggihnote.blogspot.com</U></B>
</marquee>
</span>

'bgcolor' (warna background) saya pilih warna kuning, bisa anda tuliskan dengan kode warna seperti contoh di atas '#ffff00', atau cukup dengan menuliskan 'yellow', begitu juga dengan warna teksnya, hasilnya sama saja. Text yang muncul jadinya seperti ini;