Langsung ke konten utama

MEMBUAT MENU PULLDOWN

Terinspirasi pertanyaan salah satu pengunjung tentang bagaimana caranya membuat menu pulldown horisontal, maka dibawah ini pakde buatkan listingnya secara langsung. Sebenarnya untuk membuat listing perlu sedikit pengetahuan tentang tag HTML. Namun bagi yang belum sempat mempelajarinya langsung aja copy paste tag berikut ini. Selanjutnya gantilah teks yang dicetak tebal atau berwarna merah dengan link postingan sobat.
Ikutilah langkah berikut :
  1. Silahkan login ke www.blogger.com dengan akun sobat.
  2. Pilih tab tata letak
  3. Selanjutnya pilih Elemen halaman
  4. Klik Tambah gagdet, kemudian pilih HTML/Java script.
  5. Copykan listing pada tempat yang tersedia. Jika langkah sobat benar akan muncul gambar seperti berikut :
  6. Klik Simpan.
Ini adalah listingnya :

<!doctype transitional//en 1.0 -//w3c//dtd public html xhtml http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<style media="screen" type="text/css">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0; width:1px}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>
<div class="pd_menu_01 ">
<ul><li><a href="#">Home</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/08/bismillahirrahmanirrahiim-selamat.html" class="lastone">Klik disni</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Agama</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/09/anda-berada-di-halaman-agama-silahkan.html" class="lastone">Klik disni</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Iptek</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/08/menu-komputer-klik-menu-dibawah-ini.html">Komputer</a></li>
<li><a href="http://www.itku.co.cc/2009/09/anda-berada-di-halaman-pendidikan.html">Pendidikan</a></li>
<li><a href="http://www.itku.co.cc/2009/09/anda-berada-di-halaman-tip-dan-trik.html">Tip & Trik</a></li>
<li><a href="http://www.itku.co.cc/2009/08/anda-berada-di-halaman-umum-silahkan.html">Umum</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Humor</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/09/anda-berada-di-halaman-humor-silahkan.html" class="lastone">Klik di sini</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Download</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/09/anda-berada-di-halaman-referensi.html">Referensi</a></li>
<li><a href="http://www.itku.co.cc/2009/09/software-gratis-maap-fitur-ini-belum.html">Software</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Link Sahabat</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/09/silahkan-memasang-link-anda-disini-dan.html" class="lastone">Klik di sini</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Ruang Guru</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/10/anda-berada-di-halaman-pojok-guru.html">Klik di sni</a></li>
</ul>
<ul><li><a href="#">Pasang Iklan</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/09/iklan.html">Klik di sni</a></li>
</ul>
</li></ul>
</li></ul></div>
</!doctype>

Setelah itu copy TAG diatas dan paste di tempat yang sobat inginkan
Selamat mencoba.

Postingan populer dari blog ini

SOAL PSIKOTES

 TES PAPI ( Perception and Preference Inventory ) Ini adalah pengalaman pertama pakde karyo mengikuti tes psikotes di UNAIR Surabaya. Tes dilakukan dengan berbagai model pemeriksaan antara lain tes logika penalaran, tes warteg , tes Kraeplien/Pauli , Draw a Man Test (DAM), menggambar pohon, army alpha intelegence test dan PAPI ( Perception and Preference Inventory ) . Dalam mengerjakan soal setiap tahap dipandu oleh petugas dengan cepat sekali. Berikut ini adalah soal tes PAPI. Dalam tes ini anda akan diberikan 90 pasang pernyataan. Jika memilih pernyataan pertama maka cara menjawabnya melingkari anak panah mendatar, namun jika memilih pernyataan kedua maka melingkari anak panah yang arah diagonal.  Ikutilah petunjuk    yang diberikan oleh pemandu. Saya seorang pekerja keras, Saya bukan seorang pemurung Saya suka bekerja lebih baik dari orang lain, Saya suka mengerjakan apa yang sedang saya kerjakan, sampai selesai Saya suka menunjukkan caranya mel...
Lanjut »

PERANGKAT KERAS KOMPUTER

K omputer terdiri dari perangkat keras (hardware) dan perangkat lunak (software). Perangkat keras adalah perangkat yang secara fisik dapat dilihat. Sedangkan perangkat lunak adalah perangkat yang berupa program-program untuk menjalankan komputer. Secara skematik perangkat keras adalah sebagai berikut : 1.       Central Processing Unit (CPU) CPU merupakan pusat pengolah data atau sering disebut sbagai otaknya komputer.CPU sering juga disebut sebagai microprocessor atau processor. Gambar processor adalah sebagai berikut : Berdasarkan fungsi operasionalnya CPU dibedakan menjadi 2 bagian yaitu : a.       Arithmatical Logical Unit (ALU) berfungsi sebagai pusat pengolah data, seperti perhitungan matematika. b.       Control unit (CU), berfungsi sebagai pengontrol kerja komputer. ~           Kecepatan kinerja komputer diukur dengan satuan hertz. Saat ini k...
Lanjut »

MEMBUAT TES INTERAKTIF DENGAN TOKEN

Tutorial ini akan menunjukkan kepada anda bagaimana cara membuat soal tes interaktif online dilengkapi dengan token. Token adalah kode unik yang harus diinputkan agar hanya orang yang dikehendaki dapat  mengerjakan soal. Fungsi token dalam pembuatan soal online antara lain :  dapat mencegah orang yang tidak berkepentingan masuk ke  sistem tes.  guru bisa mengendalikan kapan siswa mulai mengerjakan soal online. alat bantu menjaga keamanan data Dalam panduan ini penambahan token dilakukan pada pembuatan tes interaktif yang menggunakan google form, seperti yang sudah di paparkan pada judul membuat tes interaktif mudah .di blog ini. Anda dianggap telah memahami cara membuat tes interaktif menggunakan google form, namun jika belum silahkan klik https://pakdekaryo.blogspot.com/2020/04/membuat-tes-interaktif-mudah.html . Berikut langkah-langkah yang diperlukan untuk menyisipkan token pada soal yang akan atau sudah kita buat.  Membuat formulir baru, s...
Lanjut »