learn until the end of life: Membuat Pulldown Menu

Ilmu Pengetahuan

Ilmu (atau ilmu pengetahuan) adalah seluruh usaha sadar untuk menyelidiki, menemukan dan meningkatkan pemahaman manusia dari berbagai segi kenyataan dalam alam manusia. Segi-segi ini dibatasi agar dihasilkan rumusan-rumusan yang pasti. Ilmu memberikan kepastian dengan membatasi lingkup pandangannya, dan kepastian ilmu-ilmu diperoleh dari keterbatasannya.

Teknologi

Teknologi adalah pengembangan dan aplikasi dari alat, mesin, material dan proses yang menolong manusia menyelesaikan masalahnya. Sebagai aktivitas manusia, teknologi mulai dikenal sebelum sains dan teknik.

Informasi

Informasi adalah pengetahuan yang didapatkan dari pembelajaran, pengalaman, atau instruksi. Namun demikian, istilah ini memiliki banyak arti bergantung pada konteksnya, dan secara umum berhubungan erat dengan konsep seperti arti, pengetahuan, negentropy, komunikasi, kebenaran, representasi, dan rangsangan mental.

Bahasa

Bahasa adalah penggunaan kode yang merupakan gabungan fonem sehingga membentuk kata dengan aturan sintaks untuk membentuk kalimat yang memiliki arti.

Budaya

Budaya atau kebudayaan berasal dari bahasa Sanskerta yaitu buddhayah, yang merupakan bentuk jamak dari buddhi (budi atau akal) diartikan sebagai hal-hal yang berkaitan dengan budi dan akal manusia. Dalam bahasa Inggris, kebudayaan disebut culture, yang berasal dari kata Latin Colere, yaitu mengolah atau mengerjakan. Bisa diartikan juga sebagai mengolah tanah atau bertani. Kata culture juga kadang diterjemahkan sebagai "kultur" dalam bahasa Indonesia.

Membuat Pulldown Menu

Baru saja blogger.com mengeluarkan fasilitas baru untuk para blogspot mania yaitu fasilitas page (yang sebenarnya bisa dibilang "too late" :x ), Artikel ini tidak membahas mengenai fasilitas tersebut melainkan bagaimana membuat Menubar pulldown yang sedikit lebih variatif dimana Artikel ini juga merupakan Pe eR ~~tersulit dan terpanjang yang bisa saya selesaikan~~ yang diberikan Rian pada komentar artikel Bikin menubar pulldown versi pertama, baca disini. Secara umum menubar pulldown versi 2 ini hampir sama dengan menubar cara yang pertama, perbedaannya hanya terletak pada bagian sub-menunya (menu baru yang muncul setelah kursor berada diatas Menu Utama) masih memiliki sub menu lagi sampai 2 turunan :x :x :x , Ilustrasi singkatnya seperti pada gambar screen capture diatas.

Jika tertarik silahkan mencobanya sendiri langkah-langkahnya adalah sebagai berikut: :k :k ;)

Persiapan:

Persiapkan semua link/URL LABEL blog yang akan pasang sebagai URL Menu Utama, Sub Menu Utama, dan Sub dari Sub Menu Utama. URL yang diambil adalah link dari LABEL yang dimasukkan ketika membuat artikel, jika belum jelas seputar LABEL mohon baca "FAQ cara membuat menu bar di blogspot" agar nantinya tidak kesulitan saat proses pengeditan/pemasangan Link.

Sebaiknya URL yang disiapkan sudah dipilah mulai dari kategori LABEL umum hingga yang lebih detail.

Masuk ke Kontrol Panel blog, pilih TATA LETAK -> EDIT HTML.

Sekedar mengingatkan untuk tidak lupa backup template sebelum melakukan perubahan dengan cara mendownloadnya terlebih dahulu. berhubung segala resiko kerusakan template diluar tanggung jawab saya ya :D :D :D

Pemasangan Kode CSS

Setelah proses backup template selesai copy seluruh kode CSS dibawah ini dan tempatkan diatas kode: ]]></b:skin>

/* pull-down mainmenu css*/

behavior:url("csshover2.htc");    /* important ! */

.mainmenu{

    float: left;

    width: 100%;

    padding: 0;

}

.mainmenu ul {

    float: left;

    width: 100%;

    list-style: none;

    line-height: 1;

    color:#FFFFFF;

    background: #000000;

    padding: 0;

    border: solid #FFFFFF;

    border-width: 1px 0;

    margin: 0 0 1em 0;

}

.mainmenu a, .mainmenu a:visited {

    display: block;

font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;font-style:normal;text-decoration:underline;

    color: #FFFFFF;

    text-decoration: none;

    padding: 1em 1em;

}

.mainmenu ul ul a{

    width:100%;

    height:100%;

}

.mainmenu ul a{

    width:1%;

}

.mainmenu li  {

    float: left;

    margin:0;

    padding:0;

}

.mainmenu ul li {float:left; position:relative;  }

.mainmenu ul li a {white-space:nowrap;}   

.mainmenu li ul {

    position: absolute;

    left: -999em;

    height: auto;

    width:15em;   

    background: #333333;

    font-weight: normal;

    border-width: 1px;

    margin: 0;

}

.mainmenu li li {

    width:15em ;

}

.mainmenu li li a{

    width:13em ;

}

.mainmenu li ul  {

    margin: 0;

}

.mainmenu li ul ul {

    margin: -2.8em 0 0 13.5em;

}

.ul_ch,

.mainmenu li:hover ul ul,

.mainmenu li li:hover ul ul,

.mainmenu li li li:hover ul ul,

.mainmenu li li li li:hover ul ul,

.mainmenu li li li li li:hover ul ul

{

    left: -999em;

}

.mainmenu li:hover ul,

.mainmenu li li:hover ul,

.mainmenu li li li:hover ul,

.mainmenu li li li li:hover ul,

.mainmenu li li li li li:hover ul

{

    left: auto;

}

.mainmenu li:hover>ul.ul_ch  

{

    left: auto;

}

.mainmenu li:hover{

    background: #666666;

}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{

    color:#FFFF00;

}

.mainmenu li:hover li a, .mainmenu li li:hover li a,

.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,

.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,

.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited

{

    color:#FFFFFF;

}

.mainmenu li li:hover, .mainmenu li li li:hover,

.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover

{

    background: #000000;

    z-index:9999;

}

.mainmenu li li:hover a,.mainmenu li li li:hover a,

.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a

{

    color: #FFFF00;

}

.mainmenu ul ul a, .mainmenu ul ul a:visited,

.mainmenu li li a, .mainmenu li li a:visited

{

    color: #FFFFFF;

}

.mainmenu ul ul a:hover,

.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,

.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,

.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,

.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,

.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{

    color: #FFFF00;

}

.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,

.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,

.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,

.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{

    color: #FFFFFF;

}

/* end of mainmenu css */

Khusus untuk pemasangan kode dibawah ada dua cara:

Cara Pertama

Masih dihalaman Edit HTML beri tanda centang pada pada Expand Widget kemudian cari kode <div id='content-wrapper'> (tekan Ctrl + F)

Letakkan kode HTML dibawah ini tepat dibawah kode diatas.

<!-- PULL DOWN MENU Mulai -->

<div class="menuutama">

<ul>

<li class="li_nc"><a href="/" target="_self" >Home</a></li> <!-- baris ini jangan diubah -->

<li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu1" target="_self" >Menu1</a><ul class="ul_ch">

  <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1" target="_self" >SubMenu1-1</a><ul class="ul_ch">

     <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/"  >Sub Menu1-1A</a><ul class="ul_ch">

        <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1A-1"  >SubMenu1-1A-1</a></li>

        <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1A-2"  >SubMenu1-1A-2</a></li>

        <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1A-3"  >SubMenu1-1A-3</a></li>

        </ul></li>

     <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-2B"  >SubMenu1-2B</a></li>

     </ul></li>

  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-2" target="_self" >SubMenu1-2</a></li>

  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-3" target="_self" >SubMenu1-3</a></li>

  </ul></li>

<li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu2" target="_self" >Menu2</a><ul class="ul_ch">

  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu2-1" target="_self" >SubMenu2-1</a></li>

  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu2-2" target="_self" >SubMenu2-2</a></li>

  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu2-2" target="_self" >SubMenu2-3</a></li>

   </ul></li>

<li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu3"  >Menu3</a></li>

<li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu4"  >Menu4</a></li>

</ul>

</div>

<!-- PULL DOWN MENU 2.0 by Oentoe_09 | Blog: http://oentoe09.blogspot.com/ | Selesai -->

Keterangan Kode HTML diatas:

kode Warna Hijau adalah kode yang tampil sebagai menu utama diantaranya link HOME, Menu 1 sampai menu 4.

Kode Warna Biru adalah kode untuk Sub-Menu pulldown pertama

Kode Warna Ungu adalah kode Sub-Menu pulldown ke-2 yaitu sub dari Sub-Menu pertama .

Kode Warna Merah adalah kode untuk Sub-menu ke-3 yaitu sub dari Sub-menu pulldown ke-2.

Ganti semua kode http://NamaBlogAnda.blogspot.com/search/label/xxxx-xxx dengan URL Label Artikel yang sebelumnya sudah dipersiapkan (kecuali untuk HOME tidak perlu diedit), sebagai contoh jika salah satu artikel diberi LABEL "Tutorial" (tanpa tanda kutip) maka URLnya menjadi http://NamaBlogAnda.blogspot.com/search/label/Tutorial. sehingga menjadi seperti ini: <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Tutorial" >Tutorial</a></li>

Untuk melihat hasilnya masih di halaman Edit HTML tekan tombol Pratinjau, jika sudah nampak Menu Bar-nya silahkan Save hasil Perubahan Anda.

Cara Kedua

Cara ini hanya jika hasil pada cara pertama tidak sesuai dengan keinginan (biasanya letak menu bar tidak rapi), dan pastikan cara pertama diatas belum dilakukan.

Cara kedua ini adalah dengan menempatkan kode HTML diatas melalui Add Widget di tab Add Elemen Page yang nantinya widget tersebut diletakkan dibawah header. Berhubung secara default widget header hanya bisa satu widget yaitu Header itu sendiri maka masih di tab EDIT HTML beri tanda centang pada Expand Widget dan cari kode ini <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> setelah ketemu ganti nilai maxwidgets menjadi 2 dan nilai showaddelement menjadi yes, setelah itu baru simpan hasil perubahannya.

Pindah ke tab Add Elemen Page kemudian klik Add Widget yang berada dibawah Header. Pilih HTML/Javacript dan paste semua kode HTML diatas, lalu simpan.

Tekan tombol Pratinjau untuk melihat Hasilnya.

Tips Menambah atau mengurangi Link Menu:

Jika ingin menambah lagi Menu Utama (HOME, Menu 1 dstnya), fokus hanya pada kode berwarna hijau kemudian copy paste kode <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Label" >Label</a></li> ini dan tempatkan tepat dibawah kode <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu4" >Menu4</a></li> (tergantung berapa banyak Menu utama yang ingin ditambahkan). Sedangkan jika ingin mengurangi Menu Utama langsung hapus baris yang berwarna hijau yaitu kode dari <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu4" >Menu4</a></li> (atau tergantung berapa Menu utama yang ingin dihapus).

Jika ingin membuat Sub menu pada Menu3, copy paste semua kode berwarna biru pada menu2 dan paste diantara kode <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu3" >Menu3</a> dan </li>. Hal yang sama berlaku jika ingin menambahkan Sub Menu pada Menu 4 atau pada tambahan Menu Utama yang anda telah tambahkan.

Jika masih ingin menambahkan sub menu dari sub menu pada Menu3 dan Menu4 (seperti pada Menu 1) :x :x :x , copy semua kode menu1 yaitu mulai dari kode <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu1" target="_self" >Menu1</a> sampai pada kode </li> yaitu sebelum kode <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu2" target="_self" >Menu2</a> kemudian replace kode Menu 3 dengan hasil copy tadi. Hal yang sama berlaku jika ingin menambahkannya pada Menu 4 atau pada tambahan Menu Utama yang telah tambahkan.

Semoga bisa bermanfaat, selamat mencoba dan semoga sukses ~~ataupun tidak sukses~~ bikin menu bar-nya. Btw don't forget to leave comment ya :k :k :k .

Posted by Unknown

On - -

0 komentar »

learn until the end of life

learn until the end of life

Ciawigebang - Kuningan

Popular Posts

Tukar Link di Blog Anda

Contoh Pamplet

Contoh Brosur

Tukaran Link

FB

Translate

Visitor

Random Ayat

Thumbnail Recent Post

Soal Ujian Praktek Ms. Excel

Download RPP & Silabus Lengkap

Kumpulan Silabus RPP SMA berkarakter lainnya

RPP dan Silabus

Blog Siswa SMANCI

Download Image Photoshop

Blog Archive